Notify the user before they navigate away from the current page

I need to implement a warning message for users before they close the page, but only if the data is being processed or uploaded to the server in my asp.net web application. I initially tried using the onbeforeunload javascript event, but it doesn't seem to be suitable for my specific case.

        $(document).ready(function () {

            $('.saveButton').click(function () {

                window.btnClicked = true;

            });
        });

        function closeEditorWarning() {
            if (window.btnClicked) {
                return 'It looks like you have been uploading something -- if you leave before submitting your changes will be lost.'
            }
        }

Answer №1

Could you share the implementation of how you are invoking closeEditorWarning()? I attempted a similar approach and it seems to be functioning as intended -

$(document).ready(function(){
    $("#save").click(function(){ window.btnClicked = true; }
    );
});

window.onbeforeunload = function(e){ 
    if(window.btnClicked)
        return "Are you sure you want to exit?";
}

Hopefully this solution proves useful.

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

Exploring AOP and Action Filters in the .NET Framework

Here are 2 inquiries: Would you classify Action Filters in MVC as Aspect Oriented Programming (AOP)? If so, is there a similar feature provided by .NET for non-MVC code (like a regular class library)? I am looking to implement logging in an application. ...

Incorporating bcryptjs alongside MongoDB

I am currently developing a feature to securely encrypt user passwords using Bcrypt for my Angular application, which is integrated with MongoDB for the backend operations. Here is the implemented code snippet: Data Model var mongoose = require('mo ...

JavaScript's forEach function is utilized for handling button events

Just getting started with JavaScript and I've run into a problem. Can anyone help me spot where I went wrong below? The button doesn't seem to be functioning as expected. <!DOCTYPE html> <html> <body> <button onclick =" ...

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

angular5: The ngFor directive will only function properly after the second button click

Here is my current situation: 1) When the user inputs a keyword in a text field and clicks on the search icon, it triggers an HTTP request to retrieve the data. 2) The retrieved data is then rendered in HTML using ngFor. The issue I am facing is that up ...

Using one payload.js file for all Nuxt static generated routes with identical data

I am facing a challenge with my NuxtJS site where I have only one page /pages/matrix/index.vue but numerous dynamic routes pointing to this page, all utilizing the same data set. During static build generation for deployment on Netlify, the size of the dis ...

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

What is the best way to implement lazy loading for headless UI Dialog components in a React

Is there a way to implement lazy loading for the headless ui Dialog component while preserving transitions? Below is the current implementation that almost works: // Modal.js const Modal = ({ isOpen }) => { return ( <Transition show={isOpen ...

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

Changing the Speed of CSS3 Transitions Dynamically

As I am working with CSS3 Transitions, my current query pertains to initiating the animation with: -webkit-transform: translate3d(-100%, 0, 0); Is there a method to augment the predetermined speed set using: -webkit-transition: all 10s linear; This tim ...

How can we create a reusable dropdown list that appears when clicking on different elements?

Imagine having different sections of a webpage that, when clicked, reveal a dropdown list right below the selected link. I've noticed some websites accomplish this by actually having just one dropdown list defined in the DOM, which then appears below ...

Best Practices for Iterating over Nested Objects and Arrays Using ng-repeat

I've been trying to use Angular's ng-repeat, but nothing seems to work for me. I'm attempting to loop through companies.users and display all the first names. Any assistance would be greatly appreciated! Thank you! <div ng-app="app" ng-c ...

Struggling to Play Sound on Vue Template

I attempted to implement the audio tag using a variable, but it was not functioning properly. Any assistance would be greatly appreciated. The following code is within the script tag: <script setup> import { ref } from 'vue' import data fr ...

What steps can I take to stop Google Maps from resetting after a geocode search?

As a beginner working with the Google Maps Javascript API v.3, I have written some code to initialize a map, perform an address lookup using the geocoder, re-center the map based on the obtained lat long coordinates, and place a marker. However, I am facin ...

I encountered a problem when trying to run the wcf

My service is hosted on the local IIS. I'm not sure why this error is occurring when I test the service on the browser. It works fine when I run it from Visual Studio, but when hosted on IIS, it stops working. This is my first time doing this. The s ...

utilizing the JavaScript SDK to send alerts to a user's friends on Facebook

I am attempting to send a notification to a user's friend using the JS SDK on a Facebook canvas app, but I'm encountering this error in the console: POST https://graph.facebook.com/16542203957691/notifications? 400 (OK) jquery.min.js:140 c.exten ...

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

Maintain the values of variables established in a userscript

Currently, I am working on a Tampermonkey script and facing an issue. In my script, I declared an array as var arr = ["alex", "felix"] which can be updated dynamically based on the script's usage. Each time there is a change, I update the value by ...

Is there a way to navigate to the adjacent values in a json array?

I've been struggling with this issue for quite some time now. I have a list of items that can be moved to a div when clicked. My goal is to navigate through the items in the list (json) by clicking on Next and Previous buttons. As someone who is rela ...

Encountering the issue of receiving an "undefined" object while trying to parse JSON

Trying to extract data from the AccuWeather API using a Node.js application. I managed to parse the response using the JSON.parse() method. However, when attempting to access certain nested objects, I encounter an undefined value. Being relatively new to t ...