Newsgroup: it.comp.lang.javascript
Titolo: slidetoggle dinamici

Ciao a tutti,
devo fare dinamicamente un elenco di brand automobilistici (uno sotto
l'altro) e cliccando su un brand scende una finestra a tendina con
l'elenco dei modelli di quel brand.
Dal punto di vista DB e query per ottenerlo è tutto ok e strutturato,
ma ho problemi con la funzione slidetoggle di jquery.
Se devo scrivere la funzione slidetoggle per un singolo menu a
scomparsa non ho problemi, faccio una cosa del genere:
$("#NuovoContratto").hide()
    		$("#showhide").click(function () {
      			$("#NuovoContratto").slideToggle("fast");
    		});
Il problema è farlo per una serie di menu a scomparsa (senza sapere
appunto quanti saranno visto che dipende dal numero di brand  presenti
nel DB).
Ho cercato qui su google e ho trovato un solo post in merito a questo
che mi ha dato una base di partenza ma non riesco a farlo funzionare.
Ho scritto questo:
$(document).ready(function(){
    $("#modelli div").hide()
    		$("#brand div").click(function () {
      			$(this).siblings("div").slideToggle("fast");
    		});
 });
e poi:
echo ("<div id='brand'>");
echo ("<table class='iniziative'><tr><td class='principale'>");
echo ($brandname);
echo ("</td></tr></table>");
echo ("<div id='modelli'><table class='iniziative'>");
while ($models = mysql_fetch_array($modellist)) {
            $modelname = $models['Model'];
            echo ("<tr><td class='iniziative'>");
            echo ($modelname);
            echo ("</td></tr>");
 }
echo ("</table></div></div>");
Questo codice non funziona per niente, cioè mi genera i vari nomi dei
brand con sotto l'elenco dei modelli senza nasconderlo e non funziona
lo slide.
Mi aiutate per favore?
Grazie

 nel DB).
