Ensure you save the form before navigating to a different one

Utilizing Asp.net JavaScript and C# for my project.

In the content page, there is a data entry form on the right side with links on the left in the master page. If a user leaves the page without submitting the form and clicks the cancel button, they should be prompted to save any changes made. I am aware that I can use window.onbeforeleave to display a confirmation message.

The current issue at hand is as follows:

  1. Upon clicking a link, the control moves to execute the code behind page of the clicked link before displaying the confirm message. This behavior is caused by a JavaScript function being called on click, containing the following code:

    window.location.href = 'anotherpage.aspx'

  2. The confirmation message only appears after the code execution.

I am looking for a way to display the confirmation message first.

Embedding the confirmation message directly into the JavaScript function is not feasible as multiple links exist on the left menu, each requiring different logic to check for unsaved forms.

Any suggestions or solutions would be greatly appreciated.

javascriptasp.net

Answer №1

To enhance the efficiency of your form validation, I recommend utilizing jQuery for a method known as a 'dirty check'. There are two primary approaches you can take to implement this technique:

  1. Utilize jQuery's data feature:

  2. Consider using a jQuery plugin specifically designed for dirty checking:

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

What is the relationship between Protractor's implicit wait and explicit wait mechanisms?

There is a common misunderstanding when the implicit wait time is set lower than the explicit wait: var timeOut = 5000; var search = element(by.xpath(`//*[@name='qwer']`)); browser.manage().timeouts().implicitlyWait(4000); browser.ignoreSynchron ...

javascriptseleniumwebdriverprotractorwait

It's quite baffling: How come the arrangement of my objects becomes disorganized following an ajax request even though I haven't made any modifications?

I am experiencing an issue where the objects retrieved from two nested ajax calls to the server are not in ascending order despite being ordered correctly by the server. The first ajax call successfully returns XML data with objects sorted by date in ascen ...

javascriptjqueryajaxjquery-events

Displaying an 'undefined' message in a JavaScript alert box

Hello! Just made the switch from C#/C++ to JavaScript recently and I'm really enjoying it. I've encountered a behavior that has me scratching my head, can anyone help explain? So here's what's happening: when I run this script, I see ...

javascript

Execute an Ajax request only when the specified element is present on the webpage

Consider this .ajax() function as an example: function trend() { return $.ajax({ url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //fetching the API type: 'get&apo ...

javascriptjqueryajax

What is the method to retrieve the base host in AngularJS?

I need assistance with the following URL: https://192.168.0.10/users/#!/user-profile/20 When I use $location.host, it returns 192.168.0.10 However, I only want to extract https://192.168.0.10 What is the best way to achieve this? ...

javascriptangularjslocation

What is the purpose of using a height selector in jQuery CSS

I'm trying to set equal height for divs with the class name "modelCode" using a custom function. However, when I run the function, it sets the height to 0px in the element style. Previously, I used the .height() method which worked perfectly. Any idea ...

javascriptjqueryhtml

Exploring the applications of the `this` keyword within a jQuery-based JavaScript object

Recently, there has been a challenge in creating a JavaScript object with the specific structure outlined below: function colorDiv(div){ this.div=div; this.div.bind("click",this.changeColor) this.changeColor(){ this.div.css(" ...

javascriptjquerythis

What is causing the problem preventing me from successfully downloading data from MongoDB using GridFS?

I've been working on an application that involves storing files in MongoDB. I managed to upload files using the GridFS library, but I have been struggling to access the data. Every time I try to load file metadata with the following request, I keep ge ...

javascriptnode.jsmongodbgridfs

When utilizing a variable as an attribute name in a Mongoose query, the expected result is not being

When using Mongoose to count documents with a specific attribute, I encountered an issue where the correct value was not returned when using a variable inside a loop for the attribute name. For example, the code snippet below works as intended: Artist.cou ...

javascriptnode.jsmongodbexpressmongoose

Creating interactive Plotly graphs with C# code-behind

I'm currently working on a project where I am trying to create a webpage that generates Plotly graphs dynamically based on changing files. However, I've run into an issue with accessing plotly functions from the codebehind using ScriptManager.Reg ...

c#asp.netcode-behindplotly

Using Javascript to set up a callback that alerts when a script file is done loading with the attributes "async" and "defer"

My app is loading the platform.js file asynchronously with the attributes of async defer. <script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer> </script> I am looking for a callback function that will alert m ...

javascript

Converting Array Class into an Array of Arrays using Typescript

Looking to convert an array class in typescript and pass it to another source. Seeking help on achieving this task in a clean and efficient manner. data : target[] = [{Name : "XXX", Age : "31",DOB : "20-12-1988", Resource: "Java"}, {Name : "YYY", Age : "2 ...

javascriptjquerytypescript

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

javascripthtmlangularjstwitter-bootstrap

Transforming a Standard Query into a JSON Clause Hierarchy

I am looking to create a query system for my application that can be utilized by external systems for configuring based on specific conditions. My plan is to utilize a JSON Clause tree on the backend, which will be evaluated recursively. [ "AND&quo ...

javascriptjavajsonparsingtext-parsing

Using bootstrap-table to fetch data from a MySQL database using an Ajax POST request

I need assistance with my code as I am struggling to populate a bootstrap-table with data from a MySQL database. I suspect that the issue lies in the format of the data being sent, which may not be compatible with the requirements of bootstrap-table. Despi ...

javascriptphpajaxbootstrap-table

Transform OKTA Observable into a practical string variable

I'm currently in the process of developing a service in Angular 12 that retrieves a "User" object, with OKTA being used for authentication. My goal is to streamline the process. I can easily obtain the family name as an Observable using the following ...

javascriptangulartypescriptrxjsokta

Guide for pointing asp.net web.config connections to a docker container for database connections

I am currently exploring the process of utilizing an asp.net 4 web application with a web.config containing connection strings, along with a sql server database storing persistent data, and running them in separate docker containers. One option is to crea ...

asp.netasp.net-mvcdocker

What causes Node.js to generate an extra error message when I use try/catch in my code?

I am encountering an issue where I am using a try/catch block inside an async function, but receiving additional error messages from Node.js. Here is my code snippet: const work = count => { const promise = new Promise((resolve,reject) => { ...

javascriptnode.jspromise

Redirecting the parent window in ASP.NET using an iFrame

Can a response.redirect be used within an iFrame to redirect the entire page, making the destination page viewable in full screen instead of confined within the iFrame? Here is the current code behind: public partial class ServerResult : System.Web.UI.Pa ...

htmlasp.netiframe

Initiate the function one time

The Introduction: I need assistance with a form that triggers a jQuery function when a button is clicked. The issue arises after the initial execution, as the function continues to run one more time. My dilemma is figuring out how to ensure that the funct ...

javascriptjqueryangularjs