CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
theplau
theplau

Reputation: 980

How do I clear Bootstrap remote modal content on close?

I am launching a modal with remote content (on the same domain, however). The modal can be opened several times with different content on the same page, so when it closes, I need it to clear the .modal-body part.

I tried to do it like this:

function close_modal()

{

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

    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });


}

But for some reason the previous content is still visible for a split second when I open another modal target. I also checked the source code and the content loaded previously is still there. How do I fix this? Here is my markup:

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' || 
                 textStatus === 'notmodified') 
            {
                modal.show();
            }
    });
});

and the HTML:

<div id="modal" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true">
    <div class="modal-dialog modal-full-screen">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" 
                  data-dismiss="modal" aria-hidden="true">
                  <span class="glyphicon glyphicon-remove-circle"></span>
                </button>
            </div>
            <div class="modal-body">
                <!-- /# content goes here -->
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 3950

Answers (3)

Tieson T.
Tieson T.

Reputation: 21221

Assuming your modals aren't doing anything special, you might find it easier to use something like Bootbox.js, which generates your Bootstrap modal on the fly. Your code would look something like:

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();

    var url = $(this).attr('href');

    $.get(url)
        .done(function (response, status, jqxhr) {
            // store a reference to the bootbox object
            var dialog = bootbox.dialog({
                message: response
            });
        })
        .fail(function(jqxhr, status, error){
            /* Do something when the form can't be loaded */
        });
});

Upvotes: 2

joshhunt
joshhunt

Reputation: 5335

One issue is that you aren't listening for the close until after you have already closed it. You have:

// Hide the modal
$('.modal').modal('hide');

// Start listening for the hide event, if the modal closes remove the data
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

Instead move either move the hide listener so it runs before the hide event (probably outside the function because it only needs to start listening once) or remove it and simply have $('.modal').removeData('bs.modal');

Upvotes: 2

Rob M.
Rob M.

Reputation: 36511

You should be able to use jQuery's empty method to remove all child nodes from .modal-body:

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).find('.modal-body').empty();
});

Upvotes: 2

Related Questions