这篇文章主要介绍了tinymce提交ajaxform获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
: C; K+ N; P' n本文实例分析了tinymce提交ajaxform获取不到数据的解决方法。分享给大家供大家参考。具体分析如下:$ ~, E2 D* b( B* t$ ]+ r2 ]
在没有使用ajaxform前,我做的一个小小的评论提交的web form,评论内容使用了tinymce做文本编辑。为了增加一点点的用户体验,就顺手拿ajaxform来实现ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,ajaxform会无法获得当前编辑的评论内容,即textarea里面的内容,要再点击一次提交,才能将textarea的内容提交上去。0 [) X. ?. `- F: K
关键是tinymce上的内容没有在提交前更新到textarea中。于是想看看ajaxform是否有在提交前的事件绑定,发现在beforesubmit事件中,formdata的内容已经被填充,虽然可以在此处自行将当前的tinymce的内容填充上去,可是总觉得是不太漂亮的解决方案。( c! J$ O. O# O3 V/ ^
为了找是否有其它途径解决此问题,我查看了一下ajaxform的源代码,发现原来ajaxform作者已经为这问题提出了统一的解决方案,具体源代码如下:
! ?6 M, D. w1 G/ b9 e1. js代码如下:6 _& G6 Y) ~6 Q) I9 }5 W
代码如下:
$ g, h" i" x/ ~1 M// hook for manipulating the form data before it is extracted;
1 f- J& r/ ^( I$ j: L: v4 R// convenient for use with rich editors like tinymce or fckeditor
3 a: S; y+ c- M7 q) x2 ?var veto = {};
7 Y% b2 c) x& r4 vthis.trigger('form-pre-serialize', [this, options, veto]);
7 M4 C# P, o* s1 h2 e( C, zif (veto.veto) {( s/ V% S) E& z$ @+ F
log('ajaxsubmit: submit vetoed via form-pre-serialize trigger');! K$ L* C1 b) A- X
return this;
+ i: ?1 _7 H; ~( S' ~- x* I1 m" g}
N" S" x+ g$ Q" h$ V4 h, \2. 对应fckeditor类似:
* ~! H+ o3 V" ?% t* O R7 p1 b代码如下:
' I0 Q7 I X! x3 C1 W- ?// bind form using 'ajaxform' / D/ r& }0 J s7 ^' @
$('#commentform').ajaxform(options);" H1 [$ m, Q4 |
// 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinymce的数据到textarea中! q7 @) @) B+ h2 x. A6 l4 O; U4 Q6 T
$('#commentform').bind('form-pre-serialize', function(event, form, options, veto) {
. x: G/ W X% u8 K/ n* \tinymce.triggersave();
0 {. Z3 O6 t' k5 S; p9 m});2 \7 U% ^% S/ r, F8 `4 w
希望本文所述对大家的javascript程序设计有所帮助。
0 c5 x5 U. d3 {, ^* P u9 H2 t0 y3 [8 g& R) d+ r
更多网页制作信息请查看: 网页制作 |
|