Làm cách nào tôi có thể sử dụng lại một div phương thức Bootstrap?

Question

Tôi muốn để có thể có một số liên kết khác nhau trên một trang sử dụng lại một phương thức div qua plugin của phương thức Bootstrap của:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br /> 
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br /> 

<!-- Modal --> 
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3 id="myModalLabel">Click outside modal to close it</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…this is getting replaced with content that comes from passed-in href</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

tôi mong đợi rằng cách nhấp vào một trong hai liên kết (được theo kiểu như nút) sẽ gọi phương thức và tải phương thức với trang (giá trị của href) tương ứng với nút được nhấp. Thay vào đó, phương thức luôn tải với nội dung của liên kết bạn nhấp vào trước; phương thức không "làm mới" với nội dung phải được quyết định bởi href của liên kết "khác".

Tôi nghĩ đây là lỗi Bootstrap, nhưng tôi hỏi câu hỏi ở đây trong trường hợp tôi sử dụng không chính xác.

Vui lòng xem http://jsfiddle.net/jhfrench/qv5u5/ để trình diễn.

Answer 1

Sau khi nghiên cứu thêm, tôi đã tìm thấy một số vấn đề về Bootstrap đề cập đến hành vi này here và here. Tôi đã yêu cầu issue 5514 mở lại.

Trong khi đó, jQuery này sẽ vá lên vấn đề *:.

$('a[data-toggle="modal"]').on('click', function(){ 
    // update modal header with contents of button that invoked the modal 
    $('#myModalLabel').html($(this).html()); 
    //fixes a bootstrap bug that prevents a modal from being reused 
    $('#utility_body').load(
     $(this).attr('href'), 
     function(response, status, xhr) { 
      if (status === 'error') { 
       //console.log('got here'); 
       $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>'); 
      } 
      return this; 
     } 
    ); 
});​ 

Xin xem http://jsfiddle.net/jhfrench/qv5u5/51/ cho một ví dụ làm việc *

* -Đối với một số lý do, đôi khi bạn nhấp vào nút ở fiddle phương thức sẽ hiển thị trống. Đây không phải là một vấn đề trong ứng dụng tôi đang làm việc với, vì vậy tôi nghi ngờ đó là một vấn đề không liên quan đến câu hỏi/câu trả lời này.

Answer 2

Thay vì phải viết đánh dấu html của phương thức và vận dụng nó thông qua javascript, tôi sẽ sử dụng Bootstrap-Dialog để giảm bớt tất cả mọi thứ:

$('.modal-btn').click(function(event){ 
    var $link = $(this); 
    new BootstrapDialog({ 
     title : 'Load content of : ' + $link.attr('href'), 
     content : $('<div>Loading...</div>').load($link.attr('href')), 
     buttons : [{ 
      label : 'Close', 
      onclick : function(dialog){ 
       dialog.close(); 
      } 
     }, { 
      label : 'Save changes', 
      cssClass: 'btn-primary', 
      onclick : function(dialog){ 
       alert('The content of the dialog is: ' + dialog.getBody().html()); 
       dialog.close(); 
      } 
     }] 
    }).open(); 

    event.preventDefault(); 
}); 

Xem ở đây cho một bản demo trực tiếp, nó tải hai url mà bạn cung cấp trong ví dụ của bạn: http://jsfiddle.net/txrM8/

Xem thêm về Bootstrap-Dialog: http://nakupanda.github.io/bootstrap-dialog/