Ckeditor+Jquery.Form插件ajax不提交最新数据问题的解决
2010-12-30 阅读 177
昨晚发现,用Ckeditor+Jquery.Form插件做的ajax提交保存文章内容,不是最新编辑的内容。分步骤对各个阶段提交的数据进行了分析、解决问题。过程是痛苦的,经验是值得总结的。下面一次列出遇到的各个问题,以及解决的方法。
#### 1.使用ajaxSubmit代替ajaxForm
问题:
之前我使用了ajaxForm在页面载入完毕时,对页面中的form(表单)进行了插件的接管,这样每次ajax提交的过程就完全自动的被插件接管,就无法在提交的过程中再加入一些操作。这里的操作指的是在提交动作之前,和插件中的 beforeSubmit 配置是不同的。代码:
$('#blog_edit_frm').ajaxForm({
beforeSubmit: blog_save_start,
success: blog_save_success
});
```
解决:
解决起来很简单,使用ajaxSubmit代替ajaxForm就可以了,从下面的带代码中,我们可以看到可以在ajaxSubmit之前加入各种需要的操作。
$('#blog_edit_frm').submit(function(){
// 加入需要的操作代码
$('#blog_edit_frm').ajaxSubmit({
beforeSubmit: blog_save_start,
success: blog_save_success
});
return false;
});
```
2.ckeditor数据向content(页面用以替换的编辑框)的同步
问题:
我们发现,在数据通过ajaxSubmit提交的过程中,并不能将最新的数据进行提交。换句话说,最新的数据无法被jquery.form插件获取到。
解决:
在ajaxSubmit之前,将ckeditor的编辑内容,强制放入content(页面areatext)中。如下修改代码:
$('#blog_edit_frm').submit(function(){
$('#content').val(CKEDITOR.instances.content.getData());
$('#blog_edit_frm').ajaxSubmit({
beforeSubmit: blog_save_start,
success: blog_save_success
});
return false;
});
```
3.ajaxSubmit提交的地址的动态生成(防止浏览器缓存)
问题:
到此为止,我们可以将新数据随时提交,但是仍然会出现,服务器端不保存最新数据的问题。
解决:
推测问题出在,提交url的时候,浏览器按照地址,对数据进行了缓存的问题。如下修改代码,以便于动态的生成不同的url,实际效果相同。
$('#blog_edit_frm').submit(function(){
$('#content').val(CKEDITOR.instances.content.getData());
$('#blog_edit_frm').ajaxSubmit({
url: "url" + (new Date()).getTime(),
beforeSubmit: blog_save_start,
success: blog_save_success
});
return false;
});
```
代码的生成方式,请根据具体系统的情况进行修改。原则是在链接尾部,加上无意义的时间戳(javascript)。
----------------------------------------------------
在ckeditor官网上看到的相关内容,同样是上述提到的问题,不过说到的办法似乎不能用。
地址:http://ckeditor.com/blog/CKEditor_for_jQuery#comment-1022
摘录了一部分,如下:
ckeditor jquery ajaxSubmit ajaxForm ajax javascript
更新于 2023年03月28日
CKEditor with JQuery AjaxSubmitForm plugin
Hi,
I was trying to use ckeditor with official jQuery Form Plugin for AJAX based forms but with the first submit I dont get the data. If I submit it for the second time only then it works. Any suggestions on this?