这篇文章主要介绍了tinymce提交ajaxform获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
/ t1 d* |7 p& R, p. |/ L0 n本文实例分析了tinymce提交ajaxform获取不到数据的解决方法。分享给大家供大家参考。具体分析如下:
$ S9 R+ z$ Q: M在没有使用ajaxform前,我做的一个小小的评论提交的web form,评论内容使用了tinymce做文本编辑。为了增加一点点的用户体验,就顺手拿ajaxform来实现ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,ajaxform会无法获得当前编辑的评论内容,即textarea里面的内容,要再点击一次提交,才能将textarea的内容提交上去。
2 ^' R, a: a" {. g1 ]+ R关键是tinymce上的内容没有在提交前更新到textarea中。于是想看看ajaxform是否有在提交前的事件绑定,发现在beforesubmit事件中,formdata的内容已经被填充,虽然可以在此处自行将当前的tinymce的内容填充上去,可是总觉得是不太漂亮的解决方案。
5 m) {$ |7 z F( Z" c为了找是否有其它途径解决此问题,我查看了一下ajaxform的源代码,发现原来ajaxform作者已经为这问题提出了统一的解决方案,具体源代码如下:9 {8 {8 ?; h1 V
1. js代码如下:
) W9 z& E( G" y# Q( I4 z代码如下:* u7 W! w" ~2 F, E2 Y/ ]! d
// hook for manipulating the form data before it is extracted;& d% C9 d& b- Y4 }: J& x6 s2 n
// convenient for use with rich editors like tinymce or fckeditor% @* i+ s2 \1 G2 l/ r1 Y+ s% T
var veto = {};
# i% l+ @+ x6 C1 {this.trigger('form-pre-serialize', [this, options, veto]);& M- f5 ~' Y9 J5 A! K/ A
if (veto.veto) {
2 R7 q( S) A7 N6 x0 d1 O$ xlog('ajaxsubmit: submit vetoed via form-pre-serialize trigger');8 r. N0 _! p3 d+ ?/ n% Z) w, F
return this;
7 T- u1 y) y( g) w* J}/ w; ]8 V8 m' n! i) {- e. O) m3 P
2. 对应fckeditor类似:, E5 \% }: w% z: K8 W; d9 ], W8 F
代码如下:8 p, Q4 F% s7 P& J% r. c* j+ m
// bind form using 'ajaxform' ; T# {; E: C1 s- Z$ K% Z
$('#commentform').ajaxform(options);
3 G5 Y S1 ^1 H9 ? C: [4 K// 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinymce的数据到textarea中
* c2 r4 j# @6 @/ L$('#commentform').bind('form-pre-serialize', function(event, form, options, veto) {
0 t( r; y( d' X: g: E# xtinymce.triggersave();
" ^0 Z0 @6 [/ X8 A});
3 p5 `+ Y% X9 p" a. n希望本文所述对大家的javascript程序设计有所帮助。9 g" Z, ?, p3 ^5 u$ W4 }9 c# H2 X
5 t0 m6 k' Y- R4 ]% L! u6 E
更多网页制作信息请查看: 网页制作 |
|