Wordpress + Ajax page loading + Gravity forms + Gravity forms page break

Question

I have this set up at the moment:

A WordPress site, I'm using something similar to http://barbajs.org/ So every page content is loaded through ajax to a <main></main> tag.

In one of the pages (contact page), I have a gravity form and is using a page break. The form is made into steps and each step is loaded inside the page. Everything is working if the first page that I load is that page (contact page), but as soon as I go to a different page and come back, or if I go to contact page from a previous page the form doesn't work anymore.

Any ideas on how to fix it. This is the code part:

Wordpress: WYSIWYG with shortcode

[gravityform id="2" title="false" description="false" ajax="true"]

On load, I have this: jQuery('#gform_wrapper_2').show() (This is the only thing that works), so I don't get a black page.

If I click on next step (it doesn't load next step) and I've tried this: This I found on the documentation or in the next button under onclick = "..."

jQuery(document).trigger('gform_post_conditional_logic', [2, null, true])
jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} )
jQuery(document).trigger('gform_post_render', [2, 1]) 
jQuery("#gform_target_page_number_2").val("2");  
jQuery("#gform_2").trigger("submit",[true]); 

I will need something like gform.init() ideally :D or something similar that lets me bind the form again.

Thanks a lot!

Answer 1

After digging a bit into gravity form plugin I was able to fix this.

So here is what I did.. hope it helps somebody in the future (not sure if the best solution but it works):

So the "main" idea is that barba or whatever you are using (in my case biggie) is making an ajax call for a new page and you will have something like a ready / newPageReady function, in here you make a new ajax call to get your form.

JS: (Given that gform uses jquery you can use it)

 ready(done) {

   ajax.get(APP.AJAX_URL + '?action=get_form', {

      success: (object) => {

      //console.log(object.data)

      jQuery('.main-content-wrapper').append(object.data)
      jQuery('body #gform_wrapper_2').show()

    }
  })
}


addEvents() {

  // this will check everytime a form is loaded 

   jQuery(document).bind('gform_page_loaded', this.gform)

}


gform(event, form_id, current_page) {

   //Here the form is loaded but not showed.. you can do something like this

    TweenMax.fromTo('.gform_wrapper', 1.2, {autoAlpha: 0}, {autoAlpha:1})
}

Functions.php

 add_action( 'wp_ajax_nopriv_get_form', 'get_form' );
 add_action( 'wp_ajax_get_form', 'get_form' );

 function get_form() {

     gravity_form( id_of_your_form,false, false, false, false, true );

    die();
}

Answer 2

Not sure if it's the right solution but I managed to do something like gform.init() by calling script tags under the form with an eval(). Theses scripts are inserted after each form by the plugin.

For example, after you change your page with ajax, do something like this :

// After changing page with ajax :

var scripts = myNewForm.querySelectorAll('script'); // where "myNewForm" is the container including the new form added after an ajax call  

for (var i = 0; i < scripts.length; i++) { // "For" loop in case there is more than one script added by the plugin

    eval(scripts[i].innerHTML); // --> this will init the new form
}

Be sure to call this only after an ajax call.