Destory CSS Bootstrap Modal

Question

I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.

My submit button in said modal has the following jQuery attatched:

$('#editTrackModal').modal('hide');

When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.

Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.

Is this possible?

Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.

Could you give us more code, how you load the remote URL? – josedefreitasc Jul 07 '15 at 11:50 — josedefreitasc, Jul 07 '15 at 11:50

score 0 · Answer 1 · answered Jul 07 '15 at 11:49

0

You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:

$("#editTrackModal .modal-body").empty();

answered Jul 07 '15 at 11:49

josedefreitasc

221
1
5

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

Hi you can do like this

// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
    $(this).data('modal', null); //this will destroy you data and model means it will reset.
});

and it may be duplicate of how to destroy bootstrap modal window completely?

you can refer to that link also.

edited May 23 '17 at 11:43

Community

1
1

answered Jul 07 '15 at 12:12

Himesh Aadeshara

2,114
16
26

score 0 · Answer 3 · answered Jul 07 '15 at 14:56

A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:

$('#editTrackModal').on('hidden.bs.modal', function () {
    $('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});

And when you want to show the modal again, you can do something like this:

$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');

Your html may look like this:

<div id="editTrackModal" class="modal fade">
    <div class='modal-contents'>
        ......Build your modal contents here......
    </div>
</div>

Destory CSS Bootstrap Modal

3 Answers3