Reply To: acf_form() and single page app

• Rasso

• October 30, 2017 at 10:31 am

After digging deep in acf-input.js, I think now I found the real solution for the javascript part:

// call this function on document ready or when your ajax page is loaded
function renderPage() {
  // initialize the acf script
  acf.do_action('ready', $('body'));

  // will be used to check if a form submit is for validation or for saving
  let isValidating = false;

  acf.add_action('validation_begin', () => {
    isValidating = true;
  });

  acf.add_action('submit', ($form) => {
    isValidating = false;
  });

  $('.acf-form').on('submit', (e) => {
    let $form = $(e.target);
    e.preventDefault();
    // if we are not validating, save the form data with our custom code.
    if( !isValidating ) {
      // lock the form
      acf.validation.toggle( $form, 'lock' );
      $.ajax({
        url: window.location.href,
        method: 'post',
        data: $form.serialize(),
        success: () => {
          // unlock the form
          acf.validation.toggle( $form, 'unlock' );
        }
      });
    }
  });
}