本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法。分享给大家供大家参考。具体分析如下:
在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去。
关键是TinyMCE上的内容没有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件绑定,发现在beforeSubmit事件中,formData的内容已经被填充,虽然可以在此处自行将当前的TinyMCE的内容填充上去,可是总觉得是不太漂亮的解决方案。
为了找是否有其它途径解决此问题,我查看了一下AjaxForm的源代码,发现原来AjaxForm作者已经为这问题提出了统一的解决方案,具体源代码如下:
1. js代码如下:
复制代码 代码如下:// 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;
}
2. 对应FCKEditor类似:
复制代码 代码如下:// bind form using 'ajaxForm'
$('#commentForm').ajaxForm(options);
// 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinyMCE的数据到textarea中
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
- jQuery ajaxForm()的应用
- 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
- springMVC结合AjaxForm上传文件
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
- ajaxForm和ajaxSubmit 粘贴就可用示例代码
- php实现图片上传、剪切功能
- php实现图片上传并进行替换操作
- 两种php实现图片上传的方法
- php+html5实现无刷新图片上传教程
- PHP AjaxForm提交图片上传并显示图片源码