CODEWITHSUNDEEP
javascriptangularjsionic-framework
Ali Dorosty
Ali Dorosty

Reputation: 149

ionic framework two popups in tandem

I have an ionic app where the user taps a button, then a popup shows up and then the user taps a button in the popup and another one shows up. This works fine in the browser but when I deploy it to an android device, after the second popup closes the page freezes and I can no longer tap the main button on the page.

Here's a short but complete app demonstrating my problem.

<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- version 1.0.0-beta.9 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script>
    angular.module("app", ["ionic"])
        .controller("controller", function ($scope, $ionicPopup, $timeout) {
            var popup1;

            $scope.popup1 = function () {
                popup1 = $ionicPopup.show({
                    template: '<button ng-click="popup2()">popup2</button>',
                    title: 'popup1',
                    scope: $scope
                });
            }

            $scope.popup2 = function () {
                $ionicPopup.alert({
                    title: "Popup 2"
                }).then(function () {
                    /*
                    $timeout(function () {
                        popup1.close();
                    });
                    */

                    popup1.close();
                });
            }
        });
</script>
</head>
<body ng-app="app" ng-controller="controller">
    <button ng-click="popup1()">popup1</button>
</body>
</html>

Upvotes: 3

Views: 6049

Answers (2)

user1498532
user1498532

Reputation: 73

My solution:

$rootScope.solidAlertPromise = $q.resolve(); // make the very first alert happen immediately

//lets create a reusable function to get rid of static and local problems
window.alert = function(message) {
  //chaining does the trick
  $rootScope.solidAlertPromise = $rootScope.solidAlertPromise.then(
    function() {
      //New Popup will rise as soon as the last Popup was closed (resolved). 
      //but it will rise immediately after closing the last Popup - definitely!
      return $ionicPopup.alert({title: 'solidAlert', content: message});
    }
  );
}; 


//Now we can call our function sequentially
alert('After max has closed this alert-popup, the next one will rise immediately!');
alert('Next one -press OK to get the nex one-');
alert('and so on');

That's just for eplanation purpose: We should have a look at the rejection-cases etc.!

$ionicPopup.alert

can be replaced with

$ionicPopup.show

I think.

Upvotes: 0

EmptyArsenal
EmptyArsenal

Reputation: 7464

The reason this isn't working is likely that the second popup is opening before the first one closes, which could be killing Ionic's knowledge that the first one exists. If you kill the first popup before the open the second one, that should solve the issue.

I see a few options:

1. Create your buttons in an Ionic way and use the onTap method

$scope.popup1 = $ionicPopup.show({
  template: 'Your template here',
  title: 'popup1',
  scope: $scope,
  buttons: [
    {
      text: 'Popup2',
      onTap: function (e) {
        $scope.popup1.close();
        return $scope.popup2();
      }
    }
  ]
});

2. Close popup1 first thing in popup2()

$scope.popup2 = function () {
  $scope.popup1.close();

  // Open popup 2
}

3. Open popup2 in a timeout

If the above don't work, put a timeout around the code in popup2 to give Ionic the time to close the first popup.

$scope.popup2 = function () {
  // Move to the bottom of the queue to let Ionic close the first popup
  $timeout( function () {
    // Load popup2
  });
};

Upvotes: 6

Related Questions