TinyMCE submits AjaxForm and fails to obtain data solution_javascript skills

This article analyzes the solution to the problem that TinyMCE cannot obtain data when submitting AjaxForm. Share it with everyone for your reference. The specific analysis is as follows:

Before using AjaxForm, I made a small web form for comment submission. The comment content was edited using TinyMCE. In order to increase the user experience a little bit, just use AjaxForm to implement Ajax submission. But something unexpected happened. That is, every time you submit, the first 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 key is that the content on TinyMCE is not updated to the 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 in. Although I can fill in the content of the current TinyMCE here, I always feel that it is not very pretty. solution.

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:

Copy code The code is as follows:

// hook for manipulating the form data before it is extracted;
// convenient for use with rich editors like tinyMCE or FCKEditor
varveto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetted via form-pre-serialize trigger');
return this;
}

2. Similar to FCKEditor:

Copy code The code is as follows:

// bind form using 'ajaxForm'
$('#commentForm').ajaxForm(options);
// Bind the form-pre-serialize event and save the tinyMCE data to the textarea before triggering the form-serilaize 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 design.