Download Wordpress + Ajax Page + Gravity Forms + Gravity Form Page Break

Question

I have this setting at the moment:

WordPress site, I use something similar to http://barbajs.org/ Therefore, each page content is loaded via ajax into the <main></main> .

On one of the pages (contact page) I have a gravitational form and a page break is used. The form is formed in stages and each step is loaded inside the page. Everything works if the first page that I load is the page (contact page), but as soon as I go to another page and return, or if I go to the contact page from the previous page, the form no longer works.

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

Wordpress: WYSIWYG Short Code

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

In boot mode, I have the following: jQuery('#gform_wrapper_2').show() (This is the only thing that works), so I am not getting a black page.

If I click on the next step (it does not load the next step), and I tried this: I found this in the documentation or in the next button in 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 need something like gform.init() ideally: D or something similar, which allows me to bind the form again.

Thanks a lot!

Answer 1

After I dug a bit into the gravity form plugin, I was able to fix it.

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

So, the main idea is that barba or something that you use (in my case biggie) makes an ajax call for a new page and you will have something like the ready / newPageReady function, here you create a new ajax 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 this is the right solution, but I managed to do something like gform.init() by invoking script tags in the form using eval() . Script abstracts are inserted after each form by the plugin.

For example, after changing your page using ajax, do the following:

 // 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 the ajax call.