web-dev-qa-db-fra.com

gravité forme jQuery.load en modal

J'ai un formulaire de contact de formulaires gravity qui réside sur une page, mais ce que je veux, c'est un lien au site entier, qui ouvrira ce formulaire et l'affichera sous forme modale, à la volée.

Une façon de procéder consiste simplement à insérer le formulaire dans le balisage du côté du modèle, de sorte qu'il existe déjà sur chaque page. Mais cela signifie que de nombreux scripts de balisage et gf sont chargés, dont la plupart doivent être présents.

J'ai donc réuni quelques js qui saisissent le balisage de formulaire de la page et l'insèrent dans le DOM, chargent les scripts, puis affichent les résultats dans un modal d'amorçage Twitter.

La présentation des choses fonctionne comme prévu - mais aucune des logiques conditionnelles js, etc. Je sais que le js se charge car Im alimente le statut de chaque script dans console.log - et Im reçoit "200" et aucune erreur. Mais c'est comme si les scripts ne pouvaient pas voir le formulaire ou n'étaient pas instanciés correctement.

Pour tester la fin js, j'ai également essayé de charger les ressources manuellement dans la tête via:

<?php gravity_form_enqueue_scripts(1, true); ?>

Mais ça ne marche pas non plus.

Ci-dessous se trouve le js im utilisé, tout le monde a une idée de comment obtenir cela pour donner vie à la forme? Y a-t-il un rappel que je devrais utiliser?
Merci beaucoup d'avance - ben

jQuery(document).ready(function(){
// load contact form with ajax
jQuery(".contact_btn").click(function(){
    jQuery.ajaxSetup ({ cache:false });
    var ajax_load = "<img height='50px' width='50px' src='/assets/img/medloading.gif' class='tr_spinner' alt='loading...' style='align:center, top:50%' />";
    var loadUrl = "/contact-3/";
    // load the scripts dynamically
    jQuery.when(
        jQuery.getScript("/plugins/gravityforms/js/gravityforms.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}), // console logs to get confirmation that its loaded
        jQuery.getScript("/plugins/gravityforms/js/conditional_logic.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/datepicker.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.textareaCounter.plugin.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.maskedinput-1.3.min.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);})
    ).then(function(){
    // insert the content into the DOM
    jQuery("#contact-form .modal-body").html(ajax_load).load(loadUrl + " .entry-content");
    // load it in the modal
    jQuery("#contact-form").modal({ keyboard: false, show: true, backdrop: true });
    });
    // Hijack the <a> link
    return false;
});
});
jqueryajaxplugin-gravity-forms
1
orionrush

J'ai finalement reçu une réponse de l'équipe de développement qui a suggéré qu'un iframe était la meilleure approche:

On dirait que c'est un problème de timing. Votre formulaire est chargé dans le DOM après que le document a déjà été chargé. Ce sera donc un problème. Pour être honnête, avec toutes les complexités de JS dans Gravity Forms, je ne suis pas sûr que vous puissiez faire en sorte que cela fonctionne. J'envisagerais sérieusement d'utiliser un iframe à la place.

Au moment où il a fallu attendre cette réponse pour revenir, j'ai découvert qu'il manquait tous les éléments de script du contenu d'origine à la division que j'importais à l'aide de [.load()][1]. En effet, bien que ce ne soit pas explicitement documenté,.load() supprime tous les scripts en ligne. Ainsi, même si le balisage était présent, rien n’a été fait pour activer l’activation.

Une solution (qui fonctionne) consiste à empaqueter le contenu des scripts en-ligne en consultant le code source de la page, puis à le regrouper dans un fichier js que vous chargez via un appel [jQuery.getScripts()][3]. En plus de supprimer les éléments <script></script>, vous souhaiterez peut-être également modifier les chemins afin qu'ils soient trop relatifs pour limiter les problèmes de migration.

L'inconvénient (majeur) ici est qu'en empaquetant nous-mêmes ce script, il ne prend plus les paramètres de l'arrière-plan et risque de se rompre lorsque des modifications sont apportées au formulaire. Il a également cuit dans quelques cas de détection de navigateur.

En raison de ces limitations, et sans méthode pour générer dynamiquement ces scripts, un iframe est vraiment la voie à suivre. Cela dit, il serait sans doute possible de créer une classe personnalisée qui produirait les scripts - il faudrait en grande partie la refactoriser à partir du contenu de form_display.php car la plupart de ce qui est nécessaire est bloqué sous des fonctions privées. Je n'ai trouvé aucune preuve dans mes recherches de personnes ayant tenté de le faire jusqu'à présent.

1
orionrush