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>

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>

• javascript
• jquery
• twitter-bootstrap

• Hi Mister @user1996496 Can you provide a JsFiddle, please? – Jeancarlo Fontalvo Commented Sep 6, 2016 at 23:25
• Is the previous content still visible for a split second if you open it a third time? – joshhunt Commented Sep 6, 2016 at 23:28
• 1 Yes he is. Look up jQuery's load function. – Chip Dean Commented Sep 6, 2016 at 23:33
• @joshhunt yes it happens every time – theplau Commented Sep 6, 2016 at 23:34
• @JeancarloFontalvo i tried but jsfiddle doesn't allow remote content to be loaded apparently.. – theplau Commented Sep 6, 2016 at 23:35

3 Answers 3

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

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

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 */
        });
});