通过AJAX（smoothstate.js）加载页面时，联系表单7抛出'wpcf7.initForm不是函数'错误 [英] Contact Form 7 throws 'wpcf7.initForm is not a function' error when loading page through AJAX (smoothstate.js)

问题描述

我正在尝试使用smoothstate.js在我的wordpress网站上实现Contact Form 7。当直接加载使用它的页面时，联系表单可以正常工作。但是，如果通过AJAX加载页面，则会出现错误'wpcf7.initForm不是函数'。

I'm trying to implement Contact Form 7 on my wordpress website with smoothstate.js. The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX the error 'wpcf7.initForm is not a function' appears.

我不是AJAX的天才，但我的想法是在AJAX onAfter函数中重新初始化。我试过使用wpcf7InitForm（）;但仍然没有运气。

I'm not a genius with AJAX, but my thought was to Re-initialise in the AJAX onAfter function. I tried this by using wpcf7InitForm(); but still no luck.

非常感谢任何有关此主题的帮助！

Any help on this topic will be greatly appreciated!

这是我目前的AJAX代码：

Here is my current AJAX code:

  //SmoothState Page Transitions

  $(function(){
    'use strict';
    var $page = $('#main'),
        options = {
          debug: true,
          prefetch: true,
          onStart: {
            duration:  800, // Duration of our animation
            render: function ($container) {
              // Add your CSS animation reversing class

              $container.addClass('is-exiting');

              // Restart your animation
              smoothState.restartCSSAnimations();
            }
          },
          onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class
                    $container.addClass('is-loaded');

                    setTimeout(function(){
                      $container.addClass('unload');
                    }, 600);

                    setTimeout(function(){
                      $container.removeClass('is-loaded unload');
                    }, 900);


                    // Inject the new content
                    $container.html($newContent);
                }
            },
            onAfter: function($container) {
              $container.removeClass('is-exiting');
               $('div.wpcf7 > form').wpcf7InitForm();
               $(window).data('plugin_stellar').refresh();
            }
        },
        smoothState = $("#main").smoothState(options).data("smoothState");
      });

推荐答案

v4.8中的Contact Form 7发生了变化，摆脱了jquery.form.js，因此wpcf7InitForm（）函数不再起作用。但是，在v4.8.1中返回了一个新的init函数。

There was a change to Contact Form 7 in v4.8 that got rid of jquery.form.js so the wpcf7InitForm() function no longer works. However, a new init function was brought back in v4.8.1

wpcf7.initForm

请改用此函数：

function initContactForm() {
 $( 'div.wpcf7 > form' ).each( function() {
  var $form = $( this );
  wpcf7.initForm( $form );
  if ( wpcf7.cached ) {
   wpcf7.refill( $form );
  }
 });
}

在中调用onAfter 它应该可以解决你的问题。

Call it in onAfter and it should solve your problem.

以下是关于联系表格7支持论坛的讨论：
https://wordpress.org/support/topic/init-function-wpcf7initform/

Here's the discussion on the Contact Form 7 support forum: https://wordpress.org/support/topic/init-function-wpcf7initform/

这篇关于通过AJAX（smoothstate.js）加载页面时，联系表单7抛出'wpcf7.initForm不是函数'错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！