모달로 콘텐츠 다시로드 (twitter 부트 스트랩)

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

<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로드 된 콘텐츠를 새로 고치거나 재설정하려면 어떻게해야합니까?

동일한 문제가 발생하고 있으며이 작업을 수행하는 방법은 data-toggle 특성을 제거하고 링크에 대한 사용자 지정 처리기를 사용하는 것입니다.

라인에있는 것 :

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

나중에 시도하고 댓글을 게시합니다.

모달이 닫힐 때 데이터를 언로드하려면 Bootstrap 2.x와 함께 사용할 수 있습니다.

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

그리고 부트 스트랩 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ) :

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

Modal 플러그인의 hide 메소드 끝에이 행을 추가하여 Modal이 팝업을 새로 고치도록 강제 할 수 있습니다 (bootstrap-transition.js v2.1.1을 사용하는 경우 836 행에 있어야합니다).

this.$element.removeData()

또는 이벤트 리스너

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

Bootstrap 3을 사용하면 'hidden.bs.modal'이벤트 핸들러를 사용하여 모달 관련 데이터를 삭제하여 다음에 팝업이 다시로드되도록 할 수 있습니다.

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

다른 답변을 바탕으로 (모두 감사합니다).

.html을 호출하면 전체 내용이 지워지고 모달은 내가 한 후에 어떤 내용으로도로드되지 않기 때문에 코드를 작동하도록 조정해야했습니다. 그래서 나는 단순히 모달의 내용 영역을 찾고 거기에 HTML 재설정을 적용했습니다.

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

컨트롤이 Bootstrap과 함께 있기 때문에 모달로드 직전에 추악한 점프가 발생하기 때문에 여전히 받아 들여지는 대답으로 갈 수 있습니다.

위의 허용 된 예보다 약간 더 압축되었습니다. data-toggle = modal이 켜진 상태에서 현재 클릭 한 항목의 데이터 대상에서 대상을 가져옵니다. 이렇게하면 대상 모달의 ID가 무엇인지 알 필요가 없으며 동일한 것을 재사용 할 수 있습니다! 적은 코드 = 승리! 원하는 경우 모달의 제목, 레이블 및 버튼을로드하도록 수정할 수도 있습니다.

 $("[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>

Softlion 답변 을 약간 변경 했으므로 모든 모달이 숨길 때 새로 고쳐지지 않습니다. data-refresh = 'true'속성이있는 모달은 새로 고쳐지고 다른 모달은 평소처럼 작동합니다. 다음은 수정 된 버전입니다.

$(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>

이렇게하면 data-refresh = 'true'인 모달 만 새로 고쳐집니다. 그리고 새 값이로드 될 때까지 이전 값이 표시되기 때문에 모달 html을 재설정하여 html을 비어있는 상태로 수정합니다.

나를 위해 일한 커피 스크립트 버전이 있습니다.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

모든 버전의 twitterbootstrap에서 작동합니다.

자바 스크립트 코드 :

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

모달에 대한 링크는

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

모달 팝업

<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>

나는 또한이 문제에 갇혀 있었고 모달 의 ID 가 동일 하다는 것을 알았습니다 . 여러 모달을 원하는 경우 다른 모달 ID 가 필요합니다 . 동적 ID를 사용했습니다 . 다음은 내 코드입니다 haml.

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

넌 할 수있어

<div id="<%= some.id %>" 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 data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

이것이 당신에게 효과가 있기를 바랍니다.

이것을 시도 할 수 있습니다.

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

모달이 닫힐 때 AJAX로드 된 콘텐츠가 제거되기를 원했기 때문에 다른 사람이 제안한 줄 (coffeescript 구문)을 조정했습니다.

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ table = $ ( '# myTable2');
$ table.bootstrapTable ( 'destroy');

나를 위해 일했다

1 단계 : 호출 된 모달에 대한 래퍼를 만듭니다. clone-modal-wrapper .

2 단계 :라는 빈 div를 만듭니다 modal-wrapper.

3 단계 : 모달 요소를 clone-modal-wrapper에서 modal-wrapper.

4 단계 :의 모달을 전환합니다 modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <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>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});