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 remendation 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.

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 remendation 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.

• javascript
• asp
• vb
• textbox
• tinymce

Share Improve this question Follow asked Nov 23, 2010 at 16:27 Ryan KinalRyan Kinal 17.7k66 gold badges4747 silver badges6363 bronze badges 3

• How do you transfer the data to the server? – Thariama Commented Nov 24, 2010 at 8:17
• The button uses OnCommand, with an appropriate CommandName and CommandArgument, and then in the codebehind, I access the data by Me.myTextArea.Text. – Ryan Kinal Commented Nov 24, 2010 at 14:35
• I think I've actually figured out the issue, but I haven't tested my theory yet. I think the OnCommand postback is being executed first (asynchronously sending the old data), then my breakpoint in the JS is hit (so I see the edited text in the debugger), and then my breakpoint in the VB is hit (so I see the old text in the VB debugger). Seems a solid theory, but like I said, untested. – Ryan Kinal Commented Nov 24, 2010 at 14:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I've figured it out.

It was exactly what I suggested in my ment 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-e-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.