This article analyzes the solution to the problem that TinyMCE cannot obtain data when submitting AjaxForm. Share it for your reference. The specific analysis is as follows:
Before using AjaxForm, I made a small comment submission web form, and the comment content was used for text editing. In order to increase the user experience a little bit, I will use AjaxForm to implement Ajax submission. But I found something unexpected happened. It is that every time you submit, AjaxForm will not be able to obtain the currently edited comment content, that is, the content in TextArea. You have to click Submit again to submit the content of TextArea.
The point is that the content on TinyMCE is not updated into TextArea before submission. So I wanted to see if AjaxForm has event binding before submission. I found that in the beforeSubmit event, the content of formData has been filled. Although I can fill the current TinyMCE content here, I always feel that it is not very beautiful.
In order to find out if there are other ways to solve this problem, I checked the source code of AjaxForm and found that the author of AjaxForm has proposed a unified solution to this problem. The specific source code is as follows:
1. The js code is as follows:
The code copy is as follows:// hook for manipulating the form data before it is extracted;
// convenient for use with rich editors like tinyMCE or FCKEditor
var veto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submitted vetoed via form-pre-serialize trigger');
return this;
}
2. Corresponding to FCKEditor is similar:
Copy the code as follows:// bind form using 'ajaxForm'
$('#commentForm').ajaxForm(options);
// Bind the form-pre-serialize event and save the tinyMCE data into the textarea before triggering the form-serilize event.
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});
I hope this article will be helpful to everyone's JavaScript programming.