Jquery Ajax response utilisant ThickBox

Question

J'ai donc un appel ajax à un service (utilisant JQuery) qui renvoie un code HTML valide:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

Ce code html de retour est attribué correctement et s'affiche sur la page, MAIS lorsque je clique sur la & "; une &"; tag une nouvelle page est ouverte à la place d'un & "; ThickBox &"; avec le contenu iFrame.

Voici la partie déroutante si je copie ce code dans la page puis que je l'exécute dans le navigateur, il agit de la bonne manière (affichage de l'élément thickbox)

Pourquoi la réponse AJAX n'affiche-t-elle pas correctement l'élément ThickBox?

Je suppose que la classe = 'thickbox' dans le texte de la réponse ne trouve pas le javascript qui sait comment analyser cet élément.

Answer 1

Je pense que le problème réside dans le fait que l'événement <a class='thickbox' n'est pas lié à l'événement.

J'ai eu exactement les mêmes problèmes lorsque je copiais des éléments dom existants contenant des liens et que tous les événements liés cessaient de fonctionner sur ces éléments nouvellement créés. tout ce que j'avais à faire était de lier les événements à ces éléments aussi.

Alors, faites juste votre appel Thickbox à ce nouvel élément. N'utilisez pas simplement le même code que vous utilisez $ (document) .ready. Quand j'ai fait quelque chose comme ça, les événements ont commencé à travailler sur de nouveaux éléments, mais ont tiré deux fois sur de vieux éléments.

Modifier en réponse au commentaire: Je ne sais pas du tout comment fonctionne thickbox. J'ai toujours préféré Slimbox. J'ai trouvé un exemple qui pourrait vous aider. Read this (c'est à propos de thickbox): http://15daysofjquery.com/jquery-lightbox/19/

En gros, quand la page est chargée, cette fonction se déclenche:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

maintenant toutes les balises avec la classe thickbox ouvriront les liens de liaison pointés dans la fenêtre thickbox. Si de nouveaux éléments sont ajoutés à la page, ils ne sont pas liés à cet événement. Par conséquent, après avoir utilisé la magie ajax et extrait ce nouveau contenu de quelque part, vous devez lier ce $ (& »; A.thickbox "). click (function () {vers le nouveau lien vers. donc ajoutez quelque chose comme

$(newlinkselector).click(function{ etc.. etc.. 

dans le script, juste après l'endroit où vous rendez le contenu que l'appel ajax vous restitue.

Answer 2

Vous pouvez également insérer le script suivant dans la réponse ajax:

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

Il initialisera une zone épaisse à chaque fois qu'une réponse ajax apparaîtra.

Answer 3

J'ai eu le même problème. La réponse rapide - ajoutez la ligne suivante après avoir renseigné le innerHTML: tb_init ('a.thickbox'); // Initialise à nouveau

Ceci réinitialise le gestionnaire d'événements pour la balise d'ancrage. A travaillé comme un charme pour moi ...

Answer 4

Remplacez tb_init () par ce qui suit:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

Ceci lie l'événement click à une méthode jQuery live prenant en compte le contenu généré dynamiquement.