Reply To: How can I send an additional field during ajax requests?

• radgh

• February 11, 2017 at 11:31 am

@ayama I’ve received a response from Elliot and, although I’m still waiting for some final clarification, I’ve got this to work again.

Here is the result:

https://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-868470985522/ShareX/LimelightDept/2017/02/2017-02-10_16-27-24.mp4

Here is how to implement this code:

1. Have a repeater field with two dropdowns (other fields could work but need alteration).

2. CHANGE: field_589ccdb199add— This is the dropdown’s field key that needs to have the custom data added to the ajax request. It is the one dependent on a different field.

3. CHANGE: td.acf-field-589cc27c617ab — The TD containing the field which value needs to go to the second field’s ajax request.

Here is the code:

// THIS BLOCK MUST COME BEFORE DOCUMENT READY, AFTER ACF JS HAS LOADED.
if ( typeof acf != 'undefined' ) {
	// Send ProductID with variation ajax request calls
	lbd_send_product_id_with_variation_ajax_query();
}
	
function lbd_send_product_id_with_variation_ajax_query() {
	var fn_originalAjaxData = false;

	var fn_ajaxDataWithProductID = function( e, i ) {
		// Call the original args.ajax.data() function, which was stored in the element
		var data = fn_originalAjaxData(e,i);

		// Add the Product ID to the data
		data.product_id = jQuery(this).closest('.acf-row').find('td.acf-field-589cc27c617ab select').val();

		return data;
	};

	// Whenever a select2 is initialized, inject our own custom ajax.data() function.
	acf.add_filter( 'select2_args', function( args, $select, settings ) {
		// Only apply to the "Variation" dropdowns
		var select_is_variation = $select.attr('id').indexOf('field_589ccdb199add') >= 0;
		if ( ! select_is_variation ) return args;

		// Store the original ajax.data function for later
		if ( fn_originalAjaxData === false ) {
			fn_originalAjaxData = args.ajax.data;
		}

		// Overwrite the ajax.data function with one that will get the Product ID.
		args.ajax.data = fn_ajaxDataWithProductID;

		return args;
	} );
}

EDIT:

Elliot has responded yet again and explained that there is a filter to modify the ajax data. The filter is undocumented. I wasn’t able to find it in the source code, but it does work. It must be added programmatically. The filter can be used as such:

acf.add_filter( 'select2_ajax_data', function( data, settings, query ) {
    // note: I don't know what "settings" and "query" are actually called

    // "this" is the window object, not the field. I don't know how to get the field!

    data.my_new_field = 1;
    return data;
});

I’m not sure how to get the field that is being triggered. “this” is the window. No reference to the field is passed in any of the parameters. So unfortunately, this filter seems useless for my original purpose. I asked Elliot if there is a way. But I think the hack from the beginning of this comment is still the best way.