Javascript 在AJAX网站上使用动态注入的Ninja表单

我正在构建一个Wordpress站点，并使用AJAX在用户导航时加载后续页面，以便页面转换能够很好地动画化

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

---

使用AJAX动态加载表单后，为了让表单显示在页面上，需要采取哪些步骤？

我尝试了一些完全没有文档记录的代码示例，并设法找到了它，以及一些必要的调整和添加。我想我会在这里分享，以防其他人对此有困难

第1步。将必要的JS和CSS排队

将以下内容添加到functions.php中，因为Ninja表单依赖于主干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);

这就是一切

希望这可以节省其他人的时间和精力来解决这一切

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