WordPress + Ajax Seitenladen + Gravity Forms + Gravity Forms Seitenumbruch

Ich habe im Moment folgendes Setup:

Eine WordPress-Site, ich verwende etwas Ähnliches http://barbajs.org/
So wird jeder Seiteninhalt über Ajax in a geladen <main></main> Schild.

Auf einer der Seiten (Kontaktseite) habe ich ein Schwerkraftformular und verwende einen Seitenumbruch. Das Formular besteht aus Schritten und jeder Schritt wird innerhalb der Seite geladen. Alles funktioniert, wenn die erste Seite, die ich lade, diese Seite (Kontaktseite) ist, aber sobald ich zu einer anderen Seite gehe und zurückkomme, oder wenn ich von einer vorherigen Seite zur Kontaktseite gehe, funktioniert das Formular nicht mehr .

Irgendwelche Ideen, wie man es beheben kann. Dies ist der Codeteil:

WordPress: WYSIWYG mit Shortcode

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

Beim Laden habe ich das:
jQuery('#gform_wrapper_2').show() (Dies ist das einzige, was funktioniert), also bekomme ich keine schwarze Seite.

Wenn ich auf den nächsten Schritt klicke (der nächste Schritt wird nicht geladen) und ich habe dies versucht: Dies habe ich in der Dokumentation oder in der Schaltfläche “Weiter” unter gefunden 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]); 

Ich brauche so etwas wie gform.init() Idealerweise 😀 oder etwas Ähnliches, mit dem ich das Formular erneut binden kann.

Danke vielmals!

Nachdem ich mich ein wenig mit dem Gravity-Form-Plugin befasst hatte, konnte ich dies beheben.

Also hier ist, was ich getan habe … hoffe, es hilft jemandem in der Zukunft (nicht sicher, ob die beste Lösung, aber es funktioniert):

Die “Hauptidee” ist also, dass Barba oder was auch immer Sie verwenden (in meinem Fall Biggie) einen Ajax-Aufruf für eine neue Seite tätigt und Sie so etwas wie eine ready / newPageReady-Funktion haben, in der Sie hier einen neuen Ajax-Aufruf tätigen Holen Sie sich Ihr Formular.

JS: (Da gform jquery verwendet, können Sie es verwenden)

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

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

Ich bin mir nicht sicher, ob es die richtige Lösung ist, aber ich habe es geschafft, so etwas zu tun gform.init() indem Sie script-Tags unter dem Formular mit einem aufrufen eval(). Diese Skripte werden vom Plugin nach jedem Formular eingefügt.

Nachdem Sie beispielsweise Ihre Seite mit Ajax geändert haben, gehen Sie so vor:

// 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
}

Achten Sie darauf, dies nur nach einem Ajax-Aufruf aufzurufen.