addEvent / request sur un select
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... :lol: )
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:
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....:lol:)
Code:
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:
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:
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:
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...
