TinyMCE提交AjaxForm获取不到数据的解决方法


Posted in Javascript onMarch 05, 2015

本文实例分析了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程序设计有所帮助。

Javascript 相关文章推荐
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 #Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 #Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 #Javascript
PHP 数组current和next用法分享
Mar 05 #Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 #Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 #Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 #Javascript
You might like
php array_search() 函数使用
2010/04/13 PHP
php提交post数组参数实例分析
2015/12/17 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Python字典对象实现原理详解
2019/07/01 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python 实现Harris角点检测算法
2020/12/11 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
快递业务员岗位职责
2014/01/06 职场文书
工作表扬信的范文
2014/01/10 职场文书
三项教育活动实施方案
2014/03/30 职场文书
卫生标语大全
2014/06/21 职场文书
员工安全责任书范本
2014/07/24 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
追悼会悼词大全
2015/06/23 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
科普 | 业余无线电知识-波段篇
2022/02/18 无线电