jQuery Plugin to use WordPress functions in AJAX request

I’m using Chained Selects jQuery Plugin to create multiple chained selection fields. I’m using the remote version of the plugin to build the related options by means of AJAX request from a separate PHP file. So basically it works by calling the following code:

$("#field2").remoteChained("#field1", "/data/json.php");

What I would like to do

I would like to use WordPress’ functions in the PHP file (in this case: /data/json.php) to create the options dynamically. But I do not want to use mysql_query() to search through the database.

Read More

I understand that in WordPress you have to use admin-ajax.php. But I’m not sure how to integrate it with the plugin above.

Sample Case

For this example, let’s just use WordPress’ category. So the two select fields will be the category field and the sub-category field. The latter one will relate to the former one, ie. the parent category.

What I have tried so far

  1. The HTML:

    <?php
    wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=field1');
    ?>
    <select name="field2" id="field2"></select>
    
  2. Call the scripts (in functions.php):

    function the_scripts() {
        // The Chained Selects jQuery Plugin
        wp_enqueue_script('chained_select', get_template_directory_uri() . '/js/jquery.chained.remote.js', array('jquery'), false, true);
    
        // The script to call the action
        wp_enqueue_script('scripts', get_template_directory_uri() . '/js/scripts.js', array('jquery','chained_select'), false, true);
    
        // code to declare the URL to the file handling the AJAX request
        wp_localize_script( 'scripts', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    }
    
    add_action('wp_enqueue_scripts', 'the_scripts', 100);
    
  3. The code to call the action (in scripts.js):

    $(document).ready(function (){
    
        jQuery.post(
            the_ajax_script.ajaxurl,
                {
                    action : 'myajax-submit'
                }
                ,function( response ) {
                    $("#field2").remoteChained("#field1", the_ajax_script.ajaxurl);
                }
        );
    
    });
    
  4. The action (in functions.php):

    function get_options() {
    
        $response[""] = "--";
    
        if ($_GET["field1"]) {
    
            $categories =  get_categories('child_of='.$_GET['field1'].'&hide_empty=0');
    
            $response[""] = "--";
            foreach ($categories as $cat) {
                $response[$cat->term_id] = $cat->cat_name;
            }
    
        };
    
        print json_encode($response);
    
        exit;
    }
    
    add_action( 'wp_ajax_myajax-submit', 'get_options' );
    add_action( 'wp_ajax_nopriv_myajax-submit', 'get_options' );
    

This whole thing doesn’t work in that the jQuery plugin isn’t doing it’s job. How can I communicate WordPress with this plugin?

Thanks in advanced.

Related posts

Leave a Reply