Bootstrap: Opening modals in sequence

Question

I'm trying to build my own message prompt, error, warning etc. plugin, but I would like to allow the messages to queue.

The way I've done it was to include a single modal in my html (this way I can also include there standard names for type of message like 'Error', 'Warning' or their translation using JSTL) and call it using:

function message(messageText, messageType) {
    $('#message').text(messageText);
    $('#messageIcon').removeClass();
    if (messageType == messageTypes.ERROR) {
        $('#messageIcon').addClass("glyphicon glyphicon-remove-circle text-danger");
        $('#messageHeader').text($(" " + '#ERROR').text());
    } else if (messageType == messageTypes.WARNING) {
        $('#messageIcon').addClass("glyphicon glyphicon-warning-sign text-warning");
        $('#messageHeader').text(" " + $('#WARNING').text());
    } else if (messageType == messageTypes.INFO) {
        $('#messageIcon').addClass("glyphicon glyphicon-info-sign text-primary");
        $('#messageHeader').text(" " + $('#INFO').text());
    }
    $('#messageModal').modal();
}

But this allows only to change the modal while its still being displayed, so it results in only the last message being shown. I've tried wrapping the code of that function in:

$('#messageModal').on('hidden.bs.modal', function (e) {
    //above code
}

I thought it was logical to only fire the function if modal is being in its hidden state... but that doesn't work. Is there any way to fix it or am I going the wrong way to do this?

score 2 · Accepted Answer · edited May 23 '17 at 12:13

Implement messaging in queue using jQuery.queue(). For more info check out https://stackoverflow.com/a/3314877/383474

I'v leaved your function without any modifications, only added some messages to the queue, and added button to launch the queue one by one..

                var messages = $({});
                var messageTypes = {ERROR: 'ERROR', WARNING: 'WARNING', INFO: 'INFO'};                    
                $.each([
                    {message: 'message1', type: 'ERROR'},
                    {message: 'message2', type: 'WARNING'},
                    {message: 'message3', type: 'INFO'}],
                    function(i, data)
                    {
                        messages.queue('messages', function() 
                        {
                            message(data.message, data.type)
                        }); 
                    }
                );

                $("<button>", {
                    text: 'show message', 
                    click: function () {
                        showNextQueuedMessage()
                    }
                }).appendTo('body');   

                function showNextQueuedMessage()
                {
                    messages.dequeue('messages');                        
                }

Can you suggest how I start showNextQueuedMessage()? I know I can call it when dismissing the modal by pressing its 'x' button, but how should I start the queue without user having to press any button? — kacpr, Jun 13 '14 at 10:38
When I call showNextQueuedMessage() immediately after adding a message to the queue it only displays one message. But I think it might have to do with the fact I am using ajax and a its result is used as one message, while a few lines after that I add a second message (not checking ajax call was done). This causes only that last one (non ajax) message to be displayed. I'll see if waiting for the ajax call to complete will help, but any suggestions are welcome as well. — kacpr, Jun 13 '14 at 11:01

Bootstrap: Opening modals in sequence

1 Answers1