Initialize JS with an ajax loaded ACF form

Question

I'm using acf_form to edit my WP posts with ajax. I've got it setup and working correctly in that I can edit the post and submit the new data without page refresh. I can then also load the new content without page refresh on success of this.

However, any JS in the acf form is not working once it's reloaded. How can I get this working, here is what I have so far

(function($) {

//// This saves without reloading the page

var pathtopage = window.location.pathname;
acf.do_action('ready', $('body'));
$("#content").on("submit", "#myform", function(e) {
    e.preventDefault();
});
acf.add_action('submit', function($form) {
    $.ajax({
        url: window.location.href,
        method: 'post',
        data: $form.serialize(),
        success: function(data) {

 //// Attempting to reinitialise the JS in the form

            $(document).trigger('acf/setup_fields',  $('#myform'));
            acf.validation.toggle($form, 'unlock');

 //// reload the content and the edit form ready to go again

            $('#content').load(pathtopage + ' #content');
        }
    });
});
})(jQuery);

In the documentation it states "place the following inline JS in the appended HTML, or run the JS on complete of your AJAX append. This will allow ACF to initialize the fields within the newly added HTML."

<script type="text/javascript">
(function($) {

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

})(jQuery); 
</script>  

But, I can't figure out how to include this within my setup because I'm not using a popup I;m just reloading the form. Any help greatly appreciated.

Answer 1

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.

Answer 2

getting following error when use acf.do_action('append', $('.acf-form'));

Uncaught TypeError: $ is not a function