Ajax the ACF way

• Daniel

• August 25, 2016 at 5:29 am

I am trying to figure out how acf handles the ajax requests. I have done some digging through the code, but I keep getting a 0. I am trying to add some ajax calls to my custom field in the admin.

Here’s what I have:

A custom field called my_custom_field

In the my_custom_field construct I have:

add_action('wp_ajax_acf/fields/my_custom_field/my_custom_field_function',			array($this, '<strong>my_custom_field_function</strong>'));
		add_action('wp_ajax_non_priv_acf/fields/my_custom_field/my_custom_field_function',			array($this, 'my_custom_field_function'));

This is based on code found on other fields.

Then in the same file I have the php function

function my_custom_field_function(){
 return 'something';
}

My js has the ajax call which also follows the same pattern as other ajax calls I found through the code:

$.ajax({
			url: acf.get('ajaxurl'),
			data: acf.prepare_for_ajax({
				'action':	'acf/fields/my_custom_field/my_custom_field_function',
			}),
			type: 'post',
			dataType: 'html',
			success: function(html){
				alert(html);
			}
		});

I am supposed to get “something” back, but I am getting a 0, which tells me it’s not finding the my_custom_field_function. Something tells me the problem is with the action tag.

• John Huebner

• August 25, 2016 at 5:48 am

You can only use ACF’s ajax functions if you extend ACF’s JS. And you can only get something back if you build the PHP actions that return what you want. I have some examples of doing this here https://github.com/Hube2/acf-dynamic-ajax-select-example. If you want to do ajax without extending ACF’s code then you’ll need to go with just jQuery and ignore the acf functions, but you’ll still need to build the admin actions to get something back. I would suggest starting here https://codex.wordpress.org/AJAX_in_Plugins

• Daniel

• August 25, 2016 at 6:09 am

I see, I thought that the input.js file, that comes with the custom field template, already had that access because of the other acf functions that are used inside that template.

• Daniel

• August 25, 2016 at 6:51 am

I went the WP way , but I had to place the add_action(‘ajax_… hooks outside the main custom field class. I guess once the field loads, it’s too late to add the ajax action.

• John Huebner

• August 25, 2016 at 7:44 am

The reason for extending the acf.ajax property is in order to be able to access other properties of acf.ajax more easily. I’m sure they can be accessed directly, but I it’s just easier to do it the other way by following the code in ACF as an example.

I don’t know when you were trying to add your actions, but ajax actions fire immediately after the admin_init hook, so as long as you add them before this hook fires you should be good.

• Daniel

• August 25, 2016 at 7:51 am

I was adding the hook inside the custom field class __construct:

class acf_field_my_custom_field extends acf_field {

//ajax hooks here

}

That’s in the acf-my_custom_field-v5 file.

I couldn’t get it to work there, so I added out side the class in the main plugin file, and it worked. However that creates another problem… I don’t have access to the data inside the class my_custom_field.

• John Huebner

• August 25, 2016 at 8:16 am

I was curious so I did some testing. Your custom field type files should be loaded before they ajax actions fire, so there isn’t any reason that your ajax functions should not be running if they are added in the class __construct function.

What did the add_action() call look like that was not working?

• Daniel

• August 26, 2016 at 12:46 am

I found my error. I was using the wp_ajax_acf hook. I should have been using the wp_ajax one.