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