[Résolu] Soucis avec toggle Javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Soucis avec toggle Javascript

Ben-o

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 :

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = "none";
}
else {
el.style.display = "";
}
}

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

Publicité

FlorentG

Unité de Masse

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

Utilise plutôt les class, c'est fait pour ça. Cherche un getElementsByClassName quelque part sur google, car ça n'existe pas en standard

Ben-o

Merci Florent, je regarde ça

Ben-o

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?

FlorentG

Unité de Masse

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

Ben-o

J'ai trouvé ça sur un site:

Code :

function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|s)" + className + "(s|$)" );
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}

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 :

function switchMenu(obj) {
var el = getElementsByClassName(obj);
if ( el.style.display != "none" ) {
el.style.display = "none";
}
else {
el.style.display = "";
}
}

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.

FlorentG

Unité de Masse

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

Code :

var els = getElementsByClassName(obj);
for(var i = 0; i < els.length; i++) {
var el = el
if ( el.style.display != "none" ) {
....
}
}

Ben-o

C'est bon ,j 'ai trouvé une solution,

j'ai conservé la fonction:

Code :

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = "none";
}
else {
el.style.display = "";
}
}

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

Code :

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

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

FlorentG

Unité de Masse

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 :

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

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

Ben-o

Ok, merci Florent

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] Soucis avec toggle Javascript

Sujets relatifs
[Résolu] Lister les fichiers d'un dossier	[résolu] Recherches parallèles LDAP
[resolu]Affichier resultat de ma requete dans un cadre de ma page PHP	[resolu] recuperer le flux audio d'un lecteur flash ?
Diaporama tout simple en javascript	[Résolu]Alignement...
[Résolu] Envoyer mail en perl avec authentification	[debutant][résolu]C++ et QT4...Conversion de type??
zippage de fichiers et répertoires dans plusieurs fichiers zip (Résolu	[VBA Excel] Appliquer couleur sur une partie de chaine
Plus de sujets relatifs à : [Résolu] Soucis avec toggle Javascript

Page générée en 0.043 secondes