[Résolu] Soucis avec toggle Javascript

Soucis avec toggle Javascript [Résolu] - HTML/CSS - Programmation

Marsh Posté le 23-10-2007 à 16:27:36    

Bonjour, j'ai mis en place un toggle permettant d'afficher/masquer un formulaire sur une page affichant une liste de biens immobiliers.
Les biens sont affichés dans des <table> depuis une base MySql sous cette forme:
 
 
 
La fonction JS entre <head> et </head>:
 

Code :
  1. function switchMenu(obj) {
  2.   var el = document.getElementById(obj);
  3.    if ( el.style.display != "none" ) {
  4.     el.style.display = "none";
  5.    }
  6.    else {
  7.     el.style.display = "";
  8.    }
  9.  }


 
Et l'affichage des tables:
 
[cpp><?php while ($donnees = mysql_fetch_array($resultat) ) { ?>
<table>
<tr>
<td></td>
<td><a onMouseOver="switchMenu('form')" title=""><img src="..." /></a></td>
</tr>
<tr id="form_cache" style="display: none;">
<td></td>
<td></td>
</tr>
</table>[/cpp]
 
 
Le toggle s'applique donc sur un <tr>.
Le principe fonctionne, mais j'ai un soucis, c'est que j'ai par exemple 10 biens affichés sur la page (donc 10 tables générées dynamiquement), et le toggle s'ouvre toujours sur la première table.
Je n'ai pas trouvé de solution pour qu'il s'applique à chaque fois sur la table correspondante.
 
Pouvez-vous m'aider?
 
Merci par avance.
 
Vous pouvez voir un exemple sur cette page (le <tr> caché apparailt en passant la souris sur le "+" ):
www.chaylaimmobilier.com/exclusivites.php


Message édité par Ben-o le 24-10-2007 à 09:34:02
Reply

Marsh Posté le 23-10-2007 à 16:27:36   

Reply

Marsh Posté le 23-10-2007 à 16:35:49    

L'id doit être unique dans tout le document HTML. la méthode document.getElementById ne peut renvoyer qu'un seul objet, donc le pauvre navigateur essaye de gérer et retourne le premier tant bien que mal :D
 
Utilise plutôt les class, c'est fait pour ça. Cherche un getElementsByClassName quelque part sur google, car ça n'existe pas en standard

Reply

Marsh Posté le 23-10-2007 à 16:37:42    

Merci Florent, je regarde ça

Reply

Marsh Posté le 23-10-2007 à 16:46:10    

Concrètement, que dois-je faire?
J'ai donc remplacé "document.getElementById" par "document.getElementsByClassName", et <tr id="form_cache"> par <tr class="form_cache">
 
Mais ça ne fonctionne pas...
 
Peux-tu me donner un petit coup de pouce stp?

Reply

Marsh Posté le 23-10-2007 à 17:27:25    

Je viens de te dire, cherche quelque part un getElementByClassName, parce qu'il n'existe pas en standard

Reply

Marsh Posté le 23-10-2007 à 18:15:52    

J'ai trouvé ça sur un site:
 

Code :
  1. function getElementsByClassName(className, tag, elm){
  2.   var testClass = new RegExp("(^|s)" + className + "(s|$)" );
  3.   var tag = tag || "*";
  4.   var elm = elm || document;
  5.   var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
  6.   var returnElements = [];
  7.   var current;
  8.   var length = elements.length;
  9.   for(var i=0; i<length; i++){
  10.    current = elements[i ];
  11.    if(testClass.test(current.className)){
  12.     returnElements.push(current);
  13.    }
  14.   }
  15.   return returnElements;
  16.  }


 
afin de mettre en place la fonction.
 
Mais je rencontre toujours un problème.
 
Est-ce que je dois garder la fonction switchMenu(obj) telle qu'elle? :
 

Code :
  1. function switchMenu(obj) {
  2.   var el = getElementsByClassName(obj);
  3.    if ( el.style.display != "none" ) {
  4.     el.style.display = "none";
  5.    }
  6.    else {
  7.     el.style.display = "";
  8.    }
  9.  }


 
Etant donné que les tables sont générées dynamiquement, elles ont toutes la même classe du coup, il faudrait peut être un autre moyen pour les identifier?
 
Je patauge!
 
Encore merci pour ton aide.

Reply

Marsh Posté le 23-10-2007 à 19:15:34    

Il faut faire une boucle pour gérer tous les éléments :

Code :
  1. var els = getElementsByClassName(obj);
  2. for(var i = 0; i < els.length; i++) {
  3.   var el = el
  4.   if ( el.style.display != "none" ) { 
  5. ....
  6.   }
  7. }

Reply

Marsh Posté le 24-10-2007 à 09:33:30    

C'est bon ,j 'ai trouvé une solution,
 
j'ai conservé la fonction:
 

Code :
  1. function switchMenu(obj) {
  2. var el = document.getElementById(obj);
  3.  if ( el.style.display != "none" ) {
  4.   el.style.display = "none";
  5.  }
  6.  else {
  7.   el.style.display = "";
  8.  }
  9. }


 
ensuite, j'ai utilisé un identifiant unique pour chaque annonce:
 

Code :
  1. <a onclick="switchMenu('<?php echo $donnees['no_asp']; ?>');" style="cursor: pointer;">


 
et le <tr> qui doit être affiché / masqué est identifié de la même manière:
 

Code :
  1. <tr id="<?php echo $donnees['no_asp']; ?>" style="display: none;">


 
Pourquoi n'y ai-je pas pensé plus tôt!
 
En tout cas, merci pour ton aide.

Reply

Marsh Posté le 24-10-2007 à 09:36:25    

C'est aussi une possibilité :jap:
 
C'est d'ailleurs quelque chose d'important, assurer un identifiant unique à un élément, c'est une bonne idée d'utiliser un chiffre ou un truc comme ça. Je rajouterais juste un préfixe devant, style :

Code :
  1. <tr id="bien<?php echo $donness['no_asp'] ?>"....


Tu pourra facilement réappliquer ça à autre chose sans risquer d'avoir le même id

Reply

Marsh Posté le 24-10-2007 à 10:24:22    

Ok, merci Florent

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed