Discussion :

[RobertP]

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]

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]

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]

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]

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]

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