Guide to monitoring the modifications made in a DNN text editor within a web form before submitting the page

In my endeavor to develop a JavaScript function that monitors changes made in a web form when the page is submitted, I have encountered an issue. While for regular .NET textbox or textarea fields, I can compare the value with the default value using the following code:

var ele = document.forms[0].elements;

for ( i=0; i < ele.length; i++ ) 
{
   if ( ele[i].value != ele[i].defaultValue ) return true;

}

The challenge arises when dealing with a DNN text editor on my webpage. The ele[i].value does not update when a user modifies the text in the text editor, resulting in it always returning false as it fails to track the changes.

Are there any attributes of the DNN text editor control that store the altered data?

asp.netjavascriptrichtextboxtext-editordotnetnuke

Answer №1

After some investigation, I have found a solution. By accessing the FCKeditorAPI within the DOM, we can extract the value of the DNN Rich editor.

var elements = document.forms[0].elements;

for (var i = 0; i < elements.length; i++) 
{
   if(elements[i].type == "hidden")
   {
      if(elements[i].id.toString().toLowerCase().indexOf("dnnrich") != -1 && elements[i].id.toString().toLowerCase().indexOf("config") == -1)
     {  

        for (var key in FCKeditorAPI.__Instances)
        {
            var editor = FCKeditorAPI.__Instances[key];
            if(editor.IsDirty()) return true;            
        }
     }
   }
}

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

Instructions for displaying a React component in the <main> element when employing react-burger-menu

Check out my code here. Utilizing react-burger-menu has allowed me to successfully implement the sidebar feature. The sidebar functionality is working as expected. My current challenge involves figuring out how to open the content for Home or GG within ...

javascriptreactjs

What is the best way to remove multiple elements from an array?

Currently working with React.js and facing an issue where I need to implement a feature to delete multiple items. However, after deleting each item, the page refreshes and does not delete the remaining items. How can I successfully delete multiple items? c ...

javascriptreactjsapiredux-sagaredux-reducers

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

What is the best method for retrieving information from MongoDB and presenting it in a table with Node.js?

I'm struggling to understand how to retrieve data from mongodb and display it in an html/ejs file. I have a button in the html/ejs file that, when clicked, should show all the data from a mongodb database collection. While I've come across simil ...

javascriptnode.jsmongodbejs

Tips for parsing information from a text file and displaying it on a website in table format

Would like to create a 2x4 table where the first column has a dropdown for selection. Upon choosing an option, the associated data will populate the other 3 columns. I'm new to this, so please bear with me. Using x, y, z as placeholders, the data wil ...

javascripthtmlcssdropdown

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

Utilize AJAX/JS and Django to seamlessly upload files

This is the form for my popup window. <div class="popup media-upload-form"> <div class="border cf"> <div class="close">X</div> </div> <form class="cf" action="" method="POST" enctype="multipart/form-data"> ...

javascriptpythonajaxdjango

The SelectCommand of SqlDataSource is dynamically set

Using a SqlDataSource and aiming to avoid lengthy queries directly in the code, I attempted to create a Query class that returns the desired query as a string. The code snippet I used resulted in an error message stating "Server tags cannot contain <% . ...

asp.netmysqlsqldatasourceselectcommand

What is the best way to invoke functions with input of type 'number'?

As someone new to HTML, I have an input field with type=number: <input type="number" min="1" value="1" id="amount-input" (click)="chooseStanding(standingspot.priceCategory)"> When the (click) event i ...

javascripthtml

Are there any new ASP.NET Update Panel components available for download?

Once upon a time, ASP.NET AJAX was known as the Atlas Alpha version. During that era, there were various projects dedicated to update panels such as Comfort ASP, FastPage (my personal favorite:)), MagicAjax, and ZumiPage. However, it seems like they have a ...

asp.netajaxupdatepanelatlas

Unable to access the property 'function' of an undefined value

I've been attempting to call a function from another function within my React application. However, I am encountering an error that reads: Error in login TypeError: Cannot read property 'loadDashboard' of undefined. Despite researching simil ...

javascriptreactjsecmascript-6

Create a dynamic onClick event script and integrate it into Google Optimize

I need to incorporate a button element into my website using Google Optimize for an experiment. This button needs to trigger a specific script depending on the variation of the experiment. I have attempted two different methods: <button id="my-button" ...

javascripthtmldynamic-htmldynamic-script-loadinggoogle-optimize

Guarding Vue.js routes when navigating based on asynchronous authentication state requests

I have integrated Firebase for authentication in my Vue.js application. The main (main.js) Vue component handles the authentication logic as follows: created() { auth.onAuthStateChanged((user) => { this.$store.commit('user/SET_USER&apo ...

javascriptvue.jsfirebase-authenticationvue-routervuex

Vue.js Issue: Image not properly redirected to backend server

Having an issue with my Vue app connecting to the backend using express. When I attempt to include an image in the request, it doesn't reach the backend properly. Strangely though, if I bypass express and connect directly from the Vue app, everything ...

javascriptvue.jsexpressfileexpress-fileupload

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

app.module.ts bootstrap: [AppComponent], declarations: [AppComponent], imports: [ CoreModule, HelloFrameworkModule, ], providers: [{ provide: Logger, useFactory: loggerProviderFunc(1), }] ...

javascriptangulartypescriptdependency-injectionangular5

Visuals derived from JSON information

Here is the JSON data retrieved from a web API: [{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/download (1).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\&bsol ...

javascriptangularjsjsonasp.net-web-apiscripting

Injecting dynamic data into a function parameter with Angular 1 Interpolation

In my code, I have a feature that alters the text displayed on a button depending on certain conditions. $scope.text = 'Wait'; if(Number($scope.x) == Number($scope.y)) $scope.text = 'Go' else if(Number($scope.x) < Number($scope ...

javascripthtmlangularjs

Updating the contents of a DIV element in a Django application

Seeking a solution to replace the current contents of a DIV with new contents using Ajax GET method. Issue is that the entire page is loading into the DIV instead of just the desired content. function updateContent(){ var data = $('#Data ...

javascriptjqueryhtmlajaxdjango

A function in Jasmine for testing that returns a promise

I have implemented the following function: function getRepo(url) { var repos = {}; if (repos.hasOwnProperty(url)) { return repos[url]; } return $.get(url) .then(repoRetrieved) .fail(failureHandler); function ...

javascriptunit-testingjasminetddpromise

The module 'AppModule' encountered an unexpected value 'FusionChartsModule' during import. To resolve this issue, make sure to include a @NgModule annotation

How can I integrate the FusionChartsModule into my app.module using Angular 8? Here is the code snippet: *error:Unexpected value 'FusionChartsModule' imported by the module 'AppModule'. Please add a @NgModule annotation. *, I a ...

javascripthtmlangularfusioncharts