JS event listener for sub fields

• steve-indzine

• August 8, 2023 at 12:46 pm

Hi there,
I have a group of fields, one of the sub-fields is a Select which is populated from an API. I then have 4 other sub-fields that I want to populate based on the value in the Select, this will be via an admin-ajax call. I should be able to do this using the JavaScript API but I am struggling to get acf.getField to use the sub-field. The documention doesn’t talk about sub-fields at all so I am wondering if I am missing something here? Any pointers? Clues?

This is what I have:

(function($) {
	// make sure acf is loaded, it should be, but just in case
	if (typeof acf == 'undefined') { 
		return; 
	}
	
	var acf_field = acf.getField('field_64d20c8aa2224');
	
	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: 'newbury_admin_get_raceday_details',
            racedayId: 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 ){
            console.log( json );
          }
        }); // end ajax
		
	});

	$('#acf-field_64d20c27a2223-field_64d20c8aa2224').trigger('ready');
	
})(jQuery);	

• John Huebner

• August 9, 2023 at 2:28 pm

I have played with the ACF JS API and I’ve never been able to get it to work with sub fields when I need to detect a field changing or update sibling fields.

Instead I have always had to add a change action by targeting the field using jquery and using doing it on my own

// example event on change of sub field
// this needs to be on on the document level because rows and be added
// field_XXXXXX == sub field key to create action for
$(document).on('change', '[data-key="field_XXXXXX"] .acf-input select', function(e) {
  // get the target of the change
  target = $(e.target);
  // get the row of the repeater
  row = target.closest('.acf-row');
  // get another field in the row
  other_field = row.find('[data-key="field_YYYYY"] input');
  // update value
  other_field.val('new value');
  // trigger change so that ACF knows it has been changed
  other_field.trigger('change');
});

• steve-indzine

• August 10, 2023 at 5:20 am

Hi @hube2,
That is very close to what I ended up using. The main difference is I didn’t have to target the row as it’s a group not a repeater. I also didn’t use the trigger for field that was changed, but I will add that.

This is what I used:

$(document).on('change', '[data-key="field_64d372692bcc4"] .acf-input select', function() {
	var field = acf.getField('field_64d372692bcc4');
	var racedayId = field.val();
		
        var data  =  { 
            action: 'newbury_admin_get_raceday_details',
            racedayId: racedayId,
        }
		
	$.ajax({
          url:    acf.get('ajaxurl'), 
          data:    acf.prepareForAjax(data), 
          type:    'post',
          dataType:  'json',
          success: function( json ){
			
		var result = json;
		if(result[0].date) {
			var date = result[0].date, dateSplit = date.split('-');
			$('[data-key="field_64d224149988e"] .acf-input input[type=hidden]').val(dateSplit[2]+dateSplit[1]+dateSplit[0]);
			$('[data-key="field_64d224149988e"] .acf-input input[type=text]').val(dateSplit[0]+'/'+dateSplit[1]+'/'+dateSplit[2]);
			$('[data-key="field_64d2245f9988f"] .acf-input input[type=text]').val(result[0].Racetype);
			$('[data-key="field_64d2249899890"] .acf-input input[type=url]').val(result[0].url);
			$('[data-key="field_64d224b499891"] .acf-input input[type=text]').val(result[0].name);
		}		
          }
     });
});