Rectangle 27 434

However, that won't work in this case, because...

First, once a Modal object is instantiated, it is persistently attached to the element specified by data-target and subsequent calls to show that modal will only call toggle() on it, but will not update the values in the options. So, even though the href attributes are different on your different links, when the modal is toggled, the value for remote is not getting updated. For most options, one can get around this by directly editing the object. For instance:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

Second, the Modal plugin is designed to load the remote resource in the constructor of the Modal object, which unfortunately means that even if a change is made to the options.remote, it will never be reloaded.

A simple remedy is to destroy the Modal object before subsequent toggles. One option is to just destroy it after it finishes hiding:

Or you could try coming up with a more complicated scheme to do something like check whether the link launching the modal is different from the previous one. If it is, destroy; if it isn't, then no need to reload.

@VladimirStarkov Sorry about that - seems I forgot the hide class on the modal, so if your window was too small, the modal may have been blocking mouse events on the buttons. For some reason JSFiddle.net is really bad this morning (got a 504 trying to update), so I just redid the example on plnkr.co, which is better for AJAX anyway.

there's one other issue: the .modal-body will still have the text in it, so I added: <CODE> $('#myModal .modal-body').text("Loading...")</CODE> in the hidden event listener

bs.modal
$(this).removeData('bs.modal')
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 434

However, that won't work in this case, because...

First, once a Modal object is instantiated, it is persistently attached to the element specified by data-target and subsequent calls to show that modal will only call toggle() on it, but will not update the values in the options. So, even though the href attributes are different on your different links, when the modal is toggled, the value for remote is not getting updated. For most options, one can get around this by directly editing the object. For instance:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

Second, the Modal plugin is designed to load the remote resource in the constructor of the Modal object, which unfortunately means that even if a change is made to the options.remote, it will never be reloaded.

A simple remedy is to destroy the Modal object before subsequent toggles. One option is to just destroy it after it finishes hiding:

Or you could try coming up with a more complicated scheme to do something like check whether the link launching the modal is different from the previous one. If it is, destroy; if it isn't, then no need to reload.

@VladimirStarkov Sorry about that - seems I forgot the hide class on the modal, so if your window was too small, the modal may have been blocking mouse events on the buttons. For some reason JSFiddle.net is really bad this morning (got a 504 trying to update), so I just redid the example on plnkr.co, which is better for AJAX anyway.

there's one other issue: the .modal-body will still have the text in it, so I added: <CODE> $('#myModal .modal-body').text("Loading...")</CODE> in the hidden event listener

bs.modal
$(this).removeData('bs.modal')
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 47

For Bootstrap 3.1 you'll want to remove data and empty the modal-content rather than the whole dialog (3.0) to avoid the flicker while waiting for remote content to load.

If you are using non-remote modals then the above code will, of course, remove their content once closed (bad). You may need to add something to those modals (like a .local-modal class) so they aren't affected. Then modify the above code to:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

On the remote pages make sure you're not loading bootstrap, or jquery libraries. It will kill any reference and leave you with empty an empty modal.

This wasn't working for me. Here is my code which is working : $(document).on("hidden.bs.modal", ".modal", function (e) { if (!$(e.target).is(".local-modal")) { $(e.target).removeData("bs.modal").find(".modal-content").empty(); } });

$(e.target).removeData("bs.modal").find(".modal-content").empty();

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 47

For Bootstrap 3.1 you'll want to remove data and empty the modal-content rather than the whole dialog (3.0) to avoid the flicker while waiting for remote content to load.

If you are using non-remote modals then the above code will, of course, remove their content once closed (bad). You may need to add something to those modals (like a .local-modal class) so they aren't affected. Then modify the above code to:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

On the remote pages make sure you're not loading bootstrap, or jquery libraries. It will kill any reference and leave you with empty an empty modal.

This wasn't working for me. Here is my code which is working : $(document).on("hidden.bs.modal", ".modal", function (e) { if (!$(e.target).is(".local-modal")) { $(e.target).removeData("bs.modal").find(".modal-content").empty(); } });

$(e.target).removeData("bs.modal").find(".modal-content").empty();

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 167

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

This helped a lot. Bootstrap 3 isn't backward compatible and most of the content on SO (or other forums) is about BS < 3, trying those solutions wastes a lot of time indeed.

No perfect: it briefly shows the old content before the new content.

If you want to empty the modal using the above example you should be able to add the following either before or after the remoteData line: $(this).empty()

$(this).empty()
remote
<div class="modal-content">
$('.modal-content', this).empty();

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 167

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

This helped a lot. Bootstrap 3 isn't backward compatible and most of the content on SO (or other forums) is about BS < 3, trying those solutions wastes a lot of time indeed.

No perfect: it briefly shows the old content before the new content.

If you want to empty the modal using the above example you should be able to add the following either before or after the remoteData line: $(this).empty()

$(this).empty()
remote
<div class="modal-content">
$('.modal-content', this).empty();

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 30

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 30

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 20

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

what is the "modal" in actually in HTML? I could not find it ...

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 20

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

what is the "modal" in actually in HTML? I could not find it ...

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 14

This works with Bootstrap 3 FYI

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

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 14

This works with Bootstrap 3 FYI

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

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 7

My project is built in Yii & uses the Bootstrap-Yii plugin, so this answer is only relevant if you're using Yii.

The above fix did work but only after the first time the modal was shown. The first time it came up empty. I think that's because after my initiation of the code Yii calls the hide function of the modal thereby clearing out my initiation variables.

I found that putting the removeData call immediately before the code that launched the modal did the trick. So my code is structured like this...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 7

My project is built in Yii & uses the Bootstrap-Yii plugin, so this answer is only relevant if you're using Yii.

The above fix did work but only after the first time the modal was shown. The first time it came up empty. I think that's because after my initiation of the code Yii calls the hide function of the modal thereby clearing out my initiation variables.

I found that putting the removeData call immediately before the code that launched the modal did the trick. So my code is structured like this...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 1

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 1

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 4

In Bootstrap 3.2.0 the "on" event has to be on the document and you have to empty the modal :

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

In Bootstrap 3.1.0 the "on" event can be on the body :

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

The 3.2 solution was the only thing that worked properly for me in Bootstrap 3.1 - using the body approach, some of my events on modal became unhooked.

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 4

In Bootstrap 3.2.0 the "on" event has to be on the document and you have to empty the modal :

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

In Bootstrap 3.1.0 the "on" event can be on the body :

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

The 3.2 solution was the only thing that worked properly for me in Bootstrap 3.1 - using the body approach, some of my events on modal became unhooked.

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 3

Why not make it more general with BS 3? Just use "[something]modal" as the ID of the modal DIV.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog
Rectangle 27 3

Why not make it more general with BS 3? Just use "[something]modal" as the ID of the modal DIV.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

jquery - Twitter bootstrap remote modal shows same content every time ...

jquery jquery-plugins twitter-bootstrap modal-dialog