Question

At the moment, I have a simple app that Ajax’s to a server, gets some JSON and then does something with it. I’d like to add in messages to show loading images and other info, but I’m struggling with simplemodal at the moment because it doesn’t queue modals, so it just fires everything as soon as it comes in. I’ve tried writing a queue for it, didn’t work out so well 🙂

The app should:

• Send ajax request (show modal, stop user clicking anything)
• Ajax complete (hide modal, allow clicking)
• If [for example] return JSON object has “message” set ( if (strJson.message)) { } ) show message as modal
• Allow user to close modal

While they were reading the message, if another ajax call has come and gone, and we have more modals to show, they should be queued to show when the current one is closed.

This seems like the kind of thing that should be out there but I can’t see anything that mentions it specifically.

Any ideas? 🙂

Answer 1

You can take the messages and put them into an array, then when the dialog is closed you can check to see if there is more messages, if there is pull the next message from the array and display it. Here it an example using jQuery UI Dialog.

HTML

<div id="dialog"></div>

JavaScript

var messages = [],
    addMessage = function (msg) {
        messages.push(msg);
        if (!$('#dialog').dialog("isOpen")) {
            displayMessage();
        }
    },
    displayMessage = function () {
        $('#dialog').html(messages.shift()).dialog('open');   
    };
$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        close: function () {
            if (messages.length > 0) {
                displayMessage();
            }   
        }
    });
    addMessage('First Message');
    addMessage('Second Message');
});