Any way to make Ajax calls from options panel?

[sudheer-ranga]

How can I make ajax calls from admin options that I create.

Say I have a tab and inside the tab I have a select dropdown. I want to populate a state list based on country selection and city selection based on the state selected.

I select country, say "US" -> I want to make an ajax call to a php file that returns a list of states and update the field without reloading the page or click on save button. Is this possible?

Right now, I am giving the option to select the county and click on save. I am validating the country from validation_page_slug_tab_slug() method and if it passes the validation I assign the states array from here.

But I want this to work on select. Also, I want to repeat the same for others like states and cities.

Let me know if there is a way I can achieve.

[michaeluno]

Hi,

I posted an example plugin on Gist.

Hope it helps.

[sudheer-ranga]

Man you are awesome! 👍 Such a great plugin and quick support. Tried your example. Works like charm. Need to implement this according to what I need.

I don't know why this plugin isn't listed on top admin page frameworks, but all I can say is if one needs to create a good options page, this is the ultimate plugin. No one can beat it. I have tried 💯 's of existing options frameworks out there. They are good for simple layouts, but when it comes to complex scenarios they are waste of time.

Thanks a ton for the plugin 👍 I may run into trouble trying this, so not closing the ticket.

[michaeluno]

Glad it helped!

Would be appreciated if you could take a few minutes to write a plugin review.

Thanks.

[sudheer-ranga]

Done! Reviewed.

[michaeluno]

Thank you!

[sudheer-ranga]

@michaeluno Have an issue here. I am able to make the ajax calls and get the object when selecting an item from list. How do I update another select option field with this ajax response object?

Say I have 2 select fields, one for country and 2nd for state. I have populated countries list. When I select country I get the state list as response in ajax success. Now, how do I update the state dropdown with this object?

From your gist:

success: function( aData, textStatus ) {

  // Update the field
  console.log( 'Ajax Reposne' );
  console.log( aData );

  $( 'textarea[name*="[dynamic_field]"]' ).val( aData.message ); 
}

This is for textarea. Similarly how do I do for the select option things? Is this available in the docs somewhere?

$( select[name*="[dynamic_field]"]' ).val( aData.message ); //Something like this or need to implement the custom dropdown

[michaeluno]

This is for textarea. Similarly how do I do for the select option things?

Just set your select field ID to the jQuery selector.

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

Make sure the message property contains the corresponding value to the select option value. The response data is defined as an array passed to the wp_send_json() function in the example on the PHP side.

Is this available in the docs somewhere?

This is basically a jQuery matter. To select elements by an attribute value, see the jQuery documentation. For Ajax, see here.

[sudheer-ranga]

I console logged the aData.message and this is what I am getting back.

Object {none: "Select Fields", email: "Email", FNAME: "First Name", LNAME: "Last Name"}

I did $( 'select[name*="[your_select_field_id_here]"]' ).val( aData.message ); but it replaces everything and I don't see anything in dropdown.

Also, I am using repeatable field and if I select from one section, the ajax is getting triggered in all the repeated section since select[name*="[your_select_field_id_here]"] is same for all repeated fields.

Please help me. I am stuck at this point.

[michaeluno]

Sure. Let's create a new topic. This way, someone who encounters a similar problem will find the information much easier. I'll post another example there. Thank you!