Initializing AJAX-loaded forms

• DACrosby, LLC

• August 8, 2014 at 9:06 am

I’m using he Advanced Custom Fields Pro WordPress plugin to create some post/page editing capabilities on the frontend of my website. I’m displaying blank forms by default and the user can select an existing post to edit which replaces the blank form with a pre-filled form.

In the edit form, Post Object and Relationship fields, and conditional logic are not being correctly “fixed up” with JS – the values are in the form correctly, but for example conditional logic rules don’t apply (only show textA if checkA is checked.. by default checkA is unchecked so textA should be hidden, but is visible here). This all works correctly on non-ajax-loaded forms.

Here’s my existing jQuery/ajax (ajax_for_cms.js):

var data = {
    'post_id'       : id,
    'post_type'     : type,
    'post_subtype'  : subtype,
    'form_id'       : formID,
    'action'        : 'get_form'
};

$.ajax({
    type : "post",
    dataType : "html",
    url : myAjax.ajaxurl,
    data : data,
    success: function(response) {
        $( theFormArea ).html( response );

        // This line is the likely problem.
        $(document).trigger('acf/setup_fields', $(formID) );
    },
    error: function(xhr, ajaxOptions, thrownError) {
        $( theFormArea ).html( "Sorry, something went wrong! Please let us know what happened." );
    }
})

The form is loaded onto the page properly with the correct formID in the rendered HTML, but Post Objects are blank (the correct input value is in the HTML, but it appears blank to the user), things that should be shown/hidden due to conditional logic options are not (everything is shown), and relationship lists don’t populate options.

There are no JS errors in the log. Forms loaded with the page originally (not through ajax) load as expected, and changing options on the affected fields causes them to right themselves (for example, checking and unchecking a checkbox causes the correct fields to show/hide) – the ajax-loaded forms just don’t start out correctly. I have disabled all other plugins and have the same issue.
In another forum post here, I saw that the line $(document).trigger('acf/setup_fields', $(formID) ); is intended to run all initializing JS on the form, but for me it doesn’t appear to be doing anything.

I’m using ACF Pro v5.0.0, WordPress v3.8.3, and no additional plugins.

Any idea why acf/setup_fields isn’t triggering, or if there’s something else I need to do?

Additional Code

Here’s the get_form action that’s called via ajax, and the WordPress specific actions to make the ajax work (this all works correctly) –

add_action( 'wp_head', 'ajax_scripts' );
function ajax_scripts() {
    wp_enqueue_script('cmsAJAX', get_template_directory_uri(). '/js/ajax_for_cms.js', array('jquery','jquery-ui-button'));
    wp_localize_script( 'cmsAJAX', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
add_action("wp_ajax_get_form", "get_form");

function get_form() {
    $id = $_POST['post_id'];
    $type = $_POST['post_type'];
    $subtype = $_POST['post_subtype'];
    $form_id = $_POST['form_id'];

    acf_form( getFormAttrs($type, $id, $subtype, $form_id) );

    // I tried the JS trigger here as well with the same, non-working results
    ?>
    <script>
        (function($) {
            $(document).trigger('acf/setup_fields', $("<?php echo "#".$form_id; ?>") );
        })(jQuery);
    </script>
    <?php

    die();
}

• John Huebner

• June 8, 2019 at 1:30 am

Was there ever a solution for this, there has been another inquiry about it here https://support.advancedcustomfields.com/forums/topic/5-7-ajax-validation-broken-on-acf_form-front-end/

• John Huebner

• June 8, 2019 at 1:31 am

You could try the solution from E here https://support.advancedcustomfields.com/forums/topic/using-acf-form-in-ajax-call/