The onbeforeunload event is activated in the parent page when it is specified in the child page

Seeking a way to activate the window.onbeforeunload method when a user attempts to refresh the browser, and display a message to prompt them to save their current work before leaving. I am currently working on an AngularJS application. Here is the URL of my landing page:

http:localhost:9000/#/parentPage/

Upon clicking a button, the user is directed to:

http:localhost:9000/#/parentPage/childPage1/:id

I have defined the method for loading in childPage1Ctrl:

window.onbeforeunload = function(){
    return "This is a message to remind you to save your experiment before leaving the page";
};

However, upon launching the application, the onbeforeunload method is triggered.

  1. How can I prevent this and only bind the method to that specific page?
  2. Is there a way to reload a specific child page and retrieve the id from the URL?

Any assistance on these matters would be greatly appreciated.

javascriptangularjs

Answer №1

To prevent memory leaks in your child controller javascript, remember to remove or unregister the onbeforeunload event when the controller's scope is no longer active.

$scope.$on('$destroy', function() {
    delete window.onbeforeunload;
});

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

JavaScript - incorrect order for compiling

Is the user already in my SQLite database? If the user exists: return 500 (ERROR!!) If the user does not exist: return 200 (OK) This is my Node.js + Express script running on the server side. app.post('/adduser', function(req, res){ db.se ...

javascriptjquerynode.jsexpresssqlite

How can CakePhp's $ajax->link be used to manipulate the result on the complete action?

Recently, I've started working with cakePhp to handle ajax requests using prototype. While my controller is returning the correct value, I'm struggling to figure out how to properly handle it when it comes back looking like this: <?php echo ...

javascriptajaxcakephpprototypejshelper

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...

javascriptasynchronous

Having trouble with state not updating correctly after making a fetch request within a useEffect hook in

In my React app with an Express backend, I am facing a challenge in updating the component state using the useEffect hook to trigger once when the component renders. Inside the useEffect, I fetch data from the Express server. const Favorites = ({ user }) = ...

javascriptreactjsfetchuse-effectuse-state

Autocomplete Data Origin

I'm currently exploring the use of Typeahead and implementing AJAX to fetch my data source: $(document).ready(function() { $('input.typeahead').typeahead( { hint: true, highlight: true, m ...

javascriptjqueryajaxtypeahead

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

How can we increase the accuracy of numerical values in PHP?

When performing a math operation in JavaScript, the result is: 1913397 / 13.054 = 146575.53240386088 However, when the same operation is performed in PHP, the result is slightly different: 1913397 / 13.054 = 146575.53240386 This discrepancy may be due ...

phpjavascriptfloating-pointprecision

Ways to capture the value of several images and add them to an array

When working on a multiple file upload task, I encountered the need to convert images into base64 encoded strings. My form consists of two fields, one for first name and another for image upload. The user can enter their name, upload multiple photos, and c ...

javascriptjqueryjsonforeachbase64

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

How do I connect to a different application's view?

When working with a view that has tiles, I am looking to click on one of them and be directed to a different application that I have created. In typical cases, I would specify the view folder for navigation. However, when attempting something similar for ...

javascriptsapui5

Bizarre symbols observed while extracting data from HTML tables produced by Javascript

I am in the process of extracting data from Specifically, my focus is on the "tournament-page-data-results" div within the source code. Upon inspecting the HTML source code, the data does show up, but it appears with a mix of real information and random c ...

javascriptrweb-scrapingencoding

concealed highcharts data labels

I attempted to create a bar chart using Highcharts, and initially it worked fine. However, I encountered an issue when displaying multiple indicators - the datalabels for certain data points are hidden. For example, the datalabel for "provinsi aceh" is not ...

javascripthighcharts

Issue with Vue JS function not providing the desired array output

I declared a property in my data model like this: someArray: [] A function returns an array: getMyArray: function (someId) { var result = [7, 8, 9, 10]; return result; } I'm assigning the result of the function to m ...

javascriptvue.js

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

Currently, I am attempting to decrease the size of my AngularJS JavaScript code (using SquishIt). Within my module, there is a service injected as a function argument, as shown below. var myapp = angular.module('myapp', ['ngSanitize'] ...

javascriptdependency-injectionminifyangularjs

What is the best way to transform a string into React components that can be displayed on the screen?

Stored in my database are strings that contain partial HTML content, as shown below: “Intro<br /><br />Paragraph 1<br /><br />Paragraph 2” If I want to display this string within a new <p> element, what is a straightforwa ...

javascriptreactjs

Cannot access a Typescript method variable within an inline function

I've encountered an issue with my code involving loading values into the array usageCategory within an inline function. Despite successfully adding values to the array inside the function, I am unable to print them outside it. getAllUsageCategoryElem ...

javascripttypescriptvariablesscopeprotractor

It appears that the flex-grow property is not functioning as expected

I am working with a parent div and two children divs underneath it. I noticed that when I set the flex-grow property of the first child to zero, its width remains constant. However, if I add text to the second child, the width of the first child decreases. ...

javascriptcssflexbox

How can I use regular expressions to locate a React JSX element that contains a specific attribute?

Currently conducting an audit within a vast codebase, my task involves searching for all instances of a component where it is utilized with a specific prop. I believe that using regex could prove beneficial in this situation; however, the challenge lies in ...

javascriptregexreactjsjsx

What is the method for retrieving a variable from a Q Node promise?

I am currently developing a learning game utilizing Angular, Express, MongoDB, and Node. As part of my learning process, I have been exploring the use of promises to manage asynchronous operations effectively. One particular challenge I am facing involves ...

javascriptangularjsnode.jsmongooseq