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 相关文章推荐
Cookie 小记
Apr 01 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
微信小程序实现授权登录
May 15 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
非常漂亮的js烟花效果
Mar 10 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
建立动态的WML站点(三)
2006/10/09 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
React组件中的this的具体使用
2018/02/28 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python函数嵌套实例
2014/09/23 Python
使用Python实现简单的服务器功能
2017/08/25 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
职工运动会邀请函
2014/01/19 职场文书
公司面试感谢信
2014/02/01 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
以权谋私检举信范文
2015/03/02 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书