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