2012-02-13 33 views
5

Tôi đang sử dụng Twitter bootstrap modals Để tải dữ liệu từ một bảng.Twitter bootstrap modals & Ajax?

Đây là mã HTML của tôi.

<tr> 
.... 
<td> <a href="http://google.com">Text</a> </td> 
.... 
</tr> 

và đây là phương thức div ở phần cuối của trang như vậy

<div id="modal"></div> 

Những gì tôi đang cố gắng để đạt được là bằng cách nhấn vào liên kết bên trong tế bào Tôi muốn nội dung của phương thức được cập nhật & sau đó sau khi hoàn tất cập nhật để tự động mở phương thức. Đây là những gì tôi đã thử.

$('td').on('click','a',function(){ 
    var href = $(this).attr('href'); 

     $('#modal').load(href,function(){ 
      $(this).modal({ 
       keyboard:true, 
       backdrop:true 
       }); 
     }); 

Nó không cho tôi bất kỳ lỗi nào & thực sự HTML được nạp thành công trong div Modal nhưng nó không tải các phương thức sau khi cập nhật HTML nó cần một "Click" ?! & Tôi không biết tại sao?

Trả lời

4

Các bạn đã thử

$(this).modal('show'); 

ngay sau khi instantiating modal?

+1

$ .modal (this) ({ bàn phím: đúng, bối cảnh : true, hiển thị: true }); hoạt động này, Cảm ơn – ahmedelgabri

0

bạn đã thử:

$('td a').on('click', function(){ 
... 
}) 
9

này đang làm việc cho tôi:

$('div#modal').load(url,function(){ 
    $(this).modal({ 
     keyboard:true, 
     backdrop:true 
    }); 
}).modal('show'); 

Nhưng URL được cung cấp nên ra một phương thức thích hợp như thế này:

<div class="modal" id="myModal"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn">Close</a> 
     <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div>