Overlapping $ionicPopup's

ionic-v1
1

Hi all : )

I inject $ionicPopup into a $http interceptor and display a popup if for example, the app is not yet authenticated or if the device currently does not have an internet connection.

I have a page that makes two separate $http requests at the same time and so, if I am not authenticated, I get two popups saying “Please authenticate”, this is understandable, however, I would like to avoid this, especially as it’s the same message twice (if there are two different issues, that’s fine). Any pointers?

Also as a side issue, it seems if two popups are opened at the same time, the system fails to get rid of both backgrounds (you know, semi transparent black rect that fills the whole screen) meaning the app is then not usable after that point.

Thanks in advance
-Chris

1 Like
2

define a global variable for your service.
If one popup is open -> set variable to true.

If a request fails, check that variable.

After you close a popup -> set variable to false.
… thats it :wink:

1 Like
3

I have a similar problem…

User clicks a button to authenticate some numbers in a field, it only takes about 1-2 seconds for the check to be complete.

During some initial user testing, some users were tapping the button AGAIN between the 1-2 second authentication was complete, and the app was opening up two popups, and essentially freezing the app like @CT14_IT mentioned above.

What’s the best way to handle this?

4

i am working with promises if i send requests and so on.

before i send the request -> i set a flag, which disables buttons and forms to be submitted.
if the request gets rejected or resolved -> i reset the flag.

1 Like
5

Sort of figured it out while I was typing that last reply out… :smiley: :blush:
Here’s my popup function that solves that issue…

var openPopup = true;

// An alert dialog
     $scope.captureAlert = function(header,content) {
       var alertPopup = $ionicPopup.alert({
         title: header,
         template: content,
         buttons: [
           {
             text: '<b>OK</b>',
             onTap: function(e) { 
                     openPopup = true;
                     return true; 
                 },
             type: 'button-calm'
           }
          ]
       });
       alertPopup.then(function(res) {
         console.log('Logged Alert: ' + header);
       });
     };
1 Like
6

Thanks for the input!

I’m going to have to do that as well, to combat users with service that isn’t fast. I at least want to give the user the impression that something is happening…