Discussion :

[Invité]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<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)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("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'.


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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("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 !

Auriez-vous une idée??
Merci de votre aide.

[Invité]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...