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

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.