Initialize JS with an ajax loaded ACF form

probably it’s a bit too late, but it might either help you or others:

I just had a similar problem and while looking for the solution I found your question. By now I found a solution for me and it might help you as well.

Similar setup to yours, acf_form was loaded, but the location field did not load (only the container). The file acf-input.min.js was initialized on page load, so before the Ajax call completed.

I was struggling to understand where, and on which element to place

  acf.do_action('append', $('#popup-id'));

I ended up using the do_action on the class of the form tag as so:

  acf.do_action('append', $('.acf-form'));

This is the snippet of code I’m using:

jQuery(function($){
// Add HTML for custom spinner
var spinner = spinner_html();

$.ajax({
    url : vmm_multistep_listing.ajaxurl,
    beforeSend : function(){
        // Add Spinner before response received
        $('#multistep-listing').html(spinner);                  
    },
    type : 'post',
    data : {
        action : 'multistep_check', // PHP function to call
        nonce_ajax : vmm_multistep_listing.ajax_nonce // Nonce Validation
    },
    success : function(multistepForm) {
        console.log(multistepForm);
        // Output Response (ACF Form)
        $('#multistep-listing').html(multistepForm);
        // This did the trick
        acf.do_action('append', $('.acf-form'));

    }
});

});

I’m also using acf_enqueue_uploader(); in the main php file just above get_footer();

Let me know if anything is unclear.

Leave a Comment