ACF acf_form on admin page works, but when it is loaded in via ajax it breaks - advanced-custom-fields

Question

I'm using acf_form() to embed a form in a metabox on the admin page using this code (simplified):
$submitted_user_id = 'user_3';
$form_settings = array(
'fields' => ['field_625008b509dca'],
'form_attributes' => array(
'method' => 'POST',
'action' => admin_url("admin-post.php"),
),
'post_id' => $submitted_user_id,
);
acf_form( $form_settings );
..and calling the requisite acf_form_head() in admin_init as such:
function append_acf_form_head() {
acf_form_head();
}
add_action( 'admin_init', 'append_acf_form_head', 1 );
This works fine, and updates the values on submit. However I want to pull this form in via ajax, in order to pass the user_id from a select filter above.
The ajax is also working perfectly, and pulling in the form with the passed user_id, however on submission the form does not save the data, and redirects to 'wp-admin/admin-post.php'.
This is the php code for the ajax functionality in functions.php:
add_action( 'wp_ajax_test_action', 'test_action' );
function test_action() {
// Same acf_form() function as above
wp_die()
}
And finally the JS:
$('button#support-ticket-user-filter').on('click', function(e) {
e.preventDefault();
var data = {
'action': 'test_action',
'user_id': $('select#get_user_id').val()
};
$.post(ajaxurl, data, function(response) {
$('#listings-result').append( response );
});
});
Any ideas why it would work perfectly in the first case, but not in the second? Perhaps it's related to the ajaxurl?
Many thanks!

Answer 1

For anyone looking for the solution; I've found a slightly hacky approach which does the trick for now. The ACF Support team mentioned this wasn't out the box functionality but has now been included as a feature request. For those trying to achieve this the trick is to permanently embed a 'dummy form' which loads the necessary stuff to make it all work - then kind of hook this into the form pulled in via ajax:
So, in the meta box a permanent dummy form is embedded:
// This dummy form is required to load all the acf stuff for the ajax version
$dummy_form_settings = array(
// Do not declare any fields
'post_id' => $submitted_user_id, // Make sure the ID corresponds ( for users in my case )
'form' => true,
);
acf_form( $dummy_form_settings );
All we want from this dummy form is the 'update' button - which is the one that actually works, as opposed to the one in the form pulled in via ajax. So that function will remove the submit button like this:
$form_settings = array(
'fields' => ['field_625008b509dca'],
'form_attributes' => array(
'method' => 'POST',
),
'html_before_fields' => sprintf(
'<input type="hidden" name="user_id" value="' . $submitted_user_id . '">',
),
'post_id' => $submitted_user_id,
'form' => true,
'html_submit_button' => '', // The important bit
);
acf_form( $form_settings );
wp_die();
Now your essentially left with a single form that submits properly.