[AJAX] plusieurs listes liées

Version imprimable

23/10/2006, 20h28
highman

[AJAX] plusieurs listes liées

bonsoir,

Est-il possible de faire plusieurs listes liées (à savoir 3) en ajax. Ca marche niquel pour les deux premieres mais la troisième fait n'importe quoi...
la valeur du select récupérée en POST pour la 3eme liste est toujours nulle... Pourtant c'est le meme script que pour la 2eme liste qui marche très bien !

Si quelqu'un a une idée ....

Merci d'avance :)

je rajoute mon code quand meme :p

ajax :

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
30
31
32
 
var xhr = null; 
function getXhr(){
	if(window.XMLHttpRequest) // Firefox
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // IE
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		    xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { 
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
	} 
}
 
function go(id_object_parent, id_object_fils, page){
	getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById(id_object_fils).innerHTML = leselect;
		}
	}
	xhr.open("POST","scripts/return_scategories.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById(id_object_parent);
	idparent = sel.options[sel.selectedIndex].value;
	xhr.send("LIB="+idparent);
}

et dans le fichier d'affichage:

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
 
 
<td><select onChange="go('cat_mere', 'scat_1', 'scripts/return_scategories.php')" id="cat_mere">
		<option>Choisissez..</option>
 
		// Recuperation des lignes pour la categorie mere
		<?php
                        $cat_query = $ticketProp->getCategoriesQ(1, 0);
                        while($cat = $ticketProp->getCategories($cat_query)){
                                echo "<option>".$cat['LIBELLE_CATEGORIE']."</option>";
                        }
                ?>
	</select>
 
// Ici les lignes sont générées dynamiquement avec Ajax, elles appellent le meme script
</td>
<td>
	<select style="width:150px" onChange="go('scat_1', 'scat_2', 'scripts/return_scategories.php')" id="scat_1">
	</select>
</td>
<td>
	<select style="width:150px" id="scat_2">
	</select>
</td>

Je vous épargne le script php qui marche sans probleme à priori :P

24/10/2006, 15h36
denisC

Citation:

Envoyé par highman

la valeur du select récupérée en POST pour la 3eme liste est toujours nulle...

A quel moment? Au moment de la soumission de la page? Ou à un moment ntermédiaire? Tu as essayé de mettre un attribut name au champs select?

J'ai le même problême.
Je pense que highman parle de la variable après la soumission de son form.

Tu as essayé sous quel navigateur highman ?

Personnellement mon code marche nikel sous IE mais sous firefox, les values des listes, qui ont été créées dynamiquement, sont null apres la soumission du form.

Fonction de création de la liste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
        $rep = "../" . $_POST["rubrique"] . "/" . $_POST["sousRub"] . "/";
        echo "Galerie : <select name='listeGalerie' id='listeGalerie'>";
        $folder = opendir($rep);
        while($file = readdir($folder))
        {       
                if ($file[0] != "." && $file[0] != ".." )
                {
                        $files[$file] = filemtime("./$file");
                }               
        }       
        // now sort by date modified
        arsort($files);
        foreach($files as $key => $value)
        {
                echo "<option value='" . htmlentities($key) . "'>" . htmlentities($key) . "</option>";
        }
        echo "</select>";
?>

24/10/2006, 17h29
highman
En fait je crois savoir ce qu'il se passe :

La génération de la premiere liste (en fait la 2eme a partir de la 1ere qui elle est en générée au chargement) marche, mais le innerHTML du script ajax se contente d'afficher les valeurs (qu'il recois en responseText), il ne modifie pas le code HTML.

Je me retrouve donc avec la deuxieme liste remplie, mais avec un code t.q.
Code:

1 2 3 <select name="scat_1" id="scat_1"> </select>
Lors de l'appelle du script ajax pour scat_1 et scat_2 il ne peut donc pas récupere les [...].value, puisque dans le code HTML ces valeurs n'existent pas !
26/10/2006, 22h02
redwire
Citation:
Envoyé par highman

En fait je crois savoir ce qu'il se passe :

La génération de la premiere liste (en fait la 2eme a partir de la 1ere qui elle est en générée au chargement) marche, mais le innerHTML du script ajax se contente d'afficher les valeurs (qu'il recois en responseText), il ne modifie pas le code HTML.

Je me retrouve donc avec la deuxieme liste remplie, mais avec un code t.q.

Code:

1 2 3 <select name="scat_1" id="scat_1"> </select>

Lors de l'appelle du script ajax pour scat_1 et scat_2 il ne peut donc pas récupere les [...].value, puisque dans le code HTML ces valeurs n'existent pas !
tu as réussi à contourner ce problème? je pense être dans le même cas
27/10/2006, 13h16
denisC
Citation:

Envoyé par redwire

tu as réussi à contourner ce problème? je pense être dans le même cas

innerHTML ne fais pas très bon ménage avec les formulaires (surtout dans IE).

Le contournement numéro 1, c'est de changer le type du bouton submit en submit (oui, je sais ça change rien, mais des fois, ça marche):
Code:

1 2 document.getElementById('monBouton').type='submit';
Vous pouvez déjà essayer ça.

Sinon, il faudra construire les options une part une, avec new Option()....
02/03/2007, 10h31
joeyrcl

Bonjour,

Je relance le sujet car j'ai le meme probleme et je trouve rien sur le net.

Donc j'ai 4 liste liée dans mon cas qui marche trés bien ensemble mais il est impossible de récupérer la valeur du dernier choix.

Lorsque je fait afficher la source sous firefox, le code des pages "annexe" appelé par le javascript n'est pas afficher?

Je suis complément bloqué.

j'espere que vous pourrez m"eclairer

Merci d'avance