在 AJAX 网站上使用动态注入的 Ninja Forms

Question

我正在构建一个 Wordpress 网站，并使用 AJAX 在用户导航时加载后续页面，以便页面过渡动画效果很好。

默认情况下，如果您加载并注入带有嵌入式 Ninja 表单的页面，表单将不会显示。关于如何实现这一点的信息很少。我希望有一个开箱即用的官方方式来让这个工作，但似乎没有。

当使用 AJAX 动态加载表单时，需要采取哪些步骤才能使表单显示在页面上？

Answer 1

我试验了一些完全未记录的代码示例，并设法解决了问题，并进行了一些必要的调整和添加。我想我会在这里分享，以防其他人对此有困难。

第一步，入队必要的JS和CSS

将以下内容添加到您的 functions.php，因为 Ninja Forms 依赖于 backbone js，并且需要 css，如果您的初始着陆页尚未加载，则不会加载上面有表格。

add_action('wp_enqueue_scripts', function () {
  // enqueue ninja forms css, including for any ninja forms addons
  wp_enqueue_style('nf-display', content_url('/plugins/ninja-forms/assets/css/display-structure.css'), ['dashicons'], core_dev_version(''));
  wp_enqueue_style('nf-layout-front-end', content_url('/plugins/ninja-forms-style/layouts/assets/css/display-structure.css'), ['nf-display'], core_dev_version(''));

  // make sure that backbone is enqueued on the page, as ninja forms relies on this
  wp_enqueue_script('backbone');
}, 100);

.

步骤2.添加一个AJAX函数，returns表单数据

您不需要编辑它，只需将它添加到您的 functions.php。我们在第 3 步中使用的 javascript 将进行自己的 AJAX 调用，以非常特定的格式请求一些表单数据。

add_action('init', function () {
  // if this is not an AJAX form request, return
  if (! isset($_REQUEST[ 'async_form' ])) {
    return;
  }

  // clear default loaded scripts.
  global $wp_scripts;
  unset($wp_scripts->registered);

  // get the requested form id
  $form_id = absint($_REQUEST['async_form']);

  // retrieve the requested form
  ob_start();
  $form = do_shortcode("[ninja_forms id='{$form_id}']");
  ob_get_clean();

  // output the requested form on the page
  ob_start();
  NF_Display_Render::output_templates();
  $templates = ob_get_clean();
  $response = [
    'form' => $form,
    'scripts' => $wp_scripts->registered,
    'templates' => $templates
  ];
  echo json_encode($response);

  // die, because we don't want anything else to be returned
  die();
});

.

第 3 步。将 JS 辅助函数添加到您的着陆页

这只是将一些有用的 JS 代码添加到您的站点中。您可以按原样将其添加到 functions.php，或将其包含在单独的 JS 文件中。这就是我们将用来加载和初始化我们想要的表单的内容。

add_action('wp_footer', function () {
  // adds a script to the footer
  ?>
  <script type="text/javascript">

  var NinjaFormsAsyncForm = function(formID, targetContainer) {

    this.formID = formID;
    this.targetContainer = targetContainer;

    this.formHTML;
    this.formTemplates;
    this.formScripts;

    this.fetch = function(callback) {
      jQuery.post('/', { async_form: this.formID }, this.fetchHandler.bind(this))
      .then(callback);
    }
    this.fetchHandler = function(response) {
      response = JSON.parse( response );

      window.nfFrontEnd = window.nfFrontEnd || response.nfFrontEnd;
      window.nfi18n = window.nfi18n || response.nfi18n || {};

      this.formHTML = response.form;
      this.formTemplates = response.templates;
      this.formScripts = response.scripts;
    }

    this.load = function() {
      this.loadFormHTML(this.formHTML, this.targetContainer);
      this.loadTemplates(this.formTemplates);
      this.loadScripts(this.formScripts);
    }

    this.loadFormHTML = function(form, targetContainer) {
      jQuery(targetContainer).append( form );
    }
    this.loadTemplates = function(templates) {
      document.body.innerHTML += templates;
    }
    this.loadScripts = function(scripts) {
      jQuery.each( scripts, function( nfScript ){
        var script = document.createElement('script');
        // note that eval() can be dangerous to use - do your research
        eval( scripts[nfScript].extra.data );
        window.nfFrontEnd = window.nfFrontEnd || nfFrontEnd;
        script.setAttribute('src',scripts[nfScript].src);
        var appendChild = document.head.appendChild(script);
      });
    }

    this.remove = function() {
      jQuery(this.targetContainer).empty();
    }
  }

  </script>
  <?php
}, 100);

.

第 4 步。在您的页面 AJAX 之后初始化表单

我无法告诉您如何在您的页面中 AJAX - 那是您需要了解的另一个话题。但是，一旦您使用包含的 Ninja Form 加载了您的页面内容，并且成功进入页面后，现在您需要初始化该表单。

这使用了 javascript 帮助程序（第 3 步），后者又调用 php 帮助程序（第 2 步），最后在您的页面上显示表单！

您需要知道已注入的表单的 ID。我的策略是将其作为数据属性包含在我的页面标记中。

var form_id = 1;
var asyncForm = new NinjaFormsAsyncForm(form_id, '.ninja-forms-dynamic');
asyncForm.fetch(function () {
  asyncForm.load();
});

这就是全部！

希望这可以节省其他人解决所有这些问题的时间和精力。

在 AJAX 网站上使用动态注入的 Ninja Forms

Using dynamically injected Ninja Forms on an AJAX website

javascript

php

wordpress

jquery

ninja-forms