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

Question

我正在构建一个 Wordpress 网站，并使用 AJAX 在用户导航时加载后续页面，以便页面转换具有精美的动画效果。默认情况下，如果您加载并注入嵌入了 Ninja Form 的页面，则该表单根本不会显示。关于如何实现这一目标的信息非常少。我希望有一个官方的开箱即用的方式来实现这一点，但似乎没有。当使用 AJAX 动态加载表单时，需要采取哪些步骤才能使表单显示在页面上？

Answer 1

我尝试了一些完全未记录的代码示例，并设法弄清楚了它，以及一些必要的调整和添加。我想我会在这里分享，以防其他人遇到困难。

步骤 1. 将必要的 JS 和 CSS 入队

将以下内容添加到您的functions.php中，因为Ninja Forms依赖于主干js，并且需要CSS，如果您的初始登陆页面上还没有表单，则不会加载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 函数

您不需要编辑它，只需将其添加到您的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();

});

这就是全部内容了！

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