Vado ad occhio perchè bisognerebbe analizzare anche il codice che ti
genera i brand.
Dal codice jquery noto che i riferimento sono tutti a id (#), per i
brand restituiti non è meglio usare una class? In questo caso puoi
modificare la linea:
$("#NuovoContratto").slideToggle("fast");
con
$(".NuovoContratto").slideToggle("fast");
Naturalmente vado a tentoni, avrei bisogno di vedere la pagina oppure
il codice html generato.
Come principio generale jquery ti permette di fare molto in una riga
di codice, se sei costretto ad usare più righe di codice del
necessario allora è probabile che vi sia un errore concettuale.


Ecco il codice generato dalla pagina:
<script type="text/javascript">
 $(document).ready(function(){
    $("#modelli div").hide()
    		$("#brand div").click(function () {
      			$(this).siblings("div").slideToggle("fast");
    		});
 });
    </script>
</head>
<body>
	<div id="container">
			<div id="header">
				<img class="header" width="841" height="133" alt="Chrysler Italia
Logo" src="images/header.jpg"/>
			</div>
			<div id="navigazione">
					<p><a id="activelink" href="index.php">Home</a></p>
<p><a href="logout.php">Logout</a></p>			</div>
			<div id="extra">
				<p><a href="brands.php">Brands</a></p>
<p><a href="modelli.php">Modelli</a></p>
<p><a href="premi.php">Premi</a></p>
<p><a href="campagne.php">Campagne</a></p>
<p><a href="incentivi.php">Incentivi Annuali</a></p>
<p><a href="adesionichrysler.php">Adesioni</a></p>
<br/>
<p><a href="brandspermute.php">Brands Permute</a></p>
<p><a href="modellipermute.php">Modelli Permute</a></p>			</div>
			<div id="contenuti">
				<h2>Elenco Modelli Permute</h2>
                <div id='brand'><table class='iniziative'><tr><td
class='principale'>Alfa Romeo</td></tr></table><div
id='modelli'><table class='iniziative'><tr><td class='iniziative'>145</
td></tr><tr><td class='iniziative'>146</td></tr><tr><td
class='iniziative'>147</td></tr><tr><td class='iniziative'>156</td></
tr><tr><td class='iniziative'>159</td></tr><tr><td
class='iniziative'>166</td></tr><tr><td class='iniziative'>GTV</td></
tr><tr><td class='iniziative'>Spider</td></tr><tr><td
class='iniziative'>GT</td></tr><tr><td class='iniziative'>Brera</td></
tr><tr><td class='iniziative'>Mito</td></tr></table></div></div><div
id='brand'><table class='iniziative'><tr><td class='principale'>Audi</
td></tr></table><div id='modelli'><table class='iniziative'><tr><td
class='iniziative'>A2</td></tr><tr><td class='iniziative'>A3</td></
tr><tr><td class='iniziative'>A4</td></tr><tr><td
class='iniziative'>A5</td></tr><tr><td class='iniziative'>A6</td></
tr><tr><td class='iniziative'>Allroad</td></tr><tr><td
class='iniziative'>A8</td></tr><tr><td class='iniziative'>TT</td></
tr></table></div></div><div id='brand'><table
class='iniziative'><tr><td class='principale'>Bmw</td></tr></
table><div id='modelli'><table class='iniziative'><tr><td
class='iniziative'>Serie 1</td></tr><tr><td class='iniziative'>Serie
3</td></tr><tr><td class='iniziative'>Serie 5</td></tr><tr><td
class='iniziative'>Serie 6</td></tr><tr><td class='iniziative'>X3</
td></tr><tr><td class='iniziative'>X5</td></tr><tr><td
class='iniziative'>X6</td></tr><tr><td class='iniziative'>Serie 7</
td></tr><tr><td class='iniziative'>Z3</td></tr><tr><td
class='iniziative'>Z1</td></tr><tr><td class='iniziative'>Z4</td></
tr></table></div></div>			<form action="modellipermute.php"
method="post">

 Ecco il codice generato dalla pagina:
Do un'occhiata attenta al più presto, subito posso dirti che sia
id="brand" che id="modelli" sono ripetuti, questo è un errore, gli id
devono essere unici, non possono essere assegnati a più tag altrimenti
si creano conflitti. Il conflitto si può risolvere trasformando gli id
in classi, quest'ultime possono essere assegnate a più elementi.
Dunque sia $("#modelli div").hide() che $("#brand div").click(function
() si trovano di fronte un dilemma che possono risolvere nel modo più
strano.
Puoi provare a trasformare il tutto in classi e vedere che succede?

 Ecco il codice generato dalla pagina:
Ho sistemato meglio il codice, così funziona, devi giocarci un po' per
renderlo piú efficiente, comunque hai un punto di partenza migliore.
Due consigli:
1) evita gli stramaledetti <table> quando non sono necessari, nel tuo
caso non servono a un gran che, se non a rendere il codice meno
leggibile
2) segui le regole xhtml strict, permettono di creare un codice più
facile da manipolare, inoltre sono compatibili con la logica jquery.
al fine di inviarti una risposta rapida non ho eliminato i <table>
però puoi benissimo farlo tu, il risultato, in termini di slideToggle
non cambia.
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" lang="en-US" xml:lang="en-
US">
<head>
<title></title>
<script type="text/javascript" charset="UTF-8" src="jquery.js"></
script>
<script type="text/javascript">
$(document).ready(function(){
$(".modelli").hide();
$(".brand").click(function () {
var questo = $(this).children();
$(questo).slideToggle("fast");
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<img class="header" width="841" height="133" alt="Chrysler Italia
Logo" src="images/header.jpg"/>
</div>
<div id="navigazione">
<p><a id="activelink" href="index.php">Home</a></p>
<p><a href="logout.php">Logout</a></p>
</div>
<div id="extra">
<p><a href="brands.php">Brands</a></p>
<p><a href="modelli.php">Modelli</a></p>
<p><a href="premi.php">Premi</a></p>
<p><a href="campagne.php">Campagne</a></p>
<p><a href="incentivi.php">Incentivi Annuali</a></p>
<p><a href="adesionichrysler.php">Adesioni</a></p>
<p><a href="brandspermute.php">Brands Permute</a></p>
<p><a href="modellipermute.php">Modelli Permute</a></p>
</div>
<div id="contenuti">
<h2>Elenco Modelli Permute</h2>
<div class='brand'>
Alfa Romeo<br /><br />
<div class='modelli'>
<table class='iniziative'>
<tr>
<td class='iniziative'>145<td>
</tr>
<tr>
<td class='iniziative'>146</td>
</tr>
<tr>
<td class='iniziative'>147</td>
</tr>
<tr>
<td class='iniziative'>156</td>
</tr>
<tr>
<td class='iniziative'>159</td>
</tr>
<tr>
<td class='iniziative'>166</td>
</tr>
<tr>
<td class='iniziative'>GTV</td>
</tr>
<tr>
<td class='iniziative'>Spider</td>
</tr>
<tr>
<td class='iniziative'>GT</td>
</tr>
<tr>
<td class='iniziative'>Brera</td>
</tr>
<tr>
<td class='iniziative'>Mito</td>
</tr>
</table>
</div>
</div>
<div class='brand'>
Audi<br /><br />
<div class='modelli'>
<table class='iniziative'>
<tr>
<td class='iniziative'>A2</td>
</tr>
<tr>
<td class='iniziative'>A3</td>
</tr>
<tr>
<td class='iniziative'>A4</td>
</tr>
<tr>
<td class='iniziative'>A5</td>
</tr>
<tr>
<td class='iniziative'>A6</td>
</tr>
<tr>
<td class='iniziative'>Allroad</td>
</tr>
<tr>
<td class='iniziative'>A8</td>
</tr>
<tr>
<td class='iniziative'>TT</td>
</tr>
</table>
</div>
</div>
<div class='brand'>
Bmw<br /><br />
<div class='modelli'>
<table class='iniziative'>
<tr>
<td class='iniziative'>Serie 1</td>
</tr>
<tr>
<td class='iniziative'>Serie 3</td>
</tr>
<tr>
<td class='iniziative'>Serie 5</td>
</tr>
<tr>
<td class='iniziative'>Serie 6</td>
</tr>
<tr>
<td class='iniziative'>X3</td>
</tr>
<tr>
<td class='iniziative'>X5</td>
</tr>
<tr>
<td class='iniziative'>X6</td>
</tr>
<tr>
<td class='iniziative'>Serie 7</td>
</tr>
<tr>
<td class='iniziative'>Z3</td></tr>
<tr>
<td class='iniziative'>Z1</td>
</tr>
<tr>
<td class='iniziative'>Z4</td>
</tr>
</table>
</div>
</div>
</body>
</html>