Wordpress + Ajax page loading + Gravity forms + Gravity forms page break
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();}
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.