CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
tommaso capelli
tommaso capelli

Reputation: 930

Twitter Bootstrap: close modal wait for close and open a new one

I'm working on a project with Twitter Bootstrap. It consists of a single html page, and, with the help of jQuery, I fetch data and pages from server.
I have a unique modal for the whole project and I append data in the body everytime I show it. My problem is that when i close the modal and re-open it with new content, javascript stops working and no modal is opened. If i add some delay between closing and opening it works on some browsers but doesn't on others(chrome for example) and the code is really ugly.
I think I should bind an event when the modal is closed before opening a new one. Here's my code for opening a modal: 

function apriModal(header, messaggio, callback, conferma) {
    var re = new RegExp("</?\w+\s+[^>]*>");
    $("#modalHeaderTitle").text(header);
    if (messaggio.match(re)) {
        $("#modalBodyText").html(messaggio);
    }
    else {
        $("#modalBodyText").html("<p>" + messaggio + "</p>");
    }
    (!conferma) ? $("#modalConfirm").hide() : $("#modalConfirm").show();
    $("#finestraModal").modal('show')
    $("#modalConfirm").off().click(function () {
        if (conferma) {
            $("#finestraModal").modal('hide')
            conferma();
        }
    });
    $("#modalClose").show();
    $("#modalClose").off().click(function () {
        if (callback) {
            callback();
        }
        $("#finestraModal").modal('hide');
    });
}

Here's a little example: http://jsfiddle.net/thetom/nqNzr/15/
If you need more info ask. Thank you so much in advance!

Upvotes: 1

Views: 9309

Answers (1)

hubatish
hubatish

Reputation: 5250

This is an old question, but this is what I've been doing to close a modal, wait for it to close, and then open a new one:

//Hide the fromModal and open toModal
function switchModals(fromModal, toModal)
{
    $(fromModal).on('hidden.bs.modal', function (e) {
        $(toModal).modal('show');
        //clear this function so it doesn't show up if they exit the window again
        $(fromModal).off();
    });
    $(fromModal).modal('hide');
}

Not sure what some of the regex stuff you're doing up there is, but this function does the basics. Call it like 

switchModals("#ModalToClose","#ModalToOpen");

Upvotes: 14

Related Questions