Populate Select Dropdown with the Ajax Response

[sudheer-ranga]

I followed this and create an ajax call. https://github.com/michaeluno/admin-page-framework/issues/254 I have 2 dropdowns, one for country and one for the states. When I select a country from the dropdown, I make the ajax call and I get the response.

Now I want to populate select dropdown to the states with this response. Below is the sample response.

Object {ca: "California", la: "Los Angeles", aa: "State 1", bb: "State 2"}

If I use the below code, it doesn't work. This just empties the state dropdown and nothing appears in the dropdown.

$( 'select[name*="[your_select_field_id_here]"]' ).val( aData.message );

Also, I am using this in a repeated section. So, when I select a country from any section, it populates the states in both the sections.

[michaeluno]

It will be complicated as you want to do it with repeatable sections.

If you don't have to do it with Ajax, it becomes much simpler. I posted an example plugin. This just hides pre-poplurated drop-down lists.

[michaeluno]

@sudheer-ranga Are you still looking for the solution?

I've realized that what you asked can be achieved with a custom field type. And there was a feature request for implementing select2.

The dev branch now includes the select2 custom field type. It supports Ajax based drop-down lists. Using the field type should be much simpler for you than the example I posted in the previous reply and it wasn't really using Ajax.

Usage

The options field argument accepts select2 options except the ones that accept JavaScript callback functions.

To implement Ajax based drop-down lists, What you need to do is set a callback function to the callback -> search field argument.

array( 
    'type'              => 'select2', 
    'options'         => array( 
        'minimumInputLength' => 2, 
        'width' => '100%', 
    ), 
    'callback'        => array( 
        // If the `search` callback is set, the field will be AJAX based. 
        // use a static class method or a function  
        // rather than an instantiated object method for faster processing. 
        'search'    => __CLASS__ . '::getPosts',  // <-- you need to set this one
    ), 
)

And of course, you need to define your own callback method for Ajax requests called in the background. The callback method should return an array with the following structure.

array(
     'results'  => array(
         array( 'id' => 223, 'text' => 'Title of 223' ),
         array( 'id' => 665, 'text' => 'Title of 665' ),
         array( 'id' => 9355, 'text' => 'Title of 9355' ),
         ...
     ),
     'pagination' => array(
         'more'  => true,    // (boolean) or false - whether the next paginated item exists or not.
     )
)

The results argument must hold an array of list items with the id and text elements. The pagination argument can be omitted but if you want to tell select2 that you have more items, set true to the more argument in it.

Another type of callback functions for new tags is supported besides search. It is for when you enable is_multiple and options -> tags argument. For more details, please see the examples. Examples can be found via Dashboard -> APF Demo -> Custom Field Types -> Select2. The code is here.

There is a known limitation; if you use a class method for the callback, it should be static. Otherwise, the form will load slow.

[sudheer-ranga]

@michaeluno Yes buddy. This looks cool. Will give it a try in my free time. I had stopped using this as I was looking for this feature. As you said it is possible, will implement this and let you know.

[michaeluno]

All right.

[sudheer-ranga]

Hi,

I tried the above one with ajax select2 dropdown and there seems to be some problem. I updated the plugin to latest and then took the below code from demo files. This also doesn't seem to work.

array(
        'field_id'      => 'default',
        'type'          => 'select2',
        'title'         => __( 'Select2', 'admin-page-framework-loader' ),
        'label'         => array(  
            0 => __( 'Red', 'admin-page-framework-loader' ), 
            1 => __( 'Blue', 'admin-page-framework-loader' ), 
            2 => __( 'Yellow', 'admin-page-framework-loader' ), 
            3 => __( 'Orange', 'admin-page-framework-loader' ), 
        ),
        'default'       => 2,
)

The label get displayed but not the select2 dropdown. This warning is shown on the top.

Notice: Array to string conversion in /Applications/AMPPS/www/wordpress/wp-content/plugins/my-plugin/includes/vendor/mm-options/library/apf/factory/_common/form/field_type/AdminPageFramework_FieldType_default.php on line 10

I tried both the normal select2 and the ajax. Both seems to display the title but not the dropdown. Any idea why? I have attached the screenshot on how it looks.

[michaeluno]

You need to register the field type. This has to be done for all custom field types.

Assuming that you generated your own version of the framework with the class prefix of YourClassPrefix_, then, in your load() method of your extended class, define

public function load() {
    new YourClassPrefix_Select2CustomFieldType( $this->oProp->sClassName );
}

[xdisplayx]

Hello Using the example given here, in AdminPageFramework works but in AdminPageFramework_MetaBox gives error, always remains saying "The results could not be loaded." Any idea how to fix it? Thank you.

[michaeluno]

@xdisplayx I could confirm the problem. Currently, the select2 custom field type doesn't call admin-ajax.php for AJAX but the same URL that the field resides. This works in generic admin pages but doesn't in post definition pages (post.php and post-new.php).　

To change it to use admin-ajax.php, some of the framework core code have to be changed also. I'll see how this can be achieved. It may take some time though. Thanks for the report.

[michaeluno]

@xdisplayx Can you try the dev branch? With the version 3.8.14 or above, the select2 field type can properly retrieve responses with user set Ajax callbacks in meta-box classes.

[xdisplayx]

@michaeluno, I've stolen it with version 3.8.14b03 and it works! Thank you very much for your help. I will continue trying to discover all the functionalities of this framework. :)