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. :)