Wordpress + Gravity Forms Ajax + Swup JS

Posted 2023-02-19

【中文标题】Wordpress + Gravity Forms Ajax + Swup JS

【英文标题】：

【发布时间】：2020-06-17 21:46:38

【问题描述】：

我正在使用 swup.js 进行页面转换和通过 AJAX 更改内容。不幸的是，重力表单似乎不能很好地处理 AJAX 请求，并且我的表单在转换后无法正常工作。

我正在使用以下内容在页面加载时重新初始化我的脚本：

document.addEventListener('swup:pageView', (event) => 
// code 
)

我可以在 javascript 中重新初始化任何函数，以便重力表单在每个页面转换时重新初始化吗？在文档中找不到任何内容。

【参考方案1】：

最终使用 SwupFormsPlugin 和 Contact Form 7 与以下内容

document.addEventListener('DOMContentLoaded', function (event) 
  var domain = window.location.origin // HACK: makes link selector relative
  var isMobile = window.innerWidth < 800
  if (isMobile) 
   else 
    var swup = new Swup(
      plugins: [
        new SwupOverlayTheme(
          color: '#eff6fb',
          duration: 3000,
          direction: 'to-bottom',
        ),
        new SwupBodyClassPlugin(),
        new SwupFormsPlugin( formSelector: 'form.wpcf7-form' ),
        new SwupScrollPlugin(
          doScrollingRightAway: false,
          animateScroll: true,
          scrollFriction: 0.3,
          scrollAcceleration: 0.04,
        ),
      ],
      FORM_SELECTOR: 'form.wpcf7-form',
      LINK_SELECTOR: 'a[href*="'.concat(
        domain,
        '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
      ),
    )
    swup()
  
)
function domReady (callback) 
  document.readyState === 'interactive' || document.readyState === 'complete'
    ? callback()
    : document.addEventListener('DOMContentLoaded', callback)

export  domReady 

首页它可以帮助任何人

【参考方案2】：

我知道帖子的日期很远，但是这个问题突然出现在我面前，以防你找不到答案，

尝试使用此代码，这将观察任何适用于主体 DOM 的更改，并会触发您想要的任何内容：

<script>
    $(document).on('DOMSubtreeModified', 'body', function (el) 
        console.log('body content changed');
        // append you init code here
    );
</script>

告诉我这是否有效。

【讨论】：

问题主要在于如何触发 GF 初始化功能，而不是如何知道页面何时发生变化。在我的问题中，基本上我正在寻找可以在控制台中运行的行来初始化重力表单。