TA貢獻1966條經驗 獲得超4個贊
我嘗試了一些完全未記錄的代碼示例，并設法弄清楚了它，以及一些必要的調整和添加。我想我會在這里分享，以防其他人遇到困難。
步驟 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();
});
這就是全部內容了！
希望這可以節省其他人解決所有這些問題的時間和精力。
舉報