CODEWITHSUNDEEP
javascripthtmlangularjsmodal-dialogbootstrap-modal
JRulz
JRulz

Reputation: 517

$location.path takes time to work after bootstrap modal hide (hide.bs.modal) event is fired

    // show mymodal
    // register an event to route to a different page once modal is closed
    $('#myModal').on('hide.bs.modal', function() {
        if ($location.path() == '/') {
            $location.path('/ser/mynewpath');
            alert("fired"); // just to check the event was fired
        }
    });
    // open the modal
    $('#myModal').modal('show');

I'm calling the bootstrap modal #myModal using JavaScript. Once I close the modal I want to direct the page to a different path. The problem is it takes 30sec - 1 min to direct the page after closing the modal. I added an alert to check if the event is getting late to fire, but I get the alert the moment I close the modal, but the page is only directed after a long wait.

Sometimes when I click somewhere else it will get fired. But this is not happening always - at times the long wait is inevitable.

My initial guess was since I'm using the bootstrap modal and using the $location, angular might not detect it the moment modal gets closed. But now it seems like a dumb guess. I also tried changing the event trigger to 'hidden.bs.modal' but got the same result.

I will try adding angular $modal and see if this solves, will post the updates. But meanwhile I'm thrilled to understand the cause behind this delay in this setup.

Thank you.

Upvotes: 0

Views: 300

Answers (1)

Arun Ghosh
Arun Ghosh

Reputation: 7754

Since it is jquery event angular will not be aware of this event immediately. It will have to wait till the next digest cycle and that is causing the delay. You try using $scope.$apply

$scope.$apply(function() {
        if ($location.path() == '/') {
            $location.path('/ser/mynewpath');
            alert("fired"); // just to check the event was fired
        }
}

Upvotes: 1

Related Questions