ASP.NET CodeBehind Fails to Recognize Changes in TinyMCE Textarea

I have multiple

<asp:TextBox TextMode="MultiLine">
elements on a webpage. Initially, I populate them using VB code behind and then convert them into TinyMCE editors with the help of the jQuery TinyMCE plugin. Each text box has an associated button for submitting the text back to the code behind for insertion into a database.

Upon clicking the submit button, I realized that I needed to "save" the editor's contents to the text box before proceeding further. However, even after completing this step, the edits were not being reflected in the code behind.

My approach involves utilizing jQuery. Below is the click handler implementation as all buttons are considered submit buttons in ASP.NET due to the submit class:

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

Hence, whenever any submit button is clicked, the save event is triggered for all TinyMCE editors. Upon execution, I verified the edited content by checking the textarea value using JavaScript:

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

However, despite seeing the edits through console.log in Chrome Developer tools, none of the changes were visible in the server-side click handler for the submit button:

Dim paragraph As String = Me.myTextArea.Text
' This retrieves the original text, not the edited version

Additional Information:

  • Each editor resides within its own update panel
  • Due to the HTML content being submitted, I had to disable EnableEventValidation="false" and ValidateRequest="false" (based on advice from a senior developer in our team)
  • While I'm relatively new to .NET, this inconsistent behavior appears perplexing to me. There might be a crucial aspect that I am overlooking.

Answer №1

After some investigation, I finally cracked the code.

As it turns out, my initial hunch from the comment I left on the original question was spot on. The issue stemmed from the ASP.NET async postback triggering first, sending the outdated text to the server. Following that, my onclick event fired, updating the textarea with the new text and hitting my breakpoint (confirming that the update was successful). Subsequently, the server processed the old text, reaching the VB breakpoint.

It appears that when dealing with asynchronous operations in ASP.NET, priority is given to ASP.NET clicks over any custom click handlers attached via JavaScript. Essentially, the order of execution follows a "first-come-first-served" approach, with ASP.NET taking precedence.

In my scenario, the remedy involved altering the way content was saved within the TinyMCE editor. Instead of relying on button clicks, I modified the saving process to occur whenever there was a change:

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

Take note of the onchange_callback parameter, responsible for saving the editor's contents to the textarea. This setup ensures that content is saved every time an "undo level" is added, triggered by user input or other events like cursor movements or blurring of the editor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a TypeScript class object with specified constructor arguments

I've been working on a function that is supposed to execute the init method of a class and then return an instance of that class. However, I'm running into issues with maintaining the constructor and class types. This is what I have tried so far ...

Are there any disadvantages to an API endpoint not waiting for a promise to complete before returning?

Is it considered acceptable to invoke an async task within an express endpoint without awaiting it before returning to the caller if confirmation is not necessary? While this method may restrict error handling and retry options in case of async task failu ...

Deleting the stylesheet exclusively within the confines of the React application window

Here is an image that will help illustrate the issue: https://i.stack.imgur.com/VA7fw.png If you want to check out the code sandbox for this problem, you can visit: https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html I am current ...

Firestore TimeStamp.fromDate is not based on UTC timing

Does anyone have a solution for persisting UTC Timestamps in Firestore? In my Angular application, when I convert today's date to a Timestamp using the code below, it stores as UTC+2 (due to summer time in Switzerland). import {firebase} from ' ...

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Despite having an image prop in CardMedia, I kept encountering this error. Here is a snippet of the code: Error description: const Post = ({ post, setter }) => { const classes = useStyles(); return( <Card className={classes.card} ...

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

Restricting the input range with JQuery

Need assistance with limiting user input in a text box for amounts exceeding a specified limit. Attempted using Ajax without success, considering jQuery as an alternative solution. Any expertise on this matter? function maxIssue(max, input, iid) { v ...

The height of the TinyMCE editor refuses to adjust

Hello, I'm new to utilizing Tinymce within an AngularJS environment. Specifically, I am working with the Tinymce library version 4.3.13. I have constructed some HTML and angularJS code to implement the Tinymce editor, but I've encountered a probl ...

A method for merging the values of three text fields and submitting them to a hidden text field

<label class="textRight label95 select205">Cost Center: </label> <input type="hidden" name="label_0" value="Cost Center" /> <input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" /> <input type=" ...

Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling. Big thank you! The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which i ...

Opening a document with `document.open` will clear all event listeners

I've developed a Chrome extension that records user behavior while browsing web pages by adding event listeners to customers' web pages using a Chrome content script. The code in the content script looks something like this: var recordingEvents ...

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

I'm attempting to fetch the top 5 NFT collections based on volume and display them in a table format. However, I'm facing an issue where the data is not being mapped correctly and when I click the "get" button, all content on the webpage disappea ...

ReferenceError: 'exports' is undefined in the context of Typescript Jest

I'm currently delving into unit testing with jest and encountered an error that looks like this: > npm run unit > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771f181012374659475947">[email protected]</ ...

Is it possible to group an array of objects by a specific element?

Take a look at this example: JsFiddle Query: I'm dealing with the following JSON Array y= [ {"LngTrend":15,"DblValue":10,"DtmStamp":1358226000000}, {"LngTrend":16,"DblValue":92,"DtmStamp":1358226000000}, {"LngTrend":17,"DblValue":45,"DtmSta ...

Unable to execute any actions on object in JavaScript

I currently have two functions in my code: getRawData() and getBTRawData(). The purpose of getBTRawData() function is to retrieve data from Bluetooth connected to a mobile device. On the other hand, getRawData() function takes the return value from getB ...

Is it possible to include a border/stroke on a Raphael picture?

Currently, I am attempting to enhance a Raphael image element by adding either a border, stroke, or drop shadow. My end goal is to create an animated glowing border effect. Previously, I successfully implemented this on traditional HTML elements using Java ...

Tips for changing the TextField variant when it receives input focus and keeping the focus using Material-UI

When a user focuses on the input, I'd like to change the variant of the TextField. The code snippet below accomplishes this, but the input loses focus. This means the user has to click again on the input to focus and start typing. import React, { useS ...

Why do ES6 classes fail to set properties when an overloaded function is called within the constructor of the parent class?

I encountered a puzzling scenario while coding that has left me perplexed. Here's the situation: I am extending a class from a library, which serves as the "Parent"-class. It allows its subclasses to override the init-method for custom initialization ...

Unable to Retrieve Modified Content with $().text();

In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...