在Wordpress中使用wp_editor時，序列化僅在第二次提交時返回完整表單

我有一個表格，我試圖使用serialize將其轉換爲AJAX。只有當用戶開始輸入標題字段時，大部分表單才由AJAX加載。在Wordpress中使用wp_editor時，序列化僅在第二次提交時返回完整表單

<form id="new_post" onsubmit="ajaxSubmit()"> 
    <input onclick="loadEditor()" class="editor" name="post_title" placeholder="Let us know what you're thinking - post something." /> 
    <div class="ajax_editor"></div> 
</form>

下面是loadEditor的代碼，它加載在它WordPress的TinyMCE的編輯頁面。

function loadEditor(preloaded) { 
    if(preloaded!=true) { 
     jQuery.ajax({url: "post-editor", success: function(result){ 
      jQuery(".editor").attr("onclick",""); 
      jQuery('.ajax_editor').addClass('active'); 
      jQuery(".ajax_editor").html(result); 
      jQuery(".ajax_editor").fadeOut(0); 
      jQuery(".ajax_editor").fadeIn(800); 
     }}) 
    } 
    else { 
      jQuery(".ajax_editor").fadeIn(500); 
    } 
}

這裏是ajaxSubmit的代碼（當我只測試它時，它只輸出到控制檯）。

function ajaxSubmit() { 
    event.preventDefault(); 
    var form_elements = jQuery('#new_post').serialize(); 
    console.log(form_elements); 
};

然而，當ajaxSubmit運行，只有post_title傳遞給form_elements和post_content存在，但空。如果我再次提交表單，它將按預期包含所有內容。

如果我然後編輯表單的內容並再次提交，它就好像沒有任何更改（form_elements登錄到控制檯，但顯示以前的post_content）;在進一步提交它包括新的post_content。

但是，如果我更改post_title，表單總是正確提交。

這是因爲我已經加載了兩個部分的表單，還是有其他工作？

來源

2015-09-22 BFWebAdmin

這是令人困惑，你提交太早了？如果你在'ajaxSubmit'中記錄'this.elements'，你只有一個元素嗎？ – romuleald

@romuleald - 這兩個元素都在那裏，其中只有一個是空的;被稱爲「意圖」的進一步隱藏輸入在每次提交中都正確顯示。這可能是導致問題的post_content的名稱嗎？ – BFWebAdmin

結果是什麼？ – romuleald

這裏實際存在兩個問題，這兩個問題都歸結於WordPress生成的wp_editor。

首先，我們正在處理一個可編輯的body元素，而不是正確的表單輸入，正如註釋中的romuleald所發現的那樣。

其次，該body元素實際上是在一個iframe中，這是我原來的問題不想包含所有生成的html。

所以，我添加了名爲「ajax_post_content」我的表單輸入元素，如下改變ajaxSubmit功能：

function ajaxSubmit() { 
    event.preventDefault(); 
    var wp_editor_iframe = jQuery('#post_content_ifr'); 
    var post_contents = jQuery('#tinymce', wp_editor_iframe.contents())[0].innerHTML; 
    var form_elements = jQuery('#new_post').serialize() + encodeURIComponent(post_contents); 
    console.log(form_elements);    
}

這並沒有真正包括在表單中的內容，但它附加到序列化的變量。

來源

2015-09-22 14:09:19 BFWebAdmin

當試圖從TinyMCE獲取內容時，應該使用它的api，因爲沒有輸入直接插入到DOM中。

從官方文件TinyMCE的：

// Get content of a specific editor: 
tinyMCE.get('content id').getContent() 
//  ^use '#new_post' instead of 'content id'

文檔瀏覽：TinyMCE - getContent

來源

2015-09-22 14:41:33

即使在WordPress的版本？ – BFWebAdmin

檢查答案：http://wordpress.stackexchange.com/a/42729 –

在Wordpress中使用wp_editor時，序列化僅在第二次提交時返回完整表單

回答

相關問題