Discussion :

[shapman]

Bonjour,

alors voila, j'ai une page, sur lequel je souhaite générer un menu déroulant (balise <select>) en fonction d'une autre.

J'ai donc mis un addEvent sur mon premier select, qui à chaque changement charge une nouvelle liste.

(jusqu'ici, pas de problème, ça marche... )
J'ai mis aussi un addEvent sur ma seconde liste. (pour afficher un un contenu via un request...)

Or, la ça ne marche plus...pourquoi? Je surveille un élément qui n'existe pas avant ça création....(je sais pas si je me fais comprendre.... )

Voici mon code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<script type="text/javascript">
 
var F1 = function()
	{
	alert('valeur du type : '+this.value);
	var rub = this.value;
	var url = "selector.php";
    var options = {
    	update : $('N2'),
    	method : 'get',
    	data : 'rub='+rub+'&ajx=1'};
    var ajaxRequestRub = new Ajax(url, options);
    ajaxRequestRub.request();
    ajaxRequestRub.onComplete(
		alert('ok')
    	);
	};
 
var F2  = function()
	{
	alert(this.value);
	};
 
window.addEvent('domready', function() {
	$('Liste1').addEvent('change' , F1 );
	$('Liste2').addEvent('change' , F2 );
});
</script>

Mon code html...(basic....)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div>
	<div id="N1" style="margin:10px;float:left;width:200px;border:blue solid 1px;">
		<select id="Liste1" name="type">
			<option></option>
			<option value="anim">Animaux</option>
			<option value="auto">Auto/moto</option>
		</select>
	</div>
	<div id="N2" style="margin:10px;float:left;width:200px;border:blue solid 1px;">
	</div>
	<br style="clear:both;">
</div>
<div id="content" style="margin:10px;width:420px;border:blue solid 1px;"></div>

Puis, j'ai deux listes chargé via une requete asynchrone...
(fichier nommé anim.html)

Code :

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

1
2
3
4
5
6
7
 
<select name="anim" id="Liste2">
	<option></option>
	<option value="chien">Chien</option>
	<option value="chat">Chat</option>
	<option value="vache">Vache</option>
</select>

Et ce fichier (auto.html)

Code :

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

1
2
3
4
5
6
7
 
<select name="auto" id="Liste2">
	<option></option>
	<option value="Fiat">Fiat</option>
	<option value="Renault">Renault</option>
	<option value="Peugeot">Peugeot</option>
</select>

Pour la partie PHP, un script de selection de la liste...( selector.php )

Code :

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

1
2
3
4
5
 
<?
$rub = $_GET['rub'];
include('./pg/'.$rub.'.html');
?>

et pour le contenu final...bah peux importe un contenu basic qu'on charge en asychrone.

Bon, je dois avouer que je débute en MooTools...que les choix que j'ai fais peuvent être remis en question...(le fait de charger en asychrone la seconde liste....A savoir qu'il y aura à peut prêt 14 rubriques puis entre 8 à 16 sous sélections par rubrique...)

Avec le temps, ces listes peuvent encore augmenter...donc pour éviter le chargement de data inutiles, je me suis tourné vers de l'asynchrone.

En tout cas, je suis ouvert à toute proposition d'optimisation.

Merci par avance,

Loic

PS : pour le moment, aux changements de ma deuxième liste j'ai juste mis une alerte. Mais comme elle s'affiche pas, pas la peine de faire un request pour afficher du contenu...

[shapman]

Personne pour m'aider?

Si je me suis mal fais comprendre, ou si vous avez besoin de clarifier un point y a pas de problème...

En attendant, je continue de pleurer