acf_form() and single page app

• Rasso

• October 30, 2017 at 7:50 am

Hi there, I am building a SPA (single page app), that means, I am loading all of my pages via AJAX. On one of those pages, I want to use acf_form() to display a frontend form. Now my problem is, that I don’t know how to re-initiate the ajax functionality on this form, since it is not always the first page that gets loaded. Ideas, anyone?

• Rasso

• October 30, 2017 at 8:11 am

***
THIS IS NOT THE SOLUTION, BUT I CAN’T CHANGE THIS SETTING ANYMORE. PLEASE SCROLL DOWN TO MY LAST COMMENT TO SEE THE REAL SOLUTION.
***

I think I got it: instead of the function acf_form_head(), I placed this code on every template’s beginning:

// prevents the default ACF styles and scripts from being enqueued
acf()->input->enqueued = true;
// checks for a form submit
acf()->form_front->check_submit_form(); 

Then I used jQuery to do the form submit myself (warning, using ES2015):

$('form').each((i, el) => {
  let $form = $(el);
  let action = $form.attr('action');
  let method = $form.attr('method');
  if( !action || typeof action === 'undefined' ) {
    action = window.location.href;
  }
  if( !method || typeof method === 'undefined' ) {
    method = 'get';
  }
  $form.submit((e) => {
    e.preventDefault();
    $('html').addClass('is-loading');
    $.ajax({
      url: action,
      method: method,
      data: $form.serialize()
    }).then((response) => {
      $('html').removeClass('is-loading');
      console.log( 'message sent!' );
    });
  });
});

• Rasso

• October 30, 2017 at 8:34 am

Even better (and more future-proof), using the built-in acf functionality: In your functions.php:

// I don't want the default ACF styles
add_action('wp_enqueue_scripts', function() {
  wp_deregister_style('acf-global');
  wp_deregister_style('acf-input');
  wp_deregister_style('acf-field-group');
});

In your Templates:

// we are using the standard function here
acf_form_head();

…and in your ajax javascript render function:

// again, standard functionality :)
acf.do_action('ready', $('body'));

• 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' );
        }
      });
    }
  });
}