TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法
本文實(shí)例分析了TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法。分享給大家供大家參考。具體分析如下：
在沒有使用AjaxForm前，我做的一個(gè)小小的評(píng)論提交的Web form，評(píng)論內(nèi)容使用了TinyMCE做文本編輯。為了增加一點(diǎn)點(diǎn)的用戶體驗(yàn)，就順手拿AjaxForm來(lái)實(shí)現(xiàn)Ajax提交?？墒前l(fā)現(xiàn)出現(xiàn)了一個(gè)意外的事情。就是每次提交，第一次提交時(shí)，AjaxForm會(huì)無(wú)法獲得當(dāng)前編輯的評(píng)論內(nèi)容，即TextArea里面的內(nèi)容，要再點(diǎn)擊一次提交，才能將TextArea的內(nèi)容提交上去。
關(guān)鍵是TinyMCE上的內(nèi)容沒有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件綁定，發(fā)現(xiàn)在beforeSubmit事件中，formData的內(nèi)容已經(jīng)被填充，雖然可以在此處自行將當(dāng)前的TinyMCE的內(nèi)容填充上去，可是總覺得是不太漂亮的解決方案。
為了找是否有其它途徑解決此問題，我查看了一下AjaxForm的源代碼，發(fā)現(xiàn)原來(lái)AjaxForm作者已經(jīng)為這問題提出了統(tǒng)一的解決方案，具體源代碼如下：
1. js代碼如下：
// convenient for use with rich editors like tinyMCE or FCKEditor
var veto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
return this;
}
2. 對(duì)應(yīng)FCKEditor類似：
$('#commentForm').ajaxForm(options);
// 綁定form-pre-serialize事件，在觸發(fā)form-serilaize事件前保存tinyMCE的數(shù)據(jù)到textarea中
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- jQuery ajaxForm()的應(yīng)用
- 淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
- springMVC結(jié)合AjaxForm上傳文件
- jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項(xiàng)對(duì)象
- ajaxForm和ajaxSubmit 粘貼就可用示例代碼
- php實(shí)現(xiàn)圖片上傳、剪切功能
- php實(shí)現(xiàn)圖片上傳并進(jìn)行替換操作
- 兩種php實(shí)現(xiàn)圖片上傳的方法
- php+html5實(shí)現(xiàn)無(wú)刷新圖片上傳教程
- PHP AjaxForm提交圖片上傳并顯示圖片源碼
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6中類（Class）的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
如何防止JavaScript自動(dòng)插入分號(hào)
JavaScript語(yǔ)言有一個(gè)機(jī)制：在解析時(shí)，能夠在一句話后面自動(dòng)插入一個(gè)分號(hào)，用來(lái)修改語(yǔ)句末尾遺漏的分號(hào)分隔符。然而，由于這個(gè)自動(dòng)插入的分號(hào)與JavaScript語(yǔ)言的另一個(gè)機(jī)制發(fā)生了沖突，即所有空格符都被忽略，因此程序可以利用空格格式化代碼2015-11-11
動(dòng)態(tài)統(tǒng)計(jì)當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實(shí)例詳解
這篇文章主要介紹了動(dòng)態(tài)統(tǒng)計(jì)當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
本文我們將討論?axios?中是如何處理異常的,在此之前,我們先了解以下?axios?中各種類型的異常,文中通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了使用zepto.js，純JS寫的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
前端存儲(chǔ)后端響應(yīng)數(shù)據(jù)超詳細(xì)的實(shí)現(xiàn)方式和注意事項(xiàng)
前端通過多種方式向后端獲取數(shù)據(jù),下面這篇文章主要介紹了前端存儲(chǔ)后端響應(yīng)數(shù)據(jù)超詳細(xì)的實(shí)現(xiàn)方式和注意事項(xiàng),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值實(shí)例代碼詳解
這篇文章主要介紹了echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值,本文給出了實(shí)現(xiàn)實(shí)例及實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
本文主要分享了利用canvas畫多邊形的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子
今天小編就為大家分享一篇使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
基于JavaScript+HTML編寫一個(gè)日期選擇插件
在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個(gè)非常常見的組件,用戶可以使用它來(lái)選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來(lái)創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的日期選擇插件,這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的,需要的朋友可以參考下2023-10-10