Ckeditor+Jquery.Form插件ajax不提交最新数据问题的解决
2010-12-30 阅读 189
昨晚发现，用Ckeditor+Jquery.Form插件做的ajax提交保存文章内容，不是最新编辑的内容。分步骤对各个阶段提交的数据进行了分析、解决问题。过程是痛苦的，经验是值得总结的。下面一次列出遇到的各个问题，以及解决的方法。
1.使用ajaxSubmit代替ajaxForm
问题：
之前我使用了ajaxForm在页面载入完毕时，对页面中的form（表单）进行了插件的接管，这样每次ajax提交的过程就完全自动的被插件接管，就无法在提交的过程中再加入一些操作。这里的操作指的是在提交动作之前，和插件中的 beforeSubmit 配置是不同的。代码：
<pre class="brush:jscript;"> $('#blog_edit_frm').ajaxForm({
beforeSubmit: blog_save_start,
success: blog_save_success
});
```
<p>
解决：</p>
<p>
解决起来很简单，使用ajaxSubmit代替ajaxForm就可以了，从下面的带代码中，我们可以看到可以在ajaxSubmit之前加入各种需要的操作。</p>
<pre class="brush:jscript;"> $('#blog_edit_frm').submit(function(){
// 加入需要的操作代码
$('#blog_edit_frm').ajaxSubmit({
beforeSubmit: blog_save_start,
success: blog_save_success
});
return false;
});
```
<p>
</p>
<h4>
2.ckeditor数据向content（页面用以替换的编辑框）的同步</h4>
<p>
问题：</p>
<p>
我们发现，在数据通过ajaxSubmit提交的过程中，并不能将最新的数据进行提交。换句话说，最新的数据无法被jquery.form插件获取到。</p>
<p>
解决：</p>
<p>
在ajaxSubmit之前，将ckeditor的编辑内容，强制放入content（页面areatext）中。如下修改代码：</p>
<pre class="brush:php;"> $('#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;
});
```
<p>
</p>
<h4>
3.ajaxSubmit提交的地址的动态生成（防止浏览器缓存）</h4>
<p>
问题：</p>
<p>
到此为止，我们可以将新数据随时提交，但是仍然会出现，服务器端不保存最新数据的问题。</p>
<p>
解决：</p>
<p>
推测问题出在，提交url的时候，浏览器按照地址，对数据进行了缓存的问题。如下修改代码，以便于动态的生成不同的url，实际效果相同。</p>
<pre class="brush:jscript;"> $('#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;
});
```
<p>
代码的生成方式，请根据具体系统的情况进行修改。原则是在链接尾部，加上无意义的时间戳（javascript）。</p>
<p>
</p>
<p>
----------------------------------------------------</p>
<p>
在ckeditor官网上看到的相关内容，同样是上述提到的问题，不过说到的办法似乎不能用。</p>
<p>
地址：<a href="http://ckeditor.com/blog/CKEditor_for_jQuery#comment-1022" target="_blank">http://ckeditor.com/blog/CKEditor_for_jQuery#comment-1022</a></p>
<p>
摘录了一部分，如下：</p>
<p>
</p>
<div class="comment comment-published even comment-by-anon" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; border-width: initial; border-color: initial; border-left-width: 1px; border-left-color: rgb(245, 245, 245); ">
<div class="comment-inner clear-block" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; ">
<h4>
<a class="active active" href="http://ckeditor.com/blog/CKEditor_for_jQuery#comment-1022" style="text-decoration: none; color: rgb(56, 60, 61); ">CKEditor with JQuery AjaxSubmitForm plugin</a></h4>
<div class="submitted" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
Submitted by Fawad on Thu, 2010-12-09 21:33.</div>
<div class="content" style="margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
Hi,</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
I was trying to use ckeditor with official <a href="http://jquery.malsup.com/form/" style="text-decoration: none; color: rgb(4, 177, 209); ">jQuery Form Plugin</a> 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?</p>
</div>
</div>
</div>
<div class="indented" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
<div class="comment comment-published odd comment-by-anon" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; border-width: initial; border-color: initial; border-left-width: 1px; border-left-color: rgb(245, 245, 245); ">
<div class="comment-inner clear-block" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; ">
<h4>
<a class="active active" href="http://ckeditor.com/blog/CKEditor_for_jQuery#comment-1035" style="text-decoration: none; color: rgb(56, 60, 61); ">Solution: CKEditor with JQuery AjaxSubmitForm plugin</a></h4>
<div class="submitted" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
Submitted by Fawad on Sun, 2010-12-12 18:47.</div>
<div class="content" style="margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
Heye guys,</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
I found a solution for using ckeditor with JQuery ajaxForm plugin. Instead of doing the following</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
$(document).ready(function() {<br><br>
$('#myForm').ajaxForm(options);<br><br>
});</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
do the following</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
function submitAjaxForm(){<br><br>
$('#myForm').ajaxForm(options);<br><br>
}</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
and onsubmit of the form call this function.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
Hope it helps someone.</p>
</div>
</div>
</div>
</div>
ckeditor jquery ajaxSubmit ajaxForm ajax javascript
更新于 2023年03月28日
