javascript

트위터 부트 스트랩의 모달 팝업을 사용하고 있습니다.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

이 a 요소와 함께 ajax를 사용하여 콘텐츠를로드 할 수 있습니다.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

이제 동일한 모달을 열어야하지만 다른 URL을 사용해야합니다. 이 모달을 사용하여 데이터베이스에서 엔티티를 편집하고 있습니다. 따라서 엔티티에서 편집을 클릭하면 ID와 함께 모달을로드해야합니다.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

링크 번호 1을 클릭하면 정상적으로 작동합니다. 그러나 링크 번호 2를 클릭하면 모달 콘텐츠가 이미로드되어 링크 번호 1의 콘텐츠가 표시됩니다.

Twitter 부트 스트랩 모달 팝업에서 Ajax로드 된 콘텐츠를 새로 고치거나 재설정하려면 어떻게해야합니까?

답변

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() {
         $("#myModal").modal("show");
    });
});

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

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

this.$element.removeData()

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

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

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

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() {
         $($(this).attr('data-target')).modal("show");
    });
});

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>