Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ACF AJAX for Mike
add_action('admin_head', function(){
<script type="text/javascript">
updated JS file for use with ACF >= 5.7.0
if (typeof acf == 'undefined') { return; }
In ACF >= 5.7.0 the acf.ajax object no longer exists so we can't extend it
Instead we need to attach out event the old fashioned way
and we need to do it using $(document).on because the element may
be added dynamically and this is the only way to add events
$(document).on('change', '[data-key="field_5bd3ff1349aef"] .acf-input select', function(e) {
// we are not going to do anyting in this anonymous function
// the reason is explained below
// call function, we need to pass the event and jQuery object
update_cities_on_state_change(e, $);
$('[data-key="field_5bd3ff1349aef"] .acf-input select').trigger('ready');
acf.add_filter('select2_ajax_data', function( data, args, $input, field, instance ){
if (data.field_key === "field_5bd3ff1349aef"){
data.post_type = $('[data-key="field_5bd3ff1349aef"] .acf-input select').val();
// return
return data;
// the actual function is separate from the above change function
// the reason for this is that "this" has no real meaning in an anonymous
// function as each call is a new JS object and we need "this" in order
// to be to abort previous AJAX requests
function update_cities_on_state_change(e, $) {
if (this.request) {
// if a recent request has been made abort it
// get the city select field, and remove all exisiting choices
var city_select = $('[data-key="field_5bd40594386d9"] select');
// get the target of the event and then get the value of that field
var target = $(;
var state = target.val();
if (!state) {
// no state selected
// don't need to do anything else
// set and prepare data for ajax
var data = {
action: 'load_all_posts',
state: state
// call the acf function that will fill in other values
// like post_id and the acf nonce
data = acf.prepareForAjax(data);
// make ajax request
// instead of going through the acf.ajax object to make requests like in <5.7
// we need to do a lot of the work ourselves, but other than the method that's called
// this has not changed much
this.request = $.ajax({
url: acf.get('ajaxurl'), // acf stored value
data: data,
type: 'post',
dataType: 'json',
success: function(json) {
if (!json) {
// add the new options to the city field
for(i=0; i<json.length; i++) {
var city_item = '<option value="'+json[i]['value']+'">'+json[i]['label']+'</option>';
add_action('wp_ajax_load_all_posts', function(){
echo json_encode([
['value' => 'my_stuff', 'label' => 'other-stff'],
['value' => 'second_value', 'label' => 'Another label'],
['value' => 'POST_ID', 'label' => 'My Post Title'],
add_filter('acf/fields/post_object/query/key=field_5bd3ff1349aef', function($args){
$args['post_type'] = empty($_REQUEST['post_type']) ? 'page' : $_REQUEST['post_type'];
return $args;
},10, 1 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment