How to reload an ACF meta box with jQuery / AJAX

• athielmarketing

• January 26, 2017 at 9:11 am

I have got a rather complicated ACF application under development and it’s just gotten more complicated at the last minute. Maybe you can help me out.

I have some custom fields that are defined in a taxonomy term (vehicle types). In turn, these custom fields populate the options on a custom post type (vehicles).

This is working well, so the user can go to the term “cars” and add the make “Honda” with associated models, “Civic, Accord” and add another repeater row for the make “Ford” with the associated models “Focus, Explorer” and so on. When the “Vehicle Type” taxonomy is set to “cars,” the choices Ford and Honda appear in the “Vehicle Makes” field. When the “Vehicle Make” is set to “Ford,” the choices Focus and Explorer appear in the “Vehicle Models field. This took some custom work, but I was able to get the results I needed with the help of your docs and your forums.

The only problem now, is that you have to SAVE the post every time you want the new options to appear. So you have to select “car,” then hit publish. Select “Ford” then hit update. Select “Focus” then hit update. My solution to this was to add custom buttons by each field that would save the post. But, upon review it is now required that this is done by AJAX, so that the user doesn’t have to reload the screen each time.

I have managed to modify some code to save the post with AJAX so that the fields can be updated without reloading the screen. However, when I do this, the fields still show the old choices. So if I change Honda to Ford, the options are still civic and accord. When I refresh the page, they update to the right ones.

So what I would like to do is just load the field again with ajax. I have tried various ways of doing this, most recently by running executing php script with a jQuery “load” call. I looked through ACF code for the callback function for the meta boxes, and I think that it is render_meta_box. I tried playing around with this function but with no luck. I must be looking in the wrong place or doing something wrong … Is it possible to achieve what I am trying here, and if so, can you point me in the right direction? How exactly do I reload/refresh a field using AJAX? Thanks in advance for your help.

• John Huebner

• January 26, 2017 at 12:12 pm

I’m not sure what type of fields you have but if you’ve gone this far on your own. I have a bunch of examples of how to load different types of ACF fields using AJAX based on other fields. Like I said, I may not have the exact thing you’re looking for but it sounds like you might be able to figure it our if you have some good examples. https://github.com/Hube2/acf-dynamic-ajax-select-example

• athielmarketing

• January 27, 2017 at 3:45 am

Thanks, I saw this in my searches and tried implementing something like it but had no luck. I’m going to try setting it up on a clean installation and take a closer look at what it’s doing to see if I can use it for what I need. I’ll let you know how it goes.

• John Huebner

• January 27, 2017 at 3:49 am

It all depends on what type of fields you want to use for the conditions and what fields you want to populate and I’d try to stay away from trying to populate any select2 type fields and instead go with simple select fields.

• athielmarketing

• January 27, 2017 at 8:26 am

This reply has been marked as private.

• John Huebner

• January 27, 2017 at 9:30 am

So the problem is that you’re not returning anything in from the ajax request.

In you function ajax_acf_load_models_field_choices() you’re looking at the global $post value, but during ajax $post will not contain anything.

If you want to have the post ID of the current post then you need to put that into a localization value for your script and then send that as part of the request.

You can see how the localization is done on line 114 of this file https://github.com/Hube2/acf-dynamic-ajax-select-example/blob/master/dynamic-fields-on-relationship/dynamic-fields-on-relationship.php and how it is passed back in the ajax request on line 77 of this file https://github.com/Hube2/acf-dynamic-ajax-select-example/blob/master/dynamic-fields-on-relationship/dynamic-fields-on-relationship.js.