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

**RobertP** · 27/06/2008, 19h56

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

**Bovino** · 27/06/2008, 20h11

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 :

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

else if(readyState == 5){}

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

**RobertP** · 27/06/2008, 20h38

Merci Bovino.

Voici mes codes sources :

Mon fichier avec le formulaire :

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
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 :

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
<?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 :

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
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.

**Bovino** · 27/06/2008, 20h59

Tout d'abord, un petit commentaire sur le commentaire (désolé, je crois qu'en plus tu n'y es pour rien) :

Code :

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

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 :

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

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

dans themes.php, or :

Code :

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

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

tu n'envoies pas de variable 'themes'...

**RobertP** · 27/06/2008, 21h04

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...

**Bovino** · 27/06/2008, 21h20

Code :

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

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 :

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

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...

**RobertP** · 27/06/2008, 21h34

Ca ne fonctionne pas avec tes modifications...

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 :

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

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 ?

**Bovino** · 27/06/2008, 21h46

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

Code :

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

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 '&'.

**RobertP** · 27/06/2008, 21h53

Merci mais ça ne fonctionne toujours pas...

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

Code :

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

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"]...

**Bovino** · 27/06/2008, 22h05

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

Code :

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

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

or

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 :

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

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

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

**RobertP** · 27/06/2008, 22h46

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"]

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

JavaScript

Discussions similaires

Partager

Partager