Internet connection error message - Windows 8 Application with Javascript

Question

I am trying to add a basic detection script for my application to allow it to display an error message when a call to WinJS.xhr fails.

I have every WinHS.xhr call the following function onerror (using the 2nd param of .done()) and that part is working great.

function connectionError() {
    var msg = new Windows.UI.Popups.MessageDialog("There was a connection error while trying to access online content. Please check your internet connection.");

    // Add commands and set their CommandIds
    msg.commands.append(new Windows.UI.Popups.UICommand("Retry", null, 1));

    // Set the command that will be invoked by default
    msg.defaultCommandIndex = 1;

    // Show the message dialog
    msg.showAsync();
}

The problem arises when i display the dialog. For some weird reason i get an "Access Denied" error message when trying to show the dialog. I checked the meaning of that message and it seems to be some unaccomplished promise somewhere if i understood correctly, although i don't see any way to apply this to my situation.

Any help regarding this error is appreciated!

Answer 1

The problem you are facing here is that you cannot stack multiple message dialogs on top of each other -- e.g you can only display one at a time. I solved this in my application using the following code:

    (function () {
        var alertsToShow = [];
        var dialogVisible = false;

        function showPendingAlerts() {
            if (dialogVisible || !alertsToShow.length) {
                return;
            }

            dialogVisible = true;
            (new Windows.UI.Popups.MessageDialog(alertsToShow.shift())).showAsync().done(function () {
                dialogVisible = false;
                showPendingAlerts();
            })
        }
        window.alert = function (message) {
            if (window.console && window.console.log) {
                window.console.log(message);
            }

            alertsToShow.push(message);
            showPendingAlerts();
        }
    })();

This will queue them up and display them one-after the other in succession. Clearly this won't work for your case, but this should be a good starting point. :)

Answer 2

The important thing here is to have a global variable to determine if the dialog is visible or not. Dominic's code is good for showing messages from array one after other, but if you want to show only one message without getting an error using your example, should look like this:

var dialogVisible = false;

function connectionError() {
    var msg = new Windows.UI.Popups.MessageDialog("There was a connection error while trying to access online content. Please check your internet connection.");

    if (dialogVisible) {
        return;
    }

    dialogVisible = true;

    // Add commands and set their CommandIds
    msg.commands.append(new Windows.UI.Popups.UICommand("Retry", null, 1));

    // Set the command that will be invoked by default
    msg.defaultCommandIndex = 1;

    // Show the message dialog
    msg.showAsync().done(function (button) {

        dialogVisible = false;

        //do whatever you want after dialog is closed
        //you can use 'button' properties to determine which button is pressed if you have more than one
    });
}