Is there a way to delay the closing of the browser until the server call is finished?

I am attempting to invoke a service that updates data upon browser close or tab close. The issue I am facing is that the service call uses $http and is asynchronous, so I believe that the browser unload event is cancelling the call and closing the browser. I would like the browser to wait until I receive a response or an error for that service call.

I have attempted to call e.preventDefault() and e.stopPropagation() but they are not having any effect.

function releaseDocument(e) {
    EventService.releaseDocument().then(function() {
        window.close();
    }, function() {
        window.close();
    });
}

$window.onbeforeunload = releaseDocument;
$window.onunload = releaseDocument;

Can someone please assist or suggest any alternatives to achieve the same goal?

javascriptangularjsajaxhttpbrowser

Answer №1

One possible approach could be utilizing synchronous AJAX calls. This suggestion is purely based on my own opinion.

When the browser/tab is about to be closed, a confirmation box will be displayed. Simultaneously, a synchronous call to your service will be made. This call should precede the line of code for displaying the confirmation box. By making the sync call execute before the confirmation, we ensure that every line is executed and the result is returned before the confirmation is triggered or the tab is closed. This allows for a limited time to execute the function.

 window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Do you want to close this browser";    
   releaseDocument()// this should be a synchronous function (similar to setting async:false in your ajax options) 

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

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 there a way for me to access the current templating in AngularJS?

I am looking to retrieve the HTML page as a string after AngularJS has finished rendering the template. My goal is to send this content to the server. .controller('MyCtrl', ['$scope', '$location', function ( $scope, $location ...

javascriptangularjs

What yields greater performance in MongoDB: employing multiple indexes or creating multiple collections?

Currently, I am developing an application that validates users through various 3rd party services such as Facebook and Google. Each user is assigned a unique internal id (uuid v4) which corresponds to their 3rd party ids. The mongoose schema for my user do ...

javascriptnode.jsmongodbmongoose

What is the reason behind the continual change in the background image on this website?

Can you explain the functionality of this background image? You can find the website here: ...

javascripthtmlcss

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

javascriptfunctionvue.jsecmascript-6setinterval

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

javascripthtmlruby-on-railsruby

My React project is altering the direction of my image

Below is the code snippet used to retrieve the user's favorite products import React, { useEffect, useState } from "react"; import { Pagination, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-red ...

javascriptnode.jsreactjsfrontendbackend

Module lazily loaded fails to load in Internet Explorer 11

Encountering an issue in my Angular 7 application where two modules, txxxxx module and configuration module, are lazy loaded from the App Routing Module. The problem arises when attempting to navigate to the configuration module, as it throws an error stat ...

javascriptangulartypescriptwebpack

Using HTML div tags to create a looping expression that can interact with Javascript

Currently, I am working on a Ruby on Rails project and I am facing a challenge with looping variables in an HTML form to reduce the amount of manual code I have to write. However, when I attempt to evaluate an expression in the id attribute, the JavaScript ...

javascriptjqueryhtmlruby-on-railsturbolinks

Having trouble getting a button's OnClick event to work with Bootstrap on iOS devices

Here is an example of the issue I'm experiencing: http://jsfiddle.net/d01sm5gL/2/ The onclick event functions correctly on desktop browsers, however when using iOS8, the event does not trigger. I have tried calling the function manually through the d ...

javascriptjqueryiostwitter-bootstrapmobile-safari

I am currently working on creating a navigation bar for a webpage using the express framework and pug library. However, when I navigate to the demo page endpoint, the screen appears blank and nothing is displayed

//In the following JavaScript code, I am trying to implement basic routing navigation using express. However, when I try to insert HTML into the demo page, nothing appears on the browser screen. const path = require("path"); const app = ...

javascriptnode.jsreactjsexpressmern

What is the process for printing with JQuery?

I have nested divs with dynamically generated images in my HTML code. My problem is that when I click the print button, I want the corresponding image to be printed. <div id="outputTemp" style="display:none"> <div id="rightoutputimgae"> <di ...

javascriptjquery

Creating a CSS animation to slide a div outside of its container is

I currently have a flexbox set up with two adjacent divs labeled as DIV 1 and DIV 2. By default, both DIV 1 and DIV 2 are visible. DIV 2 has a fixed width, occupying around 40% of the container's width. DIV 1 dynamically adjusts its width to ac ...

javascripthtmlcssangularcss-animations

Step-by-step guide on invoking a recursive function asynchronously in JavaScript

As I delved into the realm of creating a unique Omegle clone using Node.js and Socket.io for educational purposes, I encountered a challenge that has left me scratching my head. The socket ID of clients along with their interests are stored in an array of ...

javascriptnode.jsasynchronousrecursionsocket.io

Troubleshooting: Next JS 13/14 - Server component failing to update data upon revisiting without requiring a refresh

After attempting to retrieve the most recent liked items from a server component in next, I noticed that the data only displays when manually refreshing the page. Even when I navigate away and return, the data is not refetched automatically - however, usin ...

javascriptgoogle-cloud-firestorenext.jsnext.js13nextjs-dynamic-routing

window.onresize = function() { // code here

Here's an example of code I've been working on: $(document).ready(function (e) { adjustSize(); $(window).resize(adjustSize); function adjustSize() { var windowWidth = parseInt($(window).width()); if (windowWidth > ...

javascriptjquery

Executing the slideToggle() function in JQuery with javascript

Trying to create a script that expands and collapses when users click on either the text or image. The image is a basic arrow that switches to an arrow pointing upwards when the div is expanded. The issue I'm facing is that the text disappears when t ...

javascriptjqueryslidetoggle

Passing a variable from index.html to a script in Angular

I am attempting to pass the array variable 'series' to the script in HTML. Is there a way to do this? app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app ...

javascripthtmljqueryangular

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax

``on click of the back button of the browser, automatically submit the form

I'm facing a specific issue that I need help with. I have created a form with a hidden value, and I want it to be submitted when the user clicks the browser's back button. Although I've managed to control the backspace key, I haven't be ...

javascriptphpjqueryhtmlforms

Custom 505 handler for Railo and efficient ajax routing

I am struggling with a situation involving an external javascript file that includes a setinterval function to monitor file transfer completion between a server and a remote computer via a cfc. Strangely, the function works fine without a custom error hand ...

ajaxerror-handlingrelative-pathrailocfc