Question

I have several <asp:TextBox TextMode="MultiLine"> elements on a page. On load, I populate them (through the VB code behind), and then turn them into TinyMCE editors (through the jQuery TinyMCE plugin). Each text box also has a button associated with it, with the purpose of submitting the text back to the code behind for insertion into a database.

I discovered earlier that when the submit button is clicked, I have to “save” the contents of the editor to the text box, but that is not my problem. Even after I’ve done so, the edits are not showing up in the code behind.

As I’ve mentioned, I’m using jQuery. Here is my click handler. Keep in mind that all buttons are submit buttons in ASP.NET, hence the submit class:

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

So, when any submit button is clicked all tinyMCE editors have their save event triggered. After this is executed, I have checked the value of the textarea I’m looking for, (again, through JavaScript) and it seems to have the edits (I’m using Chrome’s Developer tools, and console.log):

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

On the server side, though, I see none of the edits 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 submitted (HTML), I’ve had to set EnableEventValidation="false" and ValidateRequest="false" (this is an internal application, and this recommendation came from a more experienced developer)
• I’m fairly new to .NET, but this behavior just seems ridiculous to me. I must be missing something critical.

Answer 1

I’ve figured it out.

It was exactly what I suggested in my comment on the original question. The ASP.NET async postback was firing, sending the old text to the server. Then my onclick was firing, saving the new text to the textarea, and hitting my breakpoint (allowing me to see that the new text was, in fact, saved to the text area). After that, the server processed the (old) text, hitting my breakpoint in the VB.

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

This makes some amount of sense, given how JS processes multiple click handlers – it’s a first-come-first-served sort of process.

The solution, in my case, was to save the contents of the TinyMCE editor on change, rather than on the button click:

$(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();
    }
});

Note the onchange_callback which saves the contents of the editor to the textarea. This will save the contents any time the editor adds what they call an “undo level”, which means any time the users changes something and moves the cursor, or any time the editor blurs, among other events.