Reply To: Dynamically change acf_form checkbox field

• John Huebner

• April 26, 2016 at 8:47 am

If you’re looking to dynamically load a field based on another field then I would stick with a basic field type, like a select box, it can be done with radio and checkbox fields, and more than likely something like a taxonomy field, but a taxonomy field is already making AJAX requests and tying into those will be more complicated.

Here are the basics for setting up a function that will fire when a field changes and make an AJAX request. You would create JavaScript file and enqueue it in the admin. When you enqueue the script set it’s $deps argument to array('acf-input'); which will ensure that that ACF’s acf-input.js file is loaded first.

The following is for a select field that will trigger the event and change the values of another select field. You’ll need to do some testing to do other things but this is more information than I think is currently available and I think it will give people a place to start. You may also want to localize the script with the action that needs to be called. For more information on ajax and localizing scripts:

• https://codex.wordpress.org/Function_Reference/wp_localize_script
• https://codex.wordpress.org/AJAX_in_Plugins

Some of this, I’m not 100% sure of what it does, I’ve commented that below. Some of this was copied from other sources. I hate using stuff without completely understanding it, but, I’ll figure it out eventually. Most of what I’ve been able to learn is by trial and error, as the OP said, there isn’t a lot of information currently available for this type of thing and I’m hoping that others can help me change that. Hope this helps.

jQuery(document).ready(function($){
  if (typeof(acf) == 'undefined') {
    // acf does not exist
    return;
  }
  // create events
  events: {
    // add a change event to the select field with
    // the id acf-field_56f181bf6f8d0
    // that calls the function _my_select_change_function
    'change #acf-field_56f181bf6f8d0': '_my_select_change_function',
    // add another event for the ready event
    // more about this later
    'ready #acf-field_56f181bf6f8d0': '_my_select_change_function',
  }, // end of events
  // the function
  _my_select_change_function: function(e) {
    // if we're already doing a request abort it
    if (this.request) {
      // another ajax request
      this.request.abort();
    }
    // not exactly sure what the next 2 lines do
    var self = this,
        data = this.o;
    // your ajax action
    data.action = 'my_ajax_action';
    // the value of the this field to send in the ajax request
    data.value = e.$el.val();
    // make the ajax request
    this.request = $.ajax({
      url: acf.get('ajaxurl'),
      data: acf.prepare_for_ajax(data),
      type: 'json',
      success: function(json) {
        // this function is called when
        // value is returned from ajax request
        // it returns an object or array
        // that looks like
        /*
          json = array(
            // nested array for each value label pair
            // to use when populating second select field
            array(
              'value' => 'value of options',
              'label' => 'label of option'
            )
          );
        */
        // get the other select field we want to populate
        // can probably be done in other ways as well
        $select = $('div[data-key="field-57028ebad20f0"] select');
        // store what's already selected
        var $selected = [];
        // get current options and loop
        var $options = $('.acf-field-57028ebad20f0 option');
        for (i=0; i<options.length; i++) {
          if ($options[i].selected) {
            $selected[$selected.length] = $options[i].value;
          }
        } // end for i
        // clear all current options from the select field
        $select.empty();
        // add null item
        $select.append('<option data-i="" selected="selected" value="">- Select -</option>');
        // loop returned value an populate
        for (i=0; i<json.length; i++) {
          var $item = '<option value="'+$json[i]['value']+'"'
	  if ($selected.indexOf($taxonomy_terms[i]['value']) > -1) {
            // item was previously selected
            $item += ' selected="selected"';
          }
          $item += '>'+$json[i]['label']+'</option>';
          $select.append($item);
        } // end for i
      } // of success function
    }); // end of ajax request
  }, // end _my_select_change_function function

  // this will trigger when the page loads
  // what this will do is cause the select field we 
  // are dynamically populating to be loaded initially
  // using the ready action does not cause ACF to think
  // the field has been changed and means that the
  // "are you sure you want to leave this page"
  // message will not be displayed
  $(#acf-field_56f181bf6f8d0').trigger('ready');

} // end of jquery ready function 

~JH