Could a personalized "exit page" confirmation be created?

Question

Could a personalized "exit page" confirmation be created?

I am looking for a solution that will allow me to pause the execution of my code, display a dialog box, and then resume execution only after a specific button is pressed.

For example, if a user navigates from one page to another on my website, I want a dialog box to appear. If the user confirms the action by clicking a button in the dialog box, then the navigation should continue.

I am aware of the $routeChangeStart event, which provides information about the next route, but it seems to only handle preventing the route change. I am interested in finding a way to delay the route change and trigger it later.

My ideal approach would involve using event.preventDefault() within $routeChangeStart, storing the details of the next route, and then triggering the route change confirmation through user interaction.

Does anyone know how I could reapply a route change? One potential method could involve manipulating the originalPath using the params object and $location, but I am curious if there is a more direct way to achieve this.

javascript angularjs

Answer 1

Answer №1

It is necessary to utilize string-parsing in this scenario.

If you prefer to handle the confirmation asynchronously, the recommended approach is to prevent the event by default, prompt the user for confirmation, and if granted, set a flag before using $location.url(...) to navigate to the desired page.

app.controller('myCtrl', function ($location, $scope, UserConfirm) {
    $scope.$on('$locationChangeStart', function (evt, next, prev) {
        if (!$scope.exitConfirmed) {
            evt.preventDefault();
            var url = extractUrl(prev, next);
            UserConfirm.confirm('Are you sure you want to leave ?').then(
                function (confirmed) {
                    if (confirmed) {
                        $scope.exitConfirmed = true;
                        $location.url(url);
                    }
                }
            );
        }
    });
    ...
});

The extractUrl() function could be implemented as follows:

function extractUrl(prevAbsUrl, nextAbsUrl) {
    var idx = prevAbsUrl.length - $location.url().length;
    var withNumSign = nextAbsUrl.substring(idx);
    var pureUrl = withNumSign.substring(withNumSign.indexOf('/'));
    return pureUrl;
}

Take a look at this brief demonstration.

Answer 2

It is necessary to utilize string-parsing in this scenario.

If you prefer to handle the confirmation asynchronously, the recommended approach is to prevent the event by default, prompt the user for confirmation, and if granted, set a flag before using $location.url(...) to navigate to the desired page.

app.controller('myCtrl', function ($location, $scope, UserConfirm) {
    $scope.$on('$locationChangeStart', function (evt, next, prev) {
        if (!$scope.exitConfirmed) {
            evt.preventDefault();
            var url = extractUrl(prev, next);
            UserConfirm.confirm('Are you sure you want to leave ?').then(
                function (confirmed) {
                    if (confirmed) {
                        $scope.exitConfirmed = true;
                        $location.url(url);
                    }
                }
            );
        }
    });
    ...
});

The extractUrl() function could be implemented as follows:

function extractUrl(prevAbsUrl, nextAbsUrl) {
    var idx = prevAbsUrl.length - $location.url().length;
    var withNumSign = nextAbsUrl.substring(idx);
    var pureUrl = withNumSign.substring(withNumSign.indexOf('/'));
    return pureUrl;
}

Take a look at this brief demonstration.

Answer 3

Answer №2

Using the $locationChangeStart event, you can access the complete URLs of both your current and future destinations without the need for parsing.

My approach to handling this was as follows:

function confirmLeaving(evt, next, current) {
  if(consideringClosing)  //allow leaving
    return;

  evt.preventDefault();  //Display dialog instead of leaving.

  $('#dialogCancel').modal('show');
  consideringClosing = true;  //It's okay to leave if user tries again after opening dialog.
}   

$scope.$on('$locationChangeStart', confirmLeaving);

Within the modal, there is a "close without saving" button that triggers a $location back to the item list. Since consideringClosing is now true, the confirmLeaving function won't prevent the action. Additionally, the modal contains a cancel button that closes it and resets consideringClosing to false (ensuring the modal will reappear on location change).

Answer 4

Using the $locationChangeStart event, you can access the complete URLs of both your current and future destinations without the need for parsing.

My approach to handling this was as follows:

function confirmLeaving(evt, next, current) {
  if(consideringClosing)  //allow leaving
    return;

  evt.preventDefault();  //Display dialog instead of leaving.

  $('#dialogCancel').modal('show');
  consideringClosing = true;  //It's okay to leave if user tries again after opening dialog.
}   

$scope.$on('$locationChangeStart', confirmLeaving);

Within the modal, there is a "close without saving" button that triggers a $location back to the item list. Since consideringClosing is now true, the confirmLeaving function won't prevent the action. Additionally, the modal contains a cancel button that closes it and resets consideringClosing to false (ensuring the modal will reappear on location change).

Could a personalized "exit page" confirmation be created?

Answer №1

Answer №2

Similar questions

Node.js promises are often throwing Unhandled Promise Rejection errors, but it appears that they are being managed correctly

Looking for a solution to eliminate Parsing Error: Unexpected Token when developing with React? I've already implemented ESLint and Prettier

Tips for effectively managing asynchronous tasks

Tips for personalizing the color scheme of Material UI Stepper Step?

Execute supplementary build scripts during the angular build process

Step-by-step guide on positioning an image to show at the bottom of a div

A JavaScript function that smoothly scrolls an element into view while considering any scrollable or positioned parent elements

The latest error in the Next.js 13 app directory: React child is not valid (detected: [object Promise])

What sets asyncData apart from methods in Nuxt.js?

What is the process for importing a class (.js file) into a .vue file?

Steps to alter background image and adjust its height upon function activation

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

Mastering Angular Protractor for End-to-End Testing

Issue with database connection on iOS device seems to be causing trouble

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

Choosing the image that represents your website in Safari web previews

Mongoose is unable to update arrays, so it will simply create a new array

What is the best way to retrieve an array of objects that have a property matching another array?

The jQuery countdown plugin is yielding some unexpected outcomes

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able