Add php function into .js file (for tinyMCE button)

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?

Answer 1

To ajax this function you have hook it, so your function will be like this :

function write_cat_list($cat){
    $cats = get_categories('hide_empty=0');
    if($cats) :
        $tinyMCE_list = array();
        foreach ($cats as $cat) :
            $tinyMCE_list[] = array( 'text' => $cat->name , 'value' => $cat->term_id );
            //write_cat_list($cat->term_id);
        endforeach;
        $jscode = json_encode($tinyMCE_list); //to convert from array to opject
        echo $jscode;
    endif;
    die();
}
add_action( 'wp_ajax_cat_list', 'write_cat_list' );

and the jquery:

jQuery.ajax({
     type: 'post',
     url: ajaxurl,
     data: {action : 'cat_list'},
     success: function(data){
        console.log(data);
        // use var data
     }
});

also you can use localize instead of ajax
to use it remove die(); from your function and add this:

wp_enqueue_script( 'your js file handel' );
wp_localize_script( 'your js file handel', 'jscode',array( 'cat_list' => $jscode));

and add_actionreplace it with :

add_action( 'wp_enqueue_scripts', 'write_cat_list' );

and the jquery:

console.log(jscode.cat_list);

the full code for ajax:

// php
function write_cat_list($cat){
$cats = get_categories('hide_empty=0');
if($cats) :
    $tinyMCE_list = array();
    foreach ($cats as $cat) :
        $tinyMCE_list[] = array( 'text' => $cat->name , 'value' => $cat->term_id );
        //write_cat_list($cat->term_id);
    endforeach;
    $jscode = json_encode($tinyMCE_list); //to convert from array to opject
    echo $jscode;
endif;
die();
}
add_action( 'wp_ajax_cat_list', 'write_cat_list' );

 // jquery
 jQuery.ajax({
    type: 'post',
    url: ajaxurl,
    data: {action : 'cat_list'},
    success: function(data){
        console.log(data);
        // use var data
    }
});

the full code for localize:

    // php
function write_cat_list($cat){
$cats = get_categories('hide_empty=0');
if($cats) :
    $tinyMCE_list = array();
    foreach ($cats as $cat) :
        $tinyMCE_list[] = array( 'text' => $cat->name , 'value' => $cat->term_id );
        //write_cat_list($cat->term_id);
    endforeach;
    $jscode = json_encode($tinyMCE_list); //to convert from array to opject
    echo $jscode;
endif;
wp_enqueue_script( 'your js file handel' );
wp_localize_script( 'your js file handel', 'jscode',array( 'cat_list' => $jscode));
}
add_action( 'wp_enqueue_scripts', 'write_cat_list' );
// jquery
console.log(jscode.cat_list); // jscode.cat_list var handel the object