Twitter bootstrap phương thức từ xa hiển thị cùng một nội dung mỗi lần

Tôi đang sử dụng Twitter bootstrap, tôi đã chỉ định một phương thức

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

Và các liên kết

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

Khi tôi nhấp vào bất kỳ liên kết nào trong lần đầu tiên này, tôi thấy nội dung chính xác, nhưng khi tôi nhấp vào các liên kết khác, nó sẽ hiển thị cùng một nội dung được tải lần đầu tiên, nó không cập nhật nội dung.

Tôi muốn nó được cập nhật mỗi lần nhấp.

PS: Tôi có thể dễ dàng làm cho nó hoạt động thông qua chức năng jQuery tùy chỉnh, nhưng tôi muốn biết liệu nó có khả thi với chức năng từ xa phương thức Bootstrap không, vì nó đủ dễ và tôi đoán tôi chỉ đang làm phức tạp mọi thứ.

Vấn đề là hai lần.

Đầu tiên , một khi một đối tượng Modal được khởi tạo, nó sẽ liên tục được gắn vào phần tử được chỉ định bởi data-targetvà các lệnh gọi tiếp theo để hiển thị rằng phương thức sẽ chỉ gọi toggle()nó, nhưng sẽ không cập nhật các giá trị trong options. Vì vậy, mặc dù các hrefthuộc tính khác nhau trên các liên kết khác nhau của bạn, khi phương thức được bật, giá trị remotekhông được cập nhật. Đối với hầu hết các tùy chọn, người ta có thể khắc phục điều này bằng cách chỉnh sửa trực tiếp đối tượng. Ví dụ:

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

Tuy nhiên, điều đó sẽ không hoạt động trong trường hợp này, bởi vì ...

Thứ hai , plugin Modal được thiết kế để tải tài nguyên từ xa trong hàm tạo của đối tượng Modal, điều này không may có nghĩa là ngay cả khi thay đổi được thực hiện options.remote, nó sẽ không bao giờ được tải lại .

Một biện pháp khắc phục đơn giản là tiêu diệt đối tượng Modal trước khi bật / tắt. Một lựa chọn là chỉ tiêu diệt nó sau khi nó kết thúc ẩn:

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

_{Lưu ý: Điều chỉnh các bộ chọn nếu cần. Đây là khái quát nhất.}

Plunker

Hoặc bạn có thể thử đưa ra một sơ đồ phức tạp hơn để làm một cái gì đó như kiểm tra xem liên kết khởi chạy phương thức có khác với kế hoạch trước hay không. Nếu có, phá hủy; nếu không, thì không cần tải lại.

Đối với bootstrap 3 bạn nên sử dụng:

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

Đối với Bootstrap 3.1, bạn sẽ muốn xóa dữ liệu và làm trống modal-contenttoàn bộ hộp thoại (3.0) để tránh nhấp nháy trong khi chờ tải nội dung từ xa.

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

Nếu bạn đang sử dụng các phương thức không phải từ xa thì dĩ nhiên đoạn mã trên sẽ xóa nội dung của chúng sau khi đóng (xấu). Bạn có thể cần thêm một cái gì đó vào các phương thức đó (như một .local-modallớp) để chúng không bị ảnh hưởng. Sau đó sửa đổi mã trên thành:

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

Cảm ơn mẹ. Tôi đã bắt đầu mày mò xung quanh boostrap.js nhưng câu trả lời của bạn là một cách giải quyết nhanh chóng và rõ ràng. Đây là những gì tôi đã sử dụng trong mã của tôi.

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

Câu trả lời được chấp nhận không phù hợp với tôi, vì vậy tôi đã sử dụng JavaScript để thực hiện.

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

Điều này hoạt động với Bootstrap 3 FYI

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

Dự án của tôi được xây dựng trong Yii và sử dụng plugin Bootstrap-Yii, vì vậy câu trả lời này chỉ có liên quan nếu bạn đang sử dụng Yii.

Bản sửa lỗi trên đã hoạt động nhưng chỉ sau lần đầu tiên phương thức được hiển thị. Lần đầu tiên nó đến trống rỗng. Tôi nghĩ đó là bởi vì sau khi tôi bắt đầu mã Yii gọi hàm ẩn của phương thức do đó xóa các biến khởi tạo của tôi.

Tôi thấy rằng việc thực hiện cuộc gọi removeData ngay lập tức trước khi mã khởi chạy phương thức đã thực hiện thủ thuật. Vì vậy, mã của tôi được cấu trúc như thế này ...

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

Trong Bootstrap 3.2.0, sự kiện "bật" phải có trên tài liệu và bạn phải làm trống phương thức:

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

Trong Bootstrap 3.1.0, sự kiện "bật" có thể nằm trên thân máy:

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

Tại sao không làm cho nó chung chung hơn với BS 3? Chỉ cần sử dụng "[cái gì đó] phương thức" làm ID của DIV phương thức.

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

Chỉ có lựa chọn làm việc cho tôi là:

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

Tôi sử dụng Bootstrap 3 và tôi có một chức năng gọi là popup('popup content') nối thêm hộp modal html.

Thêm $ (này) .html (''); để xóa dữ liệu hiển thị là tốt, và nó hoạt động khá tốt

Nếu một URL từ xa được cung cấp, nội dung sẽ được tải một lần thông qua phương thức tải của jQuery và được đưa vào div .modal-content. Nếu bạn đang sử dụng api dữ liệu, bạn có thể sử dụng thuộc tính href để chỉ định nguồn từ xa. Một ví dụ về điều này được hiển thị dưới đây

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

Tôi đã thêm một cái gì đó như thế này, bởi vì nội dung cũ hơn được hiển thị cho đến khi nội dung mới xuất hiện, với .html ('') bên trong .modal-content sẽ xóa HTML bên trong, hy vọng nó sẽ giúp

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

Tôi đã viết một đoạn mã đơn giản xử lý việc làm mới phương thức. Về cơ bản, nó lưu trữ liên kết được nhấp trong dữ liệu của phương thức và kiểm tra xem đó có phải là liên kết đã được nhấp, xóa hay không dữ liệu phương thức.

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

Đối với Bootstrap 3, trong modal.js tôi đã thay đổi:

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

đến

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

(thêm khoảng cách thêm cho rõ ràng)

Điều này ngăn chặn mọi flash không mong muốn của nội dung phương thức cũ bằng cách gọi khoảng trống () trên bộ chứa phương thức cũng như xóa dữ liệu.

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

Cái này làm việc cho tôi

Cách tiếp cận khác này hoạt động tốt cho tôi:

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

Phần tử html nào bạn muốn để trống như (div, span bất cứ điều gì).

Cái này hoạt động với tôi:

phương thức

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

kịch bản

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

khu vực liên kết là khu vực tôi đặt dữ liệu và cần xóa

Phiên bản mở rộng của câu trả lời được chấp nhận bởi @merv. Nó cũng kiểm tra xem phương thức bị ẩn có được tải từ nguồn từ xa không và xóa nội dung cũ để ngăn không cho nó nhấp nháy.

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

Đã thử nghiệm trên phiên bản Bootstrap 3.3.2

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

Chúc may mắn với điều này:

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