Ionic framework, displaying two ionicLoading dialogs after one another

Question

I am using the ionic framework for a project and have run into an issue with the ionicLoading dialog.

I created a factory that I inject into the different controllers to display certain messages. I display the loading dialog, then call a factory that does a api call. When the service returns a error callback, I hide the dialog. The problem is that when I display a second dialog (right after the loading dialog was closed), it never displays.

This is my displayMessage factory:

factory('displayMessage', function($ionicLoading) {

var displayMessage = {
    // Just displays a loading dialog. You need to call hideDialog to hide it. See LoginCtrl for an example.
    showLoading : function() {
        $ionicLoading.show({
            templateUrl: 'templates/dialogs/loading.html'
        });
    },
    // Hides the loading dialog
    hideLoading : function() {
        $ionicLoading.hide();
    },
    // Hide loading dialog and display toast
    hideLoadingComplex : function(message){
        $ionicLoading.hide();
        $ionicLoading.show({
            template: 'Blah',
            duration : 1500
        });
    },
    // Displays a short toast message (1.5 seconds), requires a string value
    showToastShort : function(message) {
        $ionicLoading.show({
            template: message,
            duration : 1500
        });
    },
    // Displays a long toast message (2.5 seconds), requires a string value
    showToastLong : function(message) {
        $ionicLoading.show({
            template: message,
            duration : 2500
        });
    }
};

return displayMessage;

This is my controller (where I call the code, just the error callback):

.error(function(data, status, headers, config) {
            // If details checked client side, but service returns error code
            if (status === 400 && !(loginInfo.username.$invalid || loginInfo.password.$invalid)) {
                errorMessage = 'Incorrect Username or Password';
            } else if (status === 500) {
                errorMessage = 'Could not connect to server';
            }

            console.log("FAILED LOGIN" + errorMessage);
            displayMessage.hideLoadingComplex(errorMessage);
        });

All the code fires, the console right before I display the message fires, but the message is never displayed. Can anyone help me resolve this issue? Thank you in advance.

In the browser, if you inspect the network requests, are you sending off two requests somehow and thus causing two .error's to be triggered? Might be worth having the rest of the code to see if this is the case. — JimTheDev
– JimTheDev, Commented Aug 8, 2014 at 17:12
@JimTheDev, hi, I checked the code, the factory code is only executed once and no error messages are being displayed. The message just does not display right after I have called $ionicLoading, as can be seen in the code, I do call it, it just never fires. Testing on device in eclipse, nothing concerning dialogs shown in the log cat, only the console message is displayed, and loading dialog hidden. Sorry for repetition, sending from my mobile — Lunchbox
– Lunchbox, Commented Aug 9, 2014 at 8:56

Olga Akhmetova · Accepted Answer · 2015-11-05 13:27:27Z

0

I don't think you should be using $ionicLoading for displaying toast messages. Instead I would recommend you to use $ionicPopup. It can be totally customized to meet your need.

Also you can organize it better by creating two services for example LoadingService and ErrorDisplayService. Then you can use them directly from your controller. You can do something like

LoadingService.show();
$http.get(...).success(function(data){
      LoadingService.hide();
      ErrorDisplayService.show(data);
}).
error(function(){
      LoadingService.hide();
})

Good luck!

edited Nov 5, 2015 at 13:27

Olga Akhmetova

4901 gold badge6 silver badges19 bronze badges

answered Aug 8, 2014 at 17:15

Bipin Bhandari

2,69225 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lunchbox Over a year ago

Hi, I checked out the popup before I decided to use the ionicLoading, I am using this because it suits my needs, is pretty. How is using something like this any different from what I am doing now? Wouldn't it be possible to still encounter the same error? I am new to angularjs, how can I do what I am doing now using a service instead, would that make any difference? Thank you for the answer, but at the moment is does not answer my question

Collectives™ on Stack Overflow

Ionic framework, displaying two ionicLoading dialogs after one another

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related