这篇文章主要介绍了tinymce提交ajaxform获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下* _+ Q, B5 u2 O$ p; b. m4 {1 ~
本文实例分析了tinymce提交ajaxform获取不到数据的解决方法。分享给大家供大家参考。具体分析如下:
5 Z$ S1 n/ E) Q3 y& A在没有使用ajaxform前,我做的一个小小的评论提交的web form,评论内容使用了tinymce做文本编辑。为了增加一点点的用户体验,就顺手拿ajaxform来实现ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,ajaxform会无法获得当前编辑的评论内容,即textarea里面的内容,要再点击一次提交,才能将textarea的内容提交上去。6 W4 B/ {* X+ ~
关键是tinymce上的内容没有在提交前更新到textarea中。于是想看看ajaxform是否有在提交前的事件绑定,发现在beforesubmit事件中,formdata的内容已经被填充,虽然可以在此处自行将当前的tinymce的内容填充上去,可是总觉得是不太漂亮的解决方案。
; q# l1 ?% ^/ ?6 U" @0 B为了找是否有其它途径解决此问题,我查看了一下ajaxform的源代码,发现原来ajaxform作者已经为这问题提出了统一的解决方案,具体源代码如下:7 ]0 n- l7 v9 e7 }' G
1. js代码如下:
# H- r! O* r% h4 x* K& G5 D代码如下:
4 |2 h R; N$ s& A! P. k+ l7 N// hook for manipulating the form data before it is extracted;3 U# x0 E( E0 z5 k" D, D& j" k
// convenient for use with rich editors like tinymce or fckeditor' G7 @3 N# T; E+ o& c; s
var veto = {};( o6 Y A$ T6 Z: d! e; P1 j7 T8 y
this.trigger('form-pre-serialize', [this, options, veto]);
" {) w4 | }+ Z* nif (veto.veto) {
! P5 g7 x* R) ulog('ajaxsubmit: submit vetoed via form-pre-serialize trigger');
3 D" q! a7 W# _; Yreturn this;9 O' a4 s* H1 C3 K2 M3 s# r
}
7 @6 |; M) C& p& n1 l8 L* M1 z: b2. 对应fckeditor类似:
/ M5 E7 b" v9 p% v# V$ p; B代码如下:
) E" f" a0 x( y. M/ Z// bind form using 'ajaxform'
: g; n' h' M/ V- w, q4 V$('#commentform').ajaxform(options);$ @7 u# g2 t* |' D e, \
// 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinymce的数据到textarea中
/ n" |/ s) t( {6 E/ @; T8 b2 y$('#commentform').bind('form-pre-serialize', function(event, form, options, veto) {
6 F/ S/ m$ F' w6 ^! q: o! P& dtinymce.triggersave();
/ t; I- {. {( Z" F- i5 V' r});
$ K" F! Y2 J5 Q2 K$ a' b% c+ m2 P希望本文所述对大家的javascript程序设计有所帮助。
7 l: i& N! g3 Z( k" Q$ y# p
2 m# d+ Z7 X5 H, {4 ]8 M- M更多网页制作信息请查看: 网页制作 |
|