Bootstrap 3, modal, data-remote?

Question

[Андрей]

Возникло следующее затруднение:

— на странице несколько кнопок

— по нажатию на каждую должно открываться модальное окно, контент которого загружается по data-remote из внешнего источника (например: data-remote=«example/?id=1, data-remote=»example/?id=2, data-remote=«example/?id=3 и т.д. Запрашиваемые файлы находятся в том же домене.»

Проблема в том, что впервые нажав на какую-либо кнопку нужный контент загружается, но при нажатии другой кнопки в модальное окно новый контент не загружается, а выводится тот, что был загружен первым.

В официальной документации решение не находится, а гугление показало лишь то, что подобная проблема существует.

Может быть кто-то знает изящное решение?

Answer 1

[cawakharkov]

по-моему, в 2 версии нужно было удалять окно после закрытия что-бы новый контент грузился, сейчас наверное уже не найду, конкретную реализацию, попробуйте поискать именно с такой позиции — удаление модального окна после закрытия

Comments

[Петруша Укропов]

удаление:

$('#modal').on('hidden', function(){
    $(this).remove();
});

[cawakharkov]

ну вот и ответ

[Max]

Скажите пожалуйста где именно писать этот код?

Answer 2

[gsd]

Bootstrap 3

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

Comments

[mamantoha]

Спасибо!

[Антон]

Этот вариант решает задачу. Спасибо.

Answer 3

[Андрей]

В BT3 это реализуется вот так:

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

Но в целом да, работает. Спасибо.

Comments

[Антон]

Этот вариант не подходит. Верный вариант у gsd

Answer 4

[karakum22]

Я сделал так:

<g:javascript>
    function constructModalDOM(){
        return $("<div></div>").
                attr('id', 'myModal').
                addClass("modal").
                addClass("fade").
                attr('tabindex', '-1').
                attr('role', 'dialog').
                attr('aria-labelledby', 'myModalLabel').
                attr('aria-hidden', 'true').
                on('hidden.bs.modal', onHideModal);
    }
    function onHideModal() {
        $('#myModal').replaceWith(constructModalDOM());
    }
    constructModalDOM().appendTo(document.body);
</g:javascript>

при закрытии модальное окно пересоздается

Comments

[Max]

Скажите пожалуйста где именно писать этот код?