重力将jQuery.load转化为模态

Question

我有一个重力形式的联系形式，驻留在一个页面上，但我想要的是一个网站范围的链接，将打开该形式，并显示在一个模式，在飞行。

要做到这一点，一种方法是将表单插入模板端的标记中，以便它已经存在于每个页面上。但这意味着有大量的标记和gf脚本正在加载，而大多数情况下这些脚本并不需要加载。

因此，我把一些js放在一起，从页面抓取表单标记并将其插入DOM中，加载脚本，然后在twitter引导模式中显示结果。

表示方面的工作与预期相同，但js、条件逻辑等没有一个得到应用。我知道当我把每个脚本的状态输入到console.log中时，js正在加载-而且我得到了"200“并且没有错误。但这就像脚本看不到表单，或者没有被正确实例化一样。

为了测试js端，我还尝试通过以下方法手动将资源加载到头中：

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

但这也行不通。

下面是我正在使用的js，有谁有任何想法，如何让这个激发生命的形式？我应该用的是回调吗？

事先非常感谢-本

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

Answer 1

我最终得到了开发团队的回应，他们认为iframe是最好的方法：

看上去这是个时间问题。在文档已经加载之后，您的表单将被加载到DOM中，因此这将是一个问题。老实说，考虑到重力形式中的所有JS复杂性，我不确定您是否能够让它工作起来。我会认真考虑使用iframe代替。

在返回此响应所需的时间中，我发现我使用[.load()][1]导入的div丢失了原始内容中的所有脚本元素。这是因为，虽然没有明确的记录， .load()删除了任何内联脚本，所以当标记存在时，没有发生任何激活好的事情。

一种解决方案(有效)是通过查看页面源将内联脚本中的内容打包，并将其打包到js文件中，然后通过[jQuery.getScripts()][3]调用加载该文件。除了去掉<script></script>元素之外，您还可能希望修改任何路径，以便它们相对于减轻迁移问题。

这里的(主要)缺点是，通过自己打包这个脚本，它不再从后端获取参数，并且在对表单进行更改时很可能会中断。它还引入了几个浏览器检测实例。

由于这些限制，并且没有一个动态生成这些脚本的方法，iframe实际上是可行的。尽管如此，毫无疑问，创建一个输出脚本的自定义类是可能的--它很大程度上需要从form_display.php的内容中重构，因为所需的大部分内容都被锁在私有函数下。到目前为止，我还没有找到任何证据来搜查任何试图这样做的人。