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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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创建动态图像
2006/10/09 PHP
解析link_mysql的php版
2013/06/30 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
javascript基础知识
2016/06/07 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
原生js轮播特效
2017/05/18 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
介绍Python的@property装饰器的用法
2015/04/28 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python中线程和进程有何区别
2020/06/17 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
怎样创建、运行java程序
2014/08/01 面试题
工作岗位说明书模板
2014/05/09 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
房屋转让协议书
2014/10/18 职场文书
学校工会工作总结2015
2015/05/19 职场文书
八年级语文教学反思
2016/03/03 职场文书
python开发飞机大战游戏
2021/07/15 Python