2012-02-13 14 views
5

私はTwitter bootstrap modalsを使用しています。テーブルからデータをロードするには。TwitterのブートストラップモーダルとAjax?

ここに私のHTMLコードです。

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

、これは私がモーダルの内容にしたいセル内のリンクをクリックすることである私は何を達成しようとしているので、

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

ようなページの最後にモーダルdiv要素であります&を更新した後、自動的にモーダルを開くために更新が終了したことを示します。ここで私が試したことがあります。

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

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

それは私に実際にHTMLをモーダルDIVで正常にロードされる&すべてのエラーを与えるものではありませんが、それは、それは別の「クリック」を必要とHTMLを更新した後、モーダルをロードしません! &私はなぜそれが分かりませんか?

答えて

4

あなたは右のモーダルをインスタンス化した後

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

を試みたことがありますか?

+1

$(この).modal({ キーボード:真、 背景を:true、 show:true }); これが機能しました、ありがとう – ahmedelgabri

0

あなたが試してみました:

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

これは私のために働いている:出力このような適切なモーダルすべき

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

しかし、URLが提供:

<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> 
関連する問題