[AJAX] Liste liée - Pré sélection

Version imprimable

27/06/2008, 19h56
RobertP

[AJAX] Liste liée - Pré sélection

Bonjour à tous,

J'utilise le script Ajax des listes liées qui fonctionne parafaitement après quelques ajustements (merci au forum).

J'ai cependant un petit problème.

Lorsque j'affiche un enregistrement de ma base de données, j'aimerai que les deux listes soit sur les bonnes lignes, j'y arrive pour la première liste mais pas pour la seconde car les requêtes SQL étant dans le fichier externe que l'on appelle via "xhr.open("POST","theme.php",true);", je n'arrive pas à faire un test sur l'id pour ajouter "selected='selected'"...

Est-ce que quelqu'un peut m'aider car j'ai quelques soucis. Je pense que ça doit se situer au niveau du passage de variables mais comment faire ?

Merci d'avance
27/06/2008, 20h11
Bovino

Tu ne donnes pas suffisamment d'éléments pour pouvoir apporter une réponse précise, en particulier, il est toujours utile de montrer le code des fonctions qui posent problème.

Cependant, dans une requête Ajax, la réponse serveur est quasiment toujours effectuée au readyState 4 (et c'est d'ailleurs souvent largement suffisant).
Dans ton cas, il se peut que l'actualisation de ta page fonctionne bien, mais que pour pouvoir obtenir le selected qui fonctionne, il te faille attendre que les données soient intégralement transmises...
Dans la fonction appelée par onreadystatechange, rajoute une condition

Code:

else if(readyState == 5){}

dans laquelle tu préciseras l'index sélectionné par défaut.

Merci Bovino.

Voici mes codes sources :

Mon fichier avec le formulaire :

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
<label>Catégorie :</label>
		<select name="categorie" id="IDcategorie" onchange="go();">
			<option value="-1">Aucun</option>
			<?php
                        $sql = "SELECT * FROM forcategories WHERE cat_id_parent = '0' ORDER BY cat_intitule DESC";
                        $resultat = $oMySQL->lanceRequete($sql);
                        ?>
			<?php
                        while ($enr = mysql_fetch_array($resultat)) {
                          print("<optgroup label=\"".$enr['cat_intitule']."\">\n");
                          $sqlSSCat = "SELECT * FROM forcategories WHERE cat_id_parent='".$enr['cat_id']."' ORDER BY cat_intitule";
                          $resultatSSCat = $oMySQL->lanceRequete($sqlSSCat);
                          while ($enrSSCat = mysql_fetch_array($resultatSSCat)) {
                                print("<option value=\"".$enrSSCat['cat_id']."\"");
                                $cat = $oCat->donneCategorie($enr_eff["eff_theme_id"]);
                                if($enrSSCat['cat_id'] == $cat){
                                        print(" selected=\"selected\"");
                                }
                                print(">".$enrSSCat['cat_intitule']."</option>\n");
                          }                       
                          print("</optgroup>\n");
                        }
                        ?>
			</select>
			<br /><br />
		<label>Thèmes :</label>
		<div id="Theme" style="display:inline">
				<select name="theme">
					<option value="-1">Choisir une Catégorie</option>
				</select>
		</div>

Mon fichier externe "theme.php" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
        print('<select name="theme">');
        if(isset($_POST["varPostee"])){
                $idCat = $_POST["varPostee"];
                $sqlTheme = "SELECT * FROM fortheme WHERE them_cat_id='".$idCat."' ORDER BY them_intitule ASC";
                include_once("../classes/class.mysql.php");
                $oMySQL = new wMySQL;
                $resultatTheme = $oMySQL->lanceRequete($sqlTheme);
                while($row = mysql_fetch_assoc($resultatTheme)){
                        print('<option value="'.$row["them_id"]);
                        if($row["them_id"] == $_POST["theme"]){
                                print(" selected=\"selected\"");
                        }
                        print('">'.htmlentities(htmlspecialchars($row["them_intitule"])).'</option>');
                }
        }
        print('</select>');
?>

Et mon fichier liste.js que j'appel dans le HEAD de ma page :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
window.onload = go;
var xhr = null;
// Renvoie le texte de l objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n\'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}
 
// Compatibilité avec le tuto
getXhr=GetXmlHttpRequest;
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById("Theme").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","theme.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				// ne pas oublier de poster les arguments
				// ici, l id de l auteur
				sel = document.getElementById("IDcategorie");
				categorie = sel.options[sel.selectedIndex].value;
				xhr.send("varPostee="+categorie);
				}

J'arrive donc bien à sélectionner la catégorie dans mon fichier principal mais c'est le thème qui en découle que je n'arrive pas à sélectionner.

Je ne suis pas expert en Ajax et j'avoue que j'ai un peu de mal avec tes explications.

