Wordpress + Ajax 页面加载 + 重力形式 + 重力形式分页符

Question

我现在已经设置好了：

一个 WordPress 网站，我使用的是类似于 http://barbajs.org/ 所以每个页面内容都通过 ajax 加载到 <main></main> 标签。

在其中一个页面（联系页面）中，我有一个重力表单并且正在使用分页符。表单被分成多个步骤，每个步骤都加载到页面中。如果我加载的第一页是那个页面（联系页面），一切正常，但是一旦我转到另一个页面并返回，或者如果我从上一页转到联系页面，表单就不再工作了.

关于如何修复它的任何想法。这是代码部分：

WordPress：所见即所得的简码

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

加载时，我有这个： jQuery('#gform_wrapper_2').show()（这是唯一有效的方法），所以我没有得到黑页。

如果我点击下一步（它不会加载下一步）并且我试过这个：这是我在文档中或 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]);

理想情况下我需要 gform.init() :D 或类似的东西让我再次绑定表单。

非常感谢！

Answer 1

在深入研究 gravity form 插件后，我解决了这个问题。

所以这就是我所做的..希望它能帮助将来的人（不确定是否是最好的解决方案但它有效）：

所以 "main" 的想法是 barba 或您正在使用的任何东西（在我的例子中是 biggie）正在为新页面发出 ajax 调用，您将拥有类似 ready / newPageReady 的内容函数，在这里您可以进行新的 ajax 调用以获取您的表单。

JS：（鉴于gform使用jquery你可以使用它）

 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

不确定这是否是正确的解决方案，但我设法通过调用带有 eval() 的表单下的脚本标记来完成类似 gform.init() 的操作。这些脚本由插件插入到每个表单之后。

例如，在使用 ajax 更改页面后，执行如下操作：

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

确保仅在 ajax 调用后调用此方法。

Wordpress + Ajax 页面加载 + 重力形式 + 重力形式分页符

Wordpress + Ajax page loading + Gravity forms + Gravity forms page break

ajax

wordpress

gravity-forms-plugin

gravity

gravityforms