2012-02-13 6 views
5

J'utilise Twitter bootstrap modals pour charger des données d'un tableau.Twitter modaux bootstrap & Ajax?

Voici mon code HTML.

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

et c'est la div Modal à la fin de la page comme si

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

Ce que je suis en train de réaliser est en cliquant sur le lien dans la cellule que je veux contenu du modal à mettre à jour & puis après la fin de la mise à jour pour ouvrir le modal automatiquement. Voici ce que j'ai essayé.

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

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

Il ne me donne pas d'erreur & en fait le code HTML obtient chargé avec succès dans la div Modal mais il ne charge pas le modal après la mise à jour du code HTML dont il a besoin une autre « Cliquez sur » ?! & Je ne sais pas pourquoi?

Répondre

4

Avez-vous essayé

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

juste après l'instanciation modal?

+1

$ (this) .modal ({ clavier: true, toile de fond : true, show: true }); cela a fonctionné, merci – ahmedelgabri

0

avez-vous essayé:

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

Cela fonctionne pour moi:

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

Mais l'URL fournie devrait sortir un bon modal comme celui-ci:

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