CODEWITHSUNDEEP
jquerytwitter-bootstrap
kacpr
kacpr

Reputation: 392

Bootstrap: Opening modals in sequence

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?

Upvotes: 1

Views: 1441

Answers (1)

Mar Scheber
Mar Scheber

Reputation: 66

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');                        
                }

Upvotes: 2

Related Questions