11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Ajax et bulle d'aide [ToolTip]

Bonjour à tous.

Je vous explique mon problème :
j'utilise un plugin jQeury afin de créer des infobulles (tooltip) sur les cases de ma table HTML. Cela se présente comme suit :

Table HTML
<table id="maTable">
  <tr id="trid_01">
     <td><a href='#tooltip' class='clic'>Case 1A</a></td>
     <td><a href='#tooltip' class='clic'>Case 2A</a></td>
  </tr>
  <tr id="trid_02">
     <td><a href='#tooltip' class='clic'>Case 1B</a></td>
     <td><a href='#tooltip' class='clic'>Case 2B</a></td>
  </tr> ETC...
</table>


ToolTip
<div id="tooltip" class="tooltip_cls">
  <ul>
     <li class="top"></li>
     <li><a href="#" onClick="walk(0);" rel="close">Modifier</a></li>
     <li><a href="#" rel="close">Supprimer</a></li>
     <li><a href="#" onClick="walk(2);" rel="close">Param</a></li>
     <li class="bottom"></li>
  </ul>
</div>


Et voici ,la commande jQuery qui permet d'afficher le ToolTip (vous l'aurez compris, le DIV précédant s'affiche uniquement lorsque l'on clique sur un élément de la table HTML)
$("a.clic", "#"+this.id).simpletooltip({click: true, effect: "slideDown", hideDelay: 0.4});

this.id correspond à l'ID de la ligne <tr>; par exemple 'trid_01'.


Tout cela est fonctionnel au départ. Mais lorsque j'ajoute une ligne à ma table HTML (en passant par le DOM), le tooltip ne fonctionne pas pour la nouvelle ligne insérée.Précision, cela ne marche pas sous IE. Sous FireFox, un simple appel de la commande jQuery précédante avec l'ID de la nouvelle ligne insérée et tout fonctionne.

Auriez-vous une idée??
Merci de votre aide.
Modifié par AdJiBouDi (04 Jul 2008 - 10:15)
Salut,

Quand tu écris $("a.clic", "#"+this.id), jQuery détermine les éléments correspondant au sélecteur à ce moment précis et ne prend pas en compte les modifications futures sur l'arbre DOM...

Il faut donc ajouter les gestionnaires d'événements aux éléments que tu ajoutes par la suite à l'arbre DOM (ou utiliser le concept de "event delegation" par exemple).
Modifié par Julien Royer (03 Jul 2008 - 17:56)
Merci de ta réponse!

En fait, lors de la construction de la table HTML, j'exécute la commande jQuery précédante à chaque nouvelle ligne à joutée. La commande est identique à l'exception de 'this.id' qui varie.
$("tr",table.tBodies[0]).each(function() {
   //Traitement sur la ligne : ajout de CSS, etc... et infobulles :
    $("a.clic", "#"+this.id).simpletooltip(...);
}

Lorsque je rajoute une nouvelle ligne manuellement, je réexécute la commande jQuery (pour suivre le même raisonnement que précédement), idem ici seul l'ID change et correspond à l'ID de la nouvelle ligne insérée.

Cela fonctionne bien sous FireFox mais pas sous IE !
Modifié par AdJiBouDi (03 Jul 2008 - 18:01)
J'y aurais passé la nuit, mais au moins j'ai trouvé !

Le problème se situe au niveau du constructeur du plugin qui permet l'affichage des Tooltips :
var currentHref = jQueryVarNoConflict(this).attr("href");

Cette ligne est censée récupérer "l'adresse" du lien lorsque vous cliquer sur un élément qui doit afficher un Tooltip (si vous regarder sur la table précédente, il s'agit ici de "#tooltip").

Sous FireFox, après un ajout manuel dans la table, le lien est bien celui-ci ("#tooltip").
Sous IE, le lien devient : "http://localhost/index.php#tooltip"; (par exemple)

Donc, dans le plugin, lorsque l'on récupère le lien et que l'on fait une vérification avant de créer le ToolTip, sous FireFox ça passe, mais pas sous IE.

Voilà, donc problème résolu si cela peut intéresser d'autres gens...
Modifié par AdJiBouDi (04 Jul 2008 - 10:20)
Sujet clos
Aller à