在 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 () {&nbsp; // enqueue ninja forms css, including for any ninja forms addons&nbsp; wp_enqueue_style('nf-display', content_url('/plugins/ninja-forms/assets/css/display-structure.css'), ['dashicons'], core_dev_version(''));&nbsp; wp_enqueue_style('nf-layout-front-end', content_url('/plugins/ninja-forms-style/layouts/assets/css/display-structure.css'), ['nf-display'], core_dev_version(''));&nbsp; // make sure that backbone is enqueued on the page, as ninja forms relies on this&nbsp; wp_enqueue_script('backbone');}, 100);.步骤 2. 添加返回表单数据的 AJAX 函数您不需要编辑它，只需将其添加到您的functions.php 中即可。我们在步骤 3 中使用的 javascript 将进行自己的 AJAX 调用，以非常特定的格式请求一些表单数据。add_action('init', function () {&nbsp; // if this is not an AJAX form request, return&nbsp; if (! isset($_REQUEST[ 'async_form' ])) {&nbsp; &nbsp; return;&nbsp; }&nbsp; // clear default loaded scripts.&nbsp; global $wp_scripts;&nbsp; unset($wp_scripts->registered);&nbsp; // get the requested form id&nbsp; $form_id = absint($_REQUEST['async_form']);&nbsp; // retrieve the requested form&nbsp; ob_start();&nbsp; $form = do_shortcode("[ninja_forms id='{$form_id}']");&nbsp; ob_get_clean();&nbsp; // output the requested form on the page&nbsp; ob_start();&nbsp; NF_Display_Render::output_templates();&nbsp; $templates = ob_get_clean();&nbsp; $response = [&nbsp; &nbsp; 'form' => $form,&nbsp; &nbsp; 'scripts' => $wp_scripts->registered,&nbsp; &nbsp; 'templates' => $templates&nbsp; ];&nbsp; echo json_encode($response);&nbsp; // die, because we don't want anything else to be returned&nbsp; die();});.步骤 3. 将 JS 辅助函数添加到您的登陆页面这只是将一些有用的 JS 代码添加到您的站点中。您可以将其按原样添加到functions.php，或将其包含在单独的JS文件中。这就是我们将用来加载和初始化我们想要的表单的方法。add_action('wp_footer', function () {&nbsp; // adds a script to the footer&nbsp; ?>&nbsp; <script type="text/javascript">&nbsp; var NinjaFormsAsyncForm = function(formID, targetContainer) {&nbsp; &nbsp; this.formID = formID;&nbsp; &nbsp; this.targetContainer = targetContainer;&nbsp; &nbsp; this.formHTML;&nbsp; &nbsp; this.formTemplates;&nbsp; &nbsp; this.formScripts;&nbsp; &nbsp; this.fetch = function(callback) {&nbsp; &nbsp; &nbsp; jQuery.post('/', { async_form: this.formID }, this.fetchHandler.bind(this))&nbsp; &nbsp; &nbsp; .then(callback);&nbsp; &nbsp; }&nbsp; &nbsp; this.fetchHandler = function(response) {&nbsp; &nbsp; &nbsp; response = JSON.parse( response );&nbsp; &nbsp; &nbsp; window.nfFrontEnd = window.nfFrontEnd || response.nfFrontEnd;&nbsp; &nbsp; &nbsp; window.nfi18n = window.nfi18n || response.nfi18n || {};&nbsp; &nbsp; &nbsp; this.formHTML = response.form;&nbsp; &nbsp; &nbsp; this.formTemplates = response.templates;&nbsp; &nbsp; &nbsp; this.formScripts = response.scripts;&nbsp; &nbsp; }&nbsp; &nbsp; this.load = function() {&nbsp; &nbsp; &nbsp; this.loadFormHTML(this.formHTML, this.targetContainer);&nbsp; &nbsp; &nbsp; this.loadTemplates(this.formTemplates);&nbsp; &nbsp; &nbsp; this.loadScripts(this.formScripts);&nbsp; &nbsp; }&nbsp; &nbsp; this.loadFormHTML = function(form, targetContainer) {&nbsp; &nbsp; &nbsp; jQuery(targetContainer).append( form );&nbsp; &nbsp; }&nbsp; &nbsp; this.loadTemplates = function(templates) {&nbsp; &nbsp; &nbsp; document.body.innerHTML += templates;&nbsp; &nbsp; }&nbsp; &nbsp; this.loadScripts = function(scripts) {&nbsp; &nbsp; &nbsp; jQuery.each( scripts, function( nfScript ){&nbsp; &nbsp; &nbsp; &nbsp; var script = document.createElement('script');&nbsp; &nbsp; &nbsp; &nbsp; // note that eval() can be dangerous to use - do your research&nbsp; &nbsp; &nbsp; &nbsp; eval( scripts[nfScript].extra.data );&nbsp; &nbsp; &nbsp; &nbsp; window.nfFrontEnd = window.nfFrontEnd || nfFrontEnd;&nbsp; &nbsp; &nbsp; &nbsp; script.setAttribute('src',scripts[nfScript].src);&nbsp; &nbsp; &nbsp; &nbsp; var appendChild = document.head.appendChild(script);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; this.remove = function() {&nbsp; &nbsp; &nbsp; jQuery(this.targetContainer).empty();&nbsp; &nbsp; }&nbsp; }&nbsp; </script>&nbsp; <?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 () {&nbsp; asyncForm.load();});这就是全部内容了！希望这可以节省其他人解决所有这些问题的时间和精力。