트위터 부트 스트랩 원격 모달은 매번 동일한 내용을 보여줍니다

Twitter 부트 스트랩을 사용하고 있으며 모달을 지정했습니다

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

그리고 링크

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

이 링크 중 하나를 처음 클릭하면 올바른 컨텐츠가 표시되지만 다른 링크를 클릭하면 처음로드 된 동일한 컨텐츠가 표시되므로 컨텐츠가 업데이트되지 않습니다.

클릭 할 때마다 업데이트되기를 원합니다.

추신 : 커스텀 jQuery 함수를 통해 쉽게 작동시킬 수는 있지만 기본 Bootstrap 모달 원격 기능으로 가능한지 알고 싶습니다.

문제는 두 가지입니다.

먼저 모달 객체가 인스턴스화되면 모달 객체가 해당 요소 data-target만 호출한다는 것을 나타 내기 위해 지정된 요소 와 후속 호출에 지속적으로 연결 toggle()되지만의 값은 업데이트되지 않습니다 options. 따라서 href다른 링크 에서 속성이 다르 더라도 모달을 토글하면 값 remote이 업데이트되지 않습니다. 대부분의 옵션에서 객체를 직접 편집하여이 문제를 해결할 수 있습니다. 예를 들어 :

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

그러나이 경우에는 작동하지 않습니다. 왜냐하면 ...

둘째 , 모달 플러그인은 원격 리소스를로드하도록 설계되어 생성자에서 변화가 이루어집니다 경우에도 불행하게도 수단이 모달 객체의 options.remote, 그것이 다시로드되지 않습니다 .

간단한 해결책은 후속 토글 전에 모달 오브젝트를 파괴하는 것입니다. 하나의 옵션은 숨기고 난 후에 그것을 파괴하는 것입니다.

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

_{참고 : 필요에 따라 선택기를 조정하십시오. 이것이 가장 일반적입니다.}

플 런커

또는 모달을 시작하는 링크가 이전 링크와 다른지 확인하는 것과 같은 더 복잡한 체계를 생각해 볼 수 있습니다. 그렇다면 파괴하십시오. 그렇지 않은 경우 다시로드 할 필요가 없습니다.

부트 스트랩 3의 경우 다음을 사용해야합니다.

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

Bootstrap 3.1의 modal-content경우 원격 컨텐츠가로드 될 때까지 깜박임을 피하기 위해 데이터를 제거 하고 전체 대화 상자 (3.0) 대신 비우기를 원합니다 .

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

원격이 아닌 모달을 사용하는 경우 위의 코드는 물론 일단 닫히면 (나쁜) 내용을 제거합니다. .local-modal영향을받지 않도록 클래스 와 같은 모달에 무언가를 추가해야 할 수도 있습니다 . 그런 다음 위 코드를 수정하여 다음을 수행하십시오.

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

감사합니다 merv. boostrap.js에 대해 고민하기 시작했지만 귀하의 답변은 빠르고 깨끗한 해결 방법입니다. 다음은 내 코드에서 사용한 것입니다.

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

받아 들인 대답이 효과가 없었기 때문에 JavaScript를 사용하여 처리했습니다.

<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")})
    })
})

이것은 Bootstrap 3 FYI와 함께 작동합니다

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

내 프로젝트는 Yii로 빌드되었으며 Bootstrap-Yii 플러그인을 사용 하므로이 답변은 Yii를 사용하는 경우에만 관련이 있습니다.

위의 수정은 효과가 있었지만 처음으로 모달이 표시된 후에야 작동했습니다. 처음 비었을 때. 코드 Yii를 시작한 후 모달의 hide 함수를 호출하여 시작 변수를 지우기 때문이라고 생각합니다.

모달을 시작한 코드 바로 앞에 removeData 호출을 넣는 것이 속임수라는 것을 알았습니다. 내 코드는 다음과 같이 구성됩니다 ...

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

Bootstrap 3.2.0에서 "on"이벤트는 문서에 있어야하며 모달을 비워야합니다.

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

Bootstrap 3.1.0에서 "on"이벤트는 본문에있을 수 있습니다.

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

BS 3에서 더 일반적으로 사용하지 않는 이유는 무엇입니까? "[something] modal"을 모달 DIV의 ID로 사용하십시오.

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

나를 위해 일하는 유일한 옵션은 다음과 같습니다.

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

Bootstrap 3을 사용 popup('popup content') 하고 모달 상자 html을 추가 하는 함수가 있습니다 .

$ (this) .html ( '') 추가하기; 보이는 데이터를 지우고 꽤 잘 작동합니다.

원격 URL이 제공되면 jQuery의 로드 메소드 를 통해 컨텐츠가 한 번 로드 되고 .modal-content div에 삽입됩니다. data-api를 사용하는 경우, href 속성을 사용하여 원격 소스를 지정할 수도 있습니다. 이에 대한 예는 다음과 같습니다.

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

.modal-content 내부의 .html ( '')을 사용하여 새로운 내용이 나타날 때까지 이전 내용이 표시되므로 HTML을 지우면 도움이되기를 바랍니다.

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

모달의 새로 고침을 처리하는 간단한 스 니펫을 작성했습니다. 기본적으로 클릭 한 링크를 모달의 데이터에 저장하고 클릭 한 것과 동일한 링크인지 확인하여 모달 데이터를 제거하는지 여부를 확인합니다.

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

부트 스트랩 3의 경우 modal.js에서 다음을 변경했습니다.

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

에

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

(명확성을 위해 여분의 간격이 추가됨)

이렇게하면 모달 컨테이너에서 empty ()를 호출하고 데이터를 제거하여 오래된 모달 컨텐츠가 원치 않는 플래시를 방지 할 수 있습니다.

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

이것은 나를 위해 작동합니다.

이 다른 접근법은 저에게 효과적입니다.

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

어떤 html 요소를 비우고 싶습니까 (div, span any).

이것은 나를 위해 작동합니다 :

모달

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

스크립트

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

링크 영역은 데이터를 넣고 지우는 영역입니다.

@merv가 승인 한 답변의 확장 버전. 또한 모달 숨겨져있는 모달이 원격 소스에서로드되는지 확인하고 오래된 컨텐츠가 지워져 깜박이지 않도록합니다.

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

부트 스트랩 버전 3.3.2에서 테스트

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

이것으로 행운을 빕니다 :

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