Using Ionic Framework to synchronize two popups simultaneously

In my ionic app, the user can tap a button to show a popup, and then tap another button in the popup to reveal another one. Everything functions properly in the browser, but once I deploy it on an android device, the page freezes after closing the second popup and I'm unable to tap the main button.

Below is a brief yet comprehensive example of the issue:

<!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>

Answer №1

It seems like the issue here is that the second popup is appearing before the first one closes, causing Ionic to not recognize the existence of the first popup. To fix this, make sure you close the first popup before opening the second one.

Here are a few approaches you can take:

1. Design your buttons in an Ionic-friendly way and utilize 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 at the beginning of popup2()

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

  // Open popup 2
}

3. Delay the opening of popup2 using a timeout

If the previous methods don't work, try wrapping the code inside popup2 in a timeout function to give Ionic enough time to close the first popup.

$scope.popup2 = function () {
  // Put this function at the end of the queue to ensure the first popup is closed by Ionic
  $timeout( function () {
    // Load popup2
  });
};

Answer №2

Here is how I tackled this issue:

$rootScope.solidAlertPromise = $q.resolve(); // ensuring the first alert appears immediately

// Creating a function to handle dynamic popup alerts
window.alert = function(message) {
  // Using promises for sequential display of alerts
  $rootScope.solidAlertPromise = $rootScope.solidAlertPromise.then(
    function() {
      // Each new popup displays right after the previous one is closed
      return $ionicPopup.show({title: 'solidAlert', content: message});
    }
  );
}; 

// Demonstrating usage of our custom alert function
alert('After closing this alert, the next one will appear instantly!');
alert('Press OK to proceed to the next alert');
alert('Continuing in this manner');

This code snippet serves as an example and should be further analyzed for potential error cases.

$ionicPopup.alert

may potentially be replaced with

$ionicPopup.show

in my opinion.

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

Make sure to verify the existence of the file before retrieving its contents

Having some trouble with my ajax code that is meant to retrieve the contents of a text file on the server and display it in a textarea. When the file does not exist, a 404 error appears in the console. I attempted using PHP instead, but encountered an iss ...

What is the best way to identify and list distinct values within a MongoDB collection when the values are arrays of objects?

Is there a way to extract unique values from a collection that consists of an array of objects? While the distinct method works for strings and numbers, I'm facing a situation where the values are objects. Here's a simplified version of the mode ...

Troubleshooting an issue with an AJAX request

Having trouble getting the HTML back from an AJAX call - works in FF but returns "null" in IE when using alert(result.html()); Here's the code, any suggestions? Thanks! The errors variable is also null in IE. It doesn't matter what element I u ...

The result from Axios yields an [object Promise]

Utilizing the Flickr API, I am receiving feed images from their platform. In my Vue application, I have a computed property called filteredImages: computed: { filteredImages: async function() { return axios.get('https://api.flickr.com/services/feed ...

What is the Java method for clicking on an image button in WebDriver?

After entering all the required data and clicking on the Apply Now button, it is not saving. However, when attempting to create it manually, the process completes in less than 15 seconds. Attached is a screenshot for reference. Here is the relevant HTML ...

Text-field input experiencing issues with placeholder display

As a beginner in Angular, I may make some mistakes. I created a textField input using a directive in Angular: .directive('textField', function () { return { restrict: 'E', scope: true, require: 'ngModel ...

Avoiding Markups in Your Final React JS Rendering

Is there a way to eliminate the <div className='wrapper'></div> around <main></main> in the final rendering? class Projects extends Component { render() { return ( <div className='wrapper'> ...

Calculating totals within arrays that are nested, then providing the resulting object

Seeking assistance with a Javascript problem due to being new to the language. I am trying to create a function that calculates feedback scores based on specific criteria. The goal is to iterate through an array containing nested arrays and increment the ...

Stripes: Utilizing Table Pagination in HTML on a JSP Page

I'm currently utilizing the stripes java framework and have a jsp page that looks like this: <table id="mlTable" style=""> <col width="200"> <col width="250"> <thead> <tr> <th align="c ...

Angular "double-bind"

I am striving to optimize my application by utilizing one-time binding (::) as much as possible, especially when dealing with watches. However, I have encountered a scenario where I need to wait for a specific property of an object to be fetched from the ...

What is the best way to manipulate an input field in a controller if the input is not connected to an ng-model?

Received some backend-rendered HTML code. Here is the HTML code: <form name="mk" ng-submit="submit()"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input ty ...

An in-depth guide on troubleshooting routeProvider problems in Angular JS with code samples

I recently started delving into angular js and following tutorials on egghead.io. One of the examples I am working with involves routeProvider. I am using vs.net 2012 to test it out, but I am having trouble getting the templates or messages to display when ...

Steps to create a function in a .js file that uses ng-show conditions

I am in the process of validating a web page where the user inputs must be alphanumeric, have a maximum length of 45 characters, and be unique. Below is the code snippet I am working with. Is there a way to consolidate these three ng-show conditions into ...

Replace $scope with vm in ng-options directive

Below is the code that I am currently using: <select ng-model="setPriceClass" ng-options="price as price.label for price in priceClass"> </select> function ExampleCtrl($scope) { $scope.priceClass = [ {'label': ' ...

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

Ways to extract all hyperlinks from a website using puppeteer

Is there a way to utilize puppeteer and a for loop to extract all links present in the source code of a website, including javascript file links? I am looking for a solution that goes beyond extracting links within html tags. This is what I have in mind: a ...

Error encountered on PUT request: Headers cannot be set after they have already been sent

Every time I attempt a PUT request on the specific route, I encounter the error message "Can't set headers after they are sent". Despite receiving a 200 response, the data is not being updated in the database. Can anyone help me identify the issue her ...

Chrome app experiencing issues with Angular UI router

I am in the process of developing a chrome application using angularjs along with angular-ui-router. app.js var bar = angular.module('bar', [ 'ui.router', ]) .config(['$stateProvider', '$locationProvider', ...

Obtain a JavaScript object from an array filled with multiple objects

I am dealing with an array of four objects: This will return an array of objects var arrProducts = @Model.ViewModel_SessionObject.GetJsonProducts(); var arrProducts = [ {"RateCode":"IBE","RoomCode":"A1D","IDSharedAvailability":0,"TotalRooms":"4 room ...

What is the process for accessing ng-model data when default selection options have been utilized?

I have a piece of code that I used to bind my cost center information and set the default value. Controller: In my controller, I have some logic to populate a list called costCenterList. It contains the following data: $scope.costCenterList=[{ "costCente ...