0

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?

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.