Changes to Textarea TinyMCE are not recognized by ASP.NET CodeBehind

Question

I have several <asp:TextBox TextMode="MultiLine"> elements on the page. When loading, I populate them (via the VB code behind) and then turn them into TinyMCE editors (via the jQuery TinyMCE plugin). Each text field also has a button associated with it to send text back to the code for insertion into the database.

I found that when the submit button is pressed, I have to “save” the contents of the editor in a text box, but this is not my problem. Even after I did this, the changes are not displayed in the code.

As I mentioned, I use jQuery. Here is my click handler. Keep in mind that all buttons are submit buttons in ASP.NET, so the submit class is:

 $('input.submit').live('click', function() { tinyMCE.EditorManager.triggerSave(); }); 

So, when you press any submit button, all tinyMCE editors fire a save event. After that, I checked the textarea value that I am looking for (again, via JavaScript), and it looks like it has changes (I use the Chrome Developer tools and console.log):

 console.log($(this).parent().find('textarea').val()); 

On the server side, however, I do not see any changes in the click handler for the submit button:

 Dim paragraph As String = Me.myTextArea.Text ' Results in the original text, not the edited text 

Other notes:

• Each editor is in its own update panel.
• Due to the nature of the content being sent (HTML), I had to set EnableEventValidation="false" and ValidateRequest="false" (this is an internal application, and this recommendation came from a more experienced developer)
• I'm new to .NET, but this behavior seems funny to me. I have to miss something critical.

Answer 1

I get it.

This is exactly what I suggested in my commentary on the original question. The ASP.NET asynchronous callback started by sending the old text to the server. Then my onclick shot, saving the new text in the text box and hitting my breakpoint (letting me see that the new text was actually saved in the text area). After that, the server processed the (old) text by clicking on my breakpoint in VB.

ASP.NET seems to take top priority in any onclick that happens, at least when using asynchronous tools. This means that any custom click handlers added through javascript will fire after clicking ASP.NET.

This makes some sense, given how JS handles multiple click handlers - this is a first-to-first-sorting process.

The solution, in my case, was to save the contents of the TinyMCE editor when changing, and not on the button:

 $(this).tinymce({ script_url : '../scripts/tiny_mce.js', theme: 'advanced', plugins: 'save', theme_advanced_buttons1 : 'bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,image,link,unlink,|,fontsizeselect,forecolorpicker', theme_advanced_buttons2 : '', theme_advanced_buttons3 : '', content_css : '../css/landingpage-tinymce.css', onchange_callback: function(ed) { ed.save(); } }); 

Notice the onchange_callback , which stores the contents of the editor in a text box. This will save the content anytime the editor adds what they call the “undo level”, which means that users will ever change something and move the cursor, or at any time when the editor is erased, among other events.