Add a php function to a javascript file with AJAX (tinymce + wordpress related)

Question

I am creating a tinyMCE button for the wp WYSIWYG editor. Basically what happens is when a use clicks on the button a modal form pops up and they have to enter a few fields. However One of the fields needs to be a list box that lists every post category and the user will select one. The basic syntax for that is as follows:

{
type: 'listbox', 
name: 'sds-category', 
label: 'Category', 
'values': [
    {text: 'Name Of Cat', value: 'Cat ID'},
    {text: 'Name Of Cat', value: 'Cat ID'},
    {text: 'Name Of Cat', value: 'Cat ID'}]}

So in order to get all the categories displaying like that I have used a PHPfunction which will spit out that {text: '', value: ''} syntax for every category and it goes as follows:

function write_cat_list($cat){
    $cats = get_categories('hide_empty=false&orderby=name&order=ASC&parent=' . $cat);

    if($cats) :
        foreach ($cats as $cat) :
            $tinyMCE_list[] = "{text: '".$cat->name."', value: '".$cat->term_id."'}";
            write_cat_list($cat->term_id);
        endforeach;
        echo implode(',', $tinyMCE_list);
    endif;
}

So now all that is left is placing the PHP function write_cat_list(0) into my .js file, and that is where I am completely stuck!

I am not sure how to go about doing this, because I am very very inexperienced with AJAX, is there an easy way or a jquery function that will make it easy to include my php function to this js file?

Danijel · Accepted Answer · 2014-06-21 10:52:16Z

Since you are recursively collecting categories, print the value inside foreach loop, or collect the values into an array ( just as you are doing ) and pass that further. Here is an example:

function list_categories( $cat_id, &$output = array() )
{
    $categories = get_categories( 'hide_empty=0&orderby=name&order=ASC&parent=' . $cat_id );

    foreach( $categories as $cat ) {
        $output[] = array( 'text' => $cat->name, 'value' => $cat->term_id );
        list_categories( $cat->term_id, $output );
    }
    return $output;
}

$list = list_categories(0); // to get an array of categories

There are several ways to include the output into .js file. If the script is generated with .php file then use:

'values': <?php echo json_encode( list_categories(0) ); ?>

If is external file one option is to localize script:

wp_localize_script( 'some_handle', 'mce_options', array( 'categories' => json_encode( list_categories(0) ) ) );

// later in .js file
'values': mce_options.categories

Another option is to print values directly in admin_head:

add_action( 'admin_enqueue_scripts', 'mce_admin_scripts' );
function mce_admin_scripts( $hook ) {
    if ( $hook == 'post.php' || $hook == 'post-new.php' ) {
        add_action( "admin_head-$hook", 'mce_admin_head' );
    }
}
function mce_admin_head() {
    echo '<script type="text/javascript">var mce_options=' . json_encode( array( 'categories' => list_categories(0) ) ) . '; </script>';
}

Collectives™ on Stack Overflow

Add a php function to a javascript file with AJAX (tinymce + wordpress related)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related