Support

Account

Register Login

Forum Replies Created

  • v4nelle,

    This error is likely because you need to change the key_name property to match the parameter of your load_city_field_choices function. key_name is just a placeholder I put in the example and the reason I added the comment //The key_name needs to be the name of the parameter in your action

    Hope this helps.

  • You’re welcome. I glad I could help.

  • I had to rework my code and use some of new 5.7 JavaScript APIs. For example they changed acf.prepare_for_ajax to acf.prepareForAjax. The way the data element is constructed also need changing as well as abandoning the acf.ajax.extend methodology.

    Below is an attempt to rewrite your example using what I did as a basis. I make no guarantees that all my changes will make your example work, but they got my code back up and running. Hope it helps. I also left both the ready and change events in there in case people wanted to use e.type to branch the code based on the event type.

    jQuery(document).ready(function($){
    if (typeof acf == 'undefined') { return; }

      var acf_field = acf.getField('field_56e1cf2e7ad26');

      acf_field.on("change ready", function(e){

        // bail early if no ajax
        if( !acf.get('ajax') ) return;

        // abort XHR if it's already running
        if( this.request ) {
          this.request.abort();
        }

        // set the ajax action that's set up in php
        var data  =  { 
            action: 'get_sub_terms',
            key_name: acf_field.val(); //The key_name needs to be the name of the parameter in your action
        }

        this.request = $.ajax({
          url:    acf.get('ajaxurl'),  // ajax url, acf already sets this
          data:    acf.prepareForAjax(data), // another included acf function
          type:    'post', // posted values, look at $_POST in your php ajax action function
          dataType:  'json', // how we want the date returned
          success: function( json ){
            // get the field we want to populate
            var $select = $('.acf-field-56e2b71dde0c5 select');
            // this stores the currenlty selected value in that field
            // so that we can mark it as selected, this is important when loading
            // and exsiting post
            var $selected = $select.val();
            // clear all of the exsiting options from the field
            $select.empty();
            // rebuild the child select field
            $select.append('<option data-i="" selected="selected" value="">- Select -</option>');
            var count = json.length;
            for (i=0; i<count; i++) {
              var $item = '<option value="'+json[i]['value']+'"'
              if ($selected == json[i]['value']) {
                $item += ' selected="selected"';
              }
              $item += '>'+json[i]['label']+'</option>';
              $select.append($item);
            }
          }
        }); // end ajax

      });

      // trigger the ready action to load the field
      // this is important for existing posts
      $('#acf-field_56e1cf2e7ad26').trigger('ready');
    
  });

  • Crud. Well it fixed the console error, but I don’t think the code is running. Knew it wasn’t going to be that easy.

  • It appears that just updating acf.ajax.extend to acf.Field.extend fixes the problem. Thanks for your quick response.

  • After upgrading to version ACF Pro 5.7 I am now getting JavaScript error when using the code example above.

    The error is:

    acf.ajax.extend is not a function

    I know there is now a new JavaScript API with version 5.7, but I have no idea of even where to start to figure out how to update the code to work.

    Any help would be greatly appreciated and thank you in advance.

Viewing 6 posts - 1 through 6 (of 6 total)