Triggering an AngularJS function upon window close event

Can someone help me figure out how to call an AngularJS function when a window is closing? Currently, I have the following code:

app.controller("reportCtrl", function($scope, $http) {

$scope.deleteReport = function() {
    $http.get("/SCTrakker/api/deleteReport").success(function() {
    });
};

window.onbeforeunload = function(){
  $scope.deleteReport();  
}; });

The controller and angular libraries are loading successfully, so that's not the issue. However, the problem arises when attempting to close the window as the event doesn't execute and nothing happens. I'm at a loss for what else I can do.

Any suggestions would be greatly appreciated!

Answer №1

To trigger a function when the window is closed, you can use JQuery to bind to the "beforeunload" event.

$(window).bind("beforeunload", function() { 
    $scope.deleteReport();
})

Alternatively, you can also utilize the $locationChangeStart event.

$scope.$on("$locationChangeStart", function(){
    $scope.deleteReport();
});

Answer №2

Hooray! The issue has been successfully addressed!

After facing challenges with using AngularJS to communicate with the server, I found a solution by utilizing AJAX for the request and now everything is functioning flawlessly!

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

Is it possible for me to access a parent controller's variables?

Here is the code snippet I am working with: function MainController($scope) { $scope.items = ["Apple", "Banana", "Cherry"]; $scope.count = $scope.items.length; } function SubController($scope) { $scope.mainItems = MainController.items //trying to achieve ...

Verify whether the type of the emitted variable aligns with the specified custom type

Currently, I am in the process of testing Vue 3 components using jest. My main objective is to receive an emit when a button is clicked and then verify if the emitted object corresponds to a custom type that I have defined in a separate file. Below is an e ...

Utilizing Loopback Callbacks within a Looping Structure

While working in a for-loop, I encountered an issue where I needed to access the loop variable 'i' from within a callback function but it was not accessible due to closure restrictions. Despite attempting different methods such as using (i) or ca ...

Using jSLint in combination with Angular leads to an unexpected error regarding the variable "$scope"

When performing a jSLint check on my Angular-based app, I encountered an "Unexpected '$scope'" error. To replicate the issue, you can try inputting the code snippet below into jslint.com. I'm puzzled as to why the first function declaration ...

The problem with document.cookie: Functions properly on localhost but displays as empty when hosted on the web

I have been exploring various resources, but none seem to describe my unique situation. Currently, I am in the process of creating a website using ReactJS for the front-end and NodeJS with Express for the back-end. The production versions are accessible a ...

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

React and Redux: The Search for Missing Props

I am embarking on a new project using a different technology stack for the first time. In my previous job, I inherited an existing project with everything already set up. However, I am facing issues as my props are coming up as undefined and I am unsure wh ...

Change the background color of all cells in a Bootstrap table by hovering over a single cell

Here is the code for a bootstrap table: <body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0"> <div class="container-fluid h-100"> <div class="row float-right align-items-center" style="height: 5%;"> ...

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

Deactivate the button once the form has been submitted

Seems like a simple and common question, right? I also thought so. How can I achieve this in angularJS? CSHTML @using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { <div class="container" ng-ap ...

Is it possible to capture key events within a frame even when the source differs?

I'm having trouble setting up a keydown listener on my page. The issue is that there's an iFrame within the page, and whenever I click inside it and press a key, the handler doesn't work. I've tried different methods from online resourc ...

Is it possible to extract attribute names of a DOM object using angular.element? If so, what is the process? If not, is there another way to access this information within Angular?

Is it possible to achieve this? If so, how can we accomplish it? Here is what I have attempted: // Assuming domObj is a dom element var ngObj = angular.element(domObj); var attrNames = ngObj[0].attributes; For example, let's consider the following d ...

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

Associating information with a dropdown menu

My goal is to bind a drop-down using a global variable (the array name). The binding works correctly here: Click here - dropdown is populating fine var name = ['us', 'china', 'kenya', 'us', 'china', &ap ...

Convert an array of JSON objects into a grid formatted time table using the

I am using Next.js 10 to create a timetable or schedule similar to the one below: bus stop time 1 time 2 time 3 {props[0].bus stop} {props[0].times[0]} {props[0].times[1]} {props[0].times[2]} ... {props[1].bus stop} {props[1].times[0]} {props[1] ...

Issue: It seems like there is an error with using functions as a React child. Uncertain about the exact location

This specific issue is one of the two errors I have come across in the same application referenced in my previous inquiry. The first error encountered is as follows: Warning: Functions are not valid as a React child. This may occur if you mistakenly return ...

Utilize JavaScript to enable printing capabilities for multiple printers

Does anyone know how I can print two different types of documents on two separate printers without the print window showing up? I typically use "Always print silent" on Firefox to avoid the print window, but this won't work for printing on two differe ...

Angular: Issue with the functionality of BehaviorSubject

Seeking assistance in retrieving the current value of a BehaviorSubject in Angular. I utilized these lines to print and check its content on the console: console.log(this._isNumeric) console.log(this._isNumeric.getValue()) However, the output shows: close ...

The analytics event code is visible in the source code, but is not displaying in the console

I am facing an issue with a website built on Umbraco and it has me completely stumped. I have set up event tracking for Analytics on several download buttons, and while most of them are functioning properly, there is one button causing me trouble. When I ...

Storing an updated file (including a revised array of subdocuments) within a Mongoose schema

Here is the current code snippet I am working with: User.findOne( { "subUsers.email" : userEmail }, { subUsers : { $elemMatch: { email : userEmail } } }, fu ...