Tải lại nội dung trong modal (twitter bootstrap)

Tôi đang sử dụng cửa sổ bật lên phương thức của twitter bootstrap.

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

Tôi có thể tải nội dung bằng ajax với a-element này:

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

Bây giờ tôi phải mở cùng một phương thức nhưng sử dụng một url khác. Tôi đang sử dụng phương thức này để chỉnh sửa một thực thể từ cơ sở dữ liệu của mình. Vì vậy, khi tôi nhấp vào chỉnh sửa trên một thực thể, tôi cần tải phương thức có 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>

Nếu tôi nhấp vào liên kết số 1, nó hoạt động tốt. Nhưng nếu sau đó tôi nhấp vào liên kết số 2 thì nội dung phương thức đã được tải và vì vậy nó sẽ hiển thị nội dung từ liên kết số 1.

Làm cách nào tôi có thể làm mới hoặc đặt lại nội dung đã tải ajax trong cửa sổ bật lên phương thức khởi động twitter?

Tôi đang gặp phải vấn đề tương tự và tôi đoán cách làm điều này sẽ là xóa thuộc tính chuyển đổi dữ liệu và có một trình xử lý tùy chỉnh cho các liên kết.

Một cái gì đó trong các dòng của:

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

Sẽ thử nó sau và gửi bình luận.

Để dỡ dữ liệu khi phương thức bị đóng, bạn có thể sử dụng điều này với Bootstrap 2.x:

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

Và trong Bootstrap 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');
});

Bạn có thể buộc Modal làm mới cửa sổ bật lên bằng cách thêm dòng này vào cuối phương thức ẩn của plugin Modal (Nếu bạn đang sử dụng bootstrap-transfer.js v2.1.1, nó phải ở dòng 836)

this.$element.removeData()

Hoặc với một người nghe sự kiện

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

Với Bootstrap 3, bạn có thể sử dụng trình xử lý sự kiện 'hidden.bs.modal' để xóa mọi dữ liệu liên quan đến phương thức, buộc cửa sổ bật lên tải lại vào lần sau:

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

Dựa trên các câu trả lời khác (cảm ơn mọi người).

Tôi cần điều chỉnh mã để hoạt động, vì chỉ cần gọi .html sẽ xóa toàn bộ nội dung và phương thức sẽ không tải bất kỳ nội dung nào sau khi tôi thực hiện. Vì vậy, tôi chỉ đơn giản là tìm kiếm vùng nội dung của phương thức và áp dụng việc đặt lại HTML ở đó.

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

Vẫn có thể đi với câu trả lời được chấp nhận vì tôi đang nhận được một số bước nhảy xấu xí ngay trước khi phương thức tải khi điều khiển bằng Bootstrap.

Nén nhiều hơn một chút so với ví dụ được chấp nhận ở trên. Lấy mục tiêu từ mục tiêu dữ liệu của bất kỳ thứ gì hiện tại được nhấp vào khi bật data-toggle = modal. Điều này giúp bạn không cần phải biết id của phương thức đích là gì, chỉ cần sử dụng lại cùng một phương thức! ít mã = ​​thắng! Bạn cũng có thể sửa đổi điều này để tải tiêu đề, nhãn và nút cho phương thức của bạn nếu bạn muốn.

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

Liên kết mẫu:

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

Tôi đã thực hiện một thay đổi nhỏ đối với câu trả lời Softlion , vì vậy tất cả các phương thức của tôi sẽ không làm mới khi ẩn. Các phương thức có thuộc tính data-refresh = 'true' chỉ được làm mới, các phương thức khác hoạt động như bình thường. Đây là phiên bản sửa đổi.

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

Bây giờ hãy sử dụng thuộc tính như được hiển thị bên dưới,

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

Điều này sẽ đảm bảo chỉ các phương thức có data-refresh = 'true' được làm mới. Và tôi cũng đang đặt lại html phương thức vì các giá trị cũ được hiển thị cho đến khi các giá trị mới được tải, làm cho html trống sẽ sửa lỗi đó.

Đây là phiên bản coffeescript phù hợp với tôi.

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

Nó sẽ hoạt động cho tất cả các phiên bản của twitterbootstrap

Mã Javascript:

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

liên kết đến phương thức là

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

bật lên phương thức

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

Tôi cũng bị mắc kẹt về vấn đề này sau đó tôi thấy rằng id của phương thức giống nhau. Bạn cần các id phương thức khác nhau nếu bạn muốn có nhiều phương thức. Tôi đã sử dụng id động . Đây là mã của tôi trong haml:

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

bạn có thể làm được việc này

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

và các liên kết của bạn tới modal sẽ

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

Tôi hy vọng điều này sẽ làm việc cho bạn.

Bạn có thể thử điều này:

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

Tôi muốn nội dung được tải AJAX bị xóa khi phương thức đóng, vì vậy tôi đã điều chỉnh dòng do người khác đề xuất (cú pháp coffeescript):

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

var $ table = $ ('# myTable2');
$ table.bootstrapTable ('tiêu diệt');

Đã làm cho tôi

bước 1: Tạo một trình bao bọc cho phương thức được gọi clone-modal-wrapper.

bước 2: Tạo một div trống được gọi modal-wrapper.

Bước 3: Sao chép phần tử phương thức từ clone-modal-wrappersang modal-wrapper.

bước 4: Chuyển đổi phương thức của 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');
});