27/06/2008, 20h59
Bovino
Tout d'abord, un petit commentaire sur le commentaire (désolé, je crois qu'en plus tu n'y es pour rien) :
Code:

1 2 // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){
Faux readyState == 4 correspond à : les données de retour ont commencé à être transmises, tout reçu c'est readyState == 5...

Pour ce qui est de ton problème, sauf erreur de ma part, il doit venir de là :

Code:

if($row["them_id"] == $_POST["theme"])

dans themes.php, or :

Code:

xhr.send("varPostee="+categorie);

tu n'envoies pas de variable 'themes'...
27/06/2008, 21h04
RobertP

Justement, je ne sais pas par où envoyer la variable.

la variable '$enr_eff["eff_theme_id"]' contient l'ID du thème qui permettrai la selection du bon thème dans la deuxième liste (fichier externe).

Comment faire pour lui envoyer cette variable ?

En plus, je viens de me rendre compte que ça ne fonctionne pas sous IE...

Code:

1 2 3 4 5 6 7 while ($enrSSCat = mysql_fetch_array($resultatSSCat)) { print("<option value=\"".$enrSSCat['cat_id']."\""); $cat = $oCat->donneCategorie($enr_eff["eff_theme_id"]); print(("id=\"".$cat."\" "); if($enrSSCat['cat_id'] == $cat){ print(" selected=\"selected\""); }
puis

Code:

xhr.send("varPostee="+categorie+"theme="+sel.options[sel.selectedIndex].id);

à tester et probablement rectifier, mais je pense que dans l'esprit, c'est le truc comme ça...

EDIT
A quoi te servent les value sur les option, car si les valeurs de id sont susceptibles de ne pas êtres uniques, une bonne solution serait de passer par cet attribut pour passer ton paramètre supplémentaire...

27/06/2008, 21h34
RobertP
Ca ne fonctionne pas avec tes modifications...

Citation:

A quoi te servent les value sur les option, car si les valeurs de id sont susceptibles de ne pas êtres uniques, une bonne solution serait de passer par cet attribut pour passer ton paramètre supplémentaire...

En fait, la page que je veux afficher reprend des éléments d'une base de données dont je me sert pour remplir le formulaire pour que l'utilisateur puisse le modifier.
Au moment où j'affiche les deux listes, j'arrive bien à sélectionner la catégorie de mon thème avec la requête SQL mais le soucis se situe au niveau de la seconde vers laquelle je n'arrive pas à passer de variable pour lui dire laquelle doit être sélectionnée.
Les "value" de mes options contiennent les ID des différents thèmes que je récupère ensuite pour les injecter dans ma bdd.

Le plus simple serait dans mon fichier externe "theme.php" de faire ceci :
Code:

1 2 3 4 if($row["them_id"] == $enr_eff["eff_theme_id"]){ print(" selected=\"selected\""); }
mais la variable $enr_eff["eff_theme_id"] ne ressort rien, car elle provient du fichier principal !

Aussi, as-tu une idée de pourquoi ça ne fonctionne pas sous IE ?
27/06/2008, 21h46
Bovino

Ah, ben dans ce cas c'est plus simple, tu peux annuler ma modif du php (le id) et dans le js mettre :

Code:

xhr.send("varPostee="+categorie+"&theme="+sel.options[sel.selectedIndex].value);

PS : oui, le précédent ne pouvait pas marcher, j'avais oublié le & entre les paramètres. De plus, si ça ne marche pas comme ça, essayes avec '&' à la place de '&'.
27/06/2008, 21h53
RobertP

Merci mais ça ne fonctionne toujours pas... :(

Il y a quelque chose que je ne comprend pas, dans :

Code:

theme="+sel.options[sel.selectedIndex].value

Qu'est-ce que theme est censé contenir ? parce que je voudrais que theme contienne la valeur de la variable $enr_eff["eff_theme_id"]...
27/06/2008, 22h05
Bovino

Oui, c'est bien ça, j'ai mis theme car il correspond à ta ligne :

Code:

if($row["them_id"] == $_POST["theme"])

or

Citation:

Les "value" de mes options contiennent les ID des différents thèmes que je récupère ensuite pour les injecter dans ma bdd.

donc je me suis dit qu'envoyer dans les paramètres

Code:

theme="+sel.options[sel.selectedIndex].value

te permettrait d'avoir dans $_POST["theme"] la valeur que tu souhaites...
27/06/2008, 22h46
RobertP

Citation:

te permettrait d'avoir dans $_POST["theme"] la valeur que tu souhaites...

Mais ça ne "pré-sélectionne" pas dans la deuxième liste l'item dont l'id correspond à la valeur de la variable : $enr_eff["eff_theme_id"]