本文實(shí)例分析了TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法。分享給大家供大家參考。具體分析如下：
在沒有使用AjaxForm前，我做的一個(gè)小小的評(píng)論提交的Web form，評(píng)論內(nèi)容使用了TinyMCE做文本編輯。為了增加一點(diǎn)點(diǎn)的用戶體驗(yàn)，就順手拿AjaxForm來實(shí)現(xiàn)Ajax提交?？墒前l(fā)現(xiàn)出現(xiàn)了一個(gè)意外的事情。就是每次提交，第一次提交時(shí)，AjaxForm會(huì)無法獲得當(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)原來AjaxForm作者已經(jīng)為這問題提出了統(tǒng)一的解決方案，具體源代碼如下：
1. js代碼如下：
復(fù)制代碼代碼如下:
// hook for manipulating the form data before it is extracted;
// 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;
}
// 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類似：
復(fù)制代碼代碼如下:
// bind form using 'ajaxForm'
$('#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();
});
$('#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ì)有所幫助。
