[AJAX] Un paramètre undefined

Version imprimable

Bonjour à tous, 8-)

J'ai un petit souci avec deux listes déroulantes liées. J'arrive bien à alimenter la seconde liste grâce à la première, mais je ne parviens pas à récupérer la valeur de la deuxième liste. Cela me pose problème car je dois remplir un tableau suivant les deux paramètres précédemment sélectionnés.

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
function go(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('rep').innerHTML = leselect;
}
}
xhr.open("POST","liste2.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('liste_dossier_upload');
idrubrique = sel.options[sel.selectedIndex].value;
xhr.send("idRubrique="+idrubrique);
go2();
}
function go2(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('tableau').innerHTML = leselect;
}
}
xhr.open("POST","tableau.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

sel = document.getElementById('liste_dossier_upload');
idrubrique = sel.options[sel.selectedIndex].value;
sucre = document.getElementById('rep');
idrep = sucre.selectedIndex;
xhr.send("idRubrique="+idrubrique+"&idDossier="+idrep);
}

HTML

Code:

1
2
3
4
5
6
7
8
9
10
echo "<tr><td colspan=\"3\" align=\"left\"><select name=\"liste_dossier_upload\" id=\"liste_dossier_upload\" onchange=\"go()\">";
echo "<option value=\"-1\">Aucun</option>";
echo "<option value=\"1\">Actualit&eacute;s</option>";
echo "<option value=\"2\">R&eacute;alisations</option>";
echo "<option value=\"3\">Plan</option>";
echo "</select>&nbsp;";
echo "<div id=\"rep\" style=\"display:inline\">";
echo "<select name=\"rep\" id=\"rep\" onchange=\"go2()\">";
echo "<option value=\"-1\">Choisir une rubrique</option>";
echo "</select></div><br><br><br><br>";

tableau.php

Code:

1
2
3
4
5
6
7
8
<?php
echo "<div name='tableau'>";
if(isset($_POST["idDossier"]))
{ 
echo $_POST["idDossier"]." et " .$_POST["idRubrique"];
}
echo "</div>";
?>

Il affiche "undefined et 1(-1,2,3)"...

Merci par avance pour vos conseils. :ccool:

Cordialement.

PK

31/07/2009, 12h06
emmanuel.remy
Salut,

Quelques observations:
Tu appelles go2() alors que go() n'a pas fini son traitement AJAX, asynchrone.
Code:

1 2 3 4 5 ... xhr.send("idRubrique="+idrubrique); go2(); }
go2() devrait être appelée autre part, a priori uniquement sur le onchange de ton second select

Ensuite, dans ton code initial:
Code:

1 2 3 echo "<div id=\"rep\" style=\"display:inline\">"; echo "<select name=\"rep\" id=\"rep\" onchange=\"go2()\">"; echo "<option value=\"-1\">Choisir une rubrique</option>";
plusieurs éléments ont le même id: cela peut poser souci lors de l'accès via getElementById.

Je crois que tu devrais déjà corriger cela avant de continuer.

ERE
03/08/2009, 10h33
Perceuse-Killer
Bonjour emmanuel.remy et merci pour ta réponse aussi rapide. ;)

J'ai retourné la chose dans tous les sens. :aie:
Citation:
Quelques observations:
Tu appelles go2() alors que go() n'a pas fini son traitement AJAX, asynchrone.

Code:

1 2 3 4 ... xhr.send("idRubrique="+idrubrique); go2(); }

go2() devrait être appelée autre part, a priori uniquement sur le onchange de ton second select
Cela ne fonctionne pas si j'appelle go2() uniquement sur l'évènement OnChange.
Citation:
Ensuite, dans ton code initial:

Code:

1 2 3 echo "<div id=\"rep\" style=\"display:inline\">"; echo "<select name=\"rep\" id=\"rep\" onchange=\"go2()\">"; echo "<option value=\"-1\">Choisir une rubrique</option>";

plusieurs éléments ont le même id: cela peut poser souci lors de l'accès via getElementById.
J'ai modifié le nom de la div.
Code:

1 2 3 echo "<div id=\"dir\" style=\"display:inline\">"; echo "<select name=\"rep\" id=\"rep\" onchange=\"go2()\">"; echo "<option value=\"-1\">Choisir une rubrique</option>";
Je parviens à récupérer mes paramètres : "IdDossier:-1 et IdRubrique:1(-1,2,3)" mais la valeur de IdDossier reste inchangée car l'affichage des données se fait en dehors de la liste déroulante.

http://img300.imageshack.us/img300/1681/div.jpg

Je vais continuer à chercher mais c'est vraiment pas évident.

Merci encore pour ton aide. ;)

Bonne journée

PK

Salut,

Si tu as changé le nom de de ta div rep, faut aussi mettre le code en accord :aie:
Code:

1 2 3 4 5 6 7 8 function go(){ var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; document.getElementById('dir').innerHTML = leselect; } }
ERE

03/08/2009, 14h20
Perceuse-Killer
Exact, là j'ai fait fort. 8O

Le souci c'est que le code du fichier tableau.php ne s'exécute qu'une fois et l'affichage n'est pas rafraichi au défilement des listes déroulantes... :(

tableau.php
Code:

1 2 3 4 5 6 7 8 <?php echo "<div name='tableau'>"; if(isset($_POST["idRubrique"]) && isset($_POST["idDossier"])) { echo $_POST["idDossier"]." et " .$_POST["idRubrique"]; } echo "</div>"; ?>
Si je n'envoie que le paramètre idRubrique au serveur, le code est bien rafraichi mais avec idDossier non. :roll:
03/08/2009, 15h26
emmanuel.remy

Pose un alert juste avant l'envoi pour connaitre la valeur d'idDossier.

A mon avis il est vide ou undefined.

ERE
03/08/2009, 16h00
Perceuse-Killer
Code:

1 2 alert(idDossier); xhr.send("idRubrique="+idrubrique+"&idDossier="+idDossier);
Lorsque je déroule la liste déroulante rubrique qui met à jour la liste dossier, l'alerte affiche -1 puis plus rien.
03/08/2009, 17h36
emmanuel.remy

Re,

Une chose importante: tu écris dans go2()

Code:

document.getElementById('tableau').innerHTML = leselect;

or as tu un id tableau dans ta page ? A ne pas confondre avec la div que tu renvoies

Code:

echo "<div name='tableau'>";

qui n'a rien à voir (d'ailleurs, pourquoi name="tableau" ?)

Peux tu envoyer ton code complet pour avoir une vue d'ensemble, ce sera peut-être plus simple, car normalement mise à part la création des select via innerHTML il n' y a rien de particulier dans ton cas ?

ERE

Bonjour emmanuel.remy et merci pour ta patience. :ccool:

Voici le code :

code 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
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
65
66
67
68
69
<script type="text/javascript">
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* 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('dir').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","liste2.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 la rubrique
sel = document.getElementById('liste_dossier_upload');
idrubrique = sel.options[sel.selectedIndex].value;
xhr.send("idRubrique="+idrubrique);
go2();
}
function go2(){
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('tableau').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","tableau.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 la rubrique
 
sel = document.getElementById('liste_dossier_upload');
idrubrique = sel.options[sel.selectedIndex].value;
sucre = document.getElementById('rep');
idrep = sucre.options[sucre.selectedIndex].value;
alert(idrep);
xhr.send("idRubrique="+idrubrique+"&idDossier="+idrep);
}
</script>

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
 
<?php
echo "<tr><td colspan=\"3\" align=\"left\"><select name=\"liste_dossier_upload\" id=\"liste_dossier_upload\" onchange=\"go()\">";
echo "<option value=\"-1\">Aucun</option>";
echo "<option value=\"1\">Actualit&eacute;s</option>";
echo "<option value=\"2\">R&eacute;alisations</option>";
echo "<option value=\"3\">Plan</option>";
echo "<option value=\"4\">Activit&eacute;s locales</option>";
echo "</select>&nbsp;";
echo "<div id=\"dir\" style=\"display:inline\">";
echo "<select name=\"rep\" id=\"rep\" onchange=\"go2()\">";
echo "<option value=\"-1\">Choisir une rubrique</option>";
echo "</select></div><br><br><br><br>";
?>
<div id="tableau">
<table width="95%" cellspacing="1" border="0" bgcolor="#000000" align="center">
   <tr class="tabTitre">
    <td width="100%"> Liste des fichiers </td>
  </tr>
  <tr class="tabContenu">
    <td width="100%"><table width="80%" border="0">
            </TR> 
         </TD>
    </table>
</div>

fichier cible tableau.php

Code:

1
2
3
4
5
6
7
8
9
<?php
require("../include/param_site.txt");
echo "<div name='tableau'>";
if(isset($_POST["idRubrique"]) && isset($_POST["idDossier"]))
{ 
        echo "idRubrique : " .$_POST["idRubrique"]." et idDossier : " .$_POST["idDossier"];
}
echo "</div>";
?>

04/08/2009, 10h56
emmanuel.remy
Salut,

enlève le go2()
Code:

1 2 xhr.send("idRubrique="+idrubrique); -> celui-ci go2();
Que se passe-t-il ? Ta seconde liste se remplit elle correctement et si tu fais un choix dedans, go2() est elle appelée, et si oui quelles sont les valeurs envoyées à tableau.php

Dans tableau.php enlève name="tableau" de la div.

ERE
04/08/2009, 11h02
andry.aime

Bonjour,
Donne le code HTML généré et nom pas le php pour le formulaire.

Citation:

echo "<div id=\"dir\" style=\"display:inline\">";

Cette balise n'est pas fermée, ainsi le div="tableau" est inclue dans "dir", et quand tu fais

Citation:

document.getElementById('dir').innerHTML = leselect;

Le div "tableau" n'existe plus.
Sinon

Citation:

echo "<div name='tableau'>";

il n'a pas d'id "tableau".
04/08/2009, 11h05
emmanuel.remy

Salut andry.aime

La balise est en fait refermée à la ligne

Code:

echo "</select></div><br><br><br><br>";

C'est vrai que cela manque de lisibilité ;)

ERE

Bonjour andry.aime.

Voici le code HTML généré:

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
<tr><td colspan="3" align="left">
<select name="liste_dossier_upload" id="liste_dossier_upload" onchange="go()">
<option value="-1">Aucun</option>
<option value="1">Pr&eacute;sentation</option>
<option value="2">Actualit&eacute;s</option>
<option value="3">R&eacute;alisations</option>
<option value="4">Plan</option>
<option value="5">Activit&eacute;s locales</option></select>&nbsp;
<div id="dir" style="display:inline"><select name="rep" id="rep" onchange="go3()"><option value="-1">Choisir une rubrique</option></select></div><br><br><br><br><td><div id="ordre">
<select name="ordre">
<option value="-1">/</option></select></div>
</td>
  </tr>                         
</table></table></td>
</form>
</div> 
<div id="tableau">
<table width="95%" cellspacing="1" border="0" bgcolor="#000000" align="center">
  <tr class="tabTitre">
    <td width="100%"> Liste des fichiers </td>
 </tr>
  <tr class="tabContenu">
    <td width="100%"><table width="80%" border="0">
            </TD>
            </TR>
    </table> 
</div> 
</BODY>
</html>

04/08/2009, 12h07
emmanuel.remy

T'as fait les autres tests (post précédent) ?
ERE
04/08/2009, 12h17
andry.aime

@emmanuel.remy il me faut un rendez-vous chez un ophtalmologue 8O;

@Perceuse-Killer as tu pris en compte la deuxième remarque que tu perd l'id avec :

Citation:

echo "<div name='tableau'>";

un div n'as pas de name mais id
et

Citation:

<select name="rep" id="rep" onchange="go3()">

Je pense que ça doit être go2().
04/08/2009, 13h30
Perceuse-Killer

Désolé pour ce manque de clarté. :?

Citation:

Citation:

<select name="rep" id="rep" onchange="go3()">

Je pense que ça doit être go2().

En effet.

Citation:

Salut,
enlève le go2()

Que se passe-t-il ? Ta seconde liste se remplit elle correctement et si tu fais un choix dedans, go2() est elle appelée, et si oui quelles sont les valeurs envoyées à tableau.php

Dans tableau.php enlève name="tableau" de la div.

Si j'enlève go2(), la seconde liste se remplit car c'est go() qui s'en charge mais je ne récupère aucune valeur dans le tableau comme devrait le faire go2().

Concernant l'id="tableau", j'ai effectué le remplacement.

Je parviens à récupérer mes paramètres en laissant go2(): "IdRubrique:1 et IdDossier:-1 " mais uniquement à la première sélection ensuite le contenu du tableau n'est plus rafraichi.
04/08/2009, 13h38
andry.aime

Mieux vaut tard que jamais, pourquoi ne pas utiliser un retour XML pour charger ton select et non pas utiliser innerHTML, ça évite ce genre de problème.
http://www.developpez.net/forums/d77...x/#post4489970
Attention, tu fais

Citation:

document.getElementById('tableau').innerHTML = leselect;

alors que dans le php tu as:

Citation:

echo "<div id='tableau'>";

ce qui duplique l'id "tableau".
04/08/2009, 14h21
Perceuse-Killer

Okay je vais creuser dans cette direction andry.aime. ;)

Citation:

Attention, tu fais

Code:

document.getElementById('tableau').innerHTML = leselect;

alors que dans le php tu as:

Code:

echo "<div id='tableau'>";

ce qui duplique l'id "tableau".

Je n'ai pas compris, si je ne déclare pas d'élément d'id "tableau" comment les données se positionnent-elles sur la page ?

Merci à vous deux pour vos réponses instructives. :zoubi:
04/08/2009, 14h34
andry.aime

Tu as déjà un id "tableau" alors que tu fais un innerHTML dont le nouveau contenu contient aussi un élément avec un id tableau ainsi tu as 2 id tableau.
C'est à dire tu as un nouveau div avec un id tableau à l'intérieur du div "tableau"

Re,

andry.aime a raison l'innerHTML sur un élément select est assez dangereux, mais bon, ici cela passe.

J'ai eu un peu de temps, donc voilà un code qui fonctionne, au moins tu auras de quoi faire ;) (note que j'ai pompé les parties comme getXhr, donc peut-être pas parfait,mais m'a permis de tester):

page html principale

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<script type="text/javascript">
function getXhr() {
	var xhr = null;
	if (window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}
	else if(window.ActiveXObject){
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { //pas de support
		alert("Pas de support pour XMLHttpRequest");
	}
	return xhr;
}
 
function go(){
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
      leselect = xhr.responseText;
      document.getElementById('dir').innerHTML = leselect;
    }
  }
 
  xhr.open("POST","liste2.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  sel = document.getElementById('liste_dossier_upload');
  idrubrique = sel.options[sel.selectedIndex].value;
  xhr.send("idRubrique="+idrubrique);
}
 
function go2(){
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
      leselect = xhr.responseText;
      document.getElementById('tableau').innerHTML = leselect;
    }
  }
  xhr.open("POST","tableau.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  sel = document.getElementById('liste_dossier_upload');
  idrubrique = sel.options[sel.selectedIndex].value;
  sucre = document.getElementById('rep');
  idrep = sucre.selectedIndex;
  //console.log("idRubrique="+idrubrique+"&idDossier="+idrep);
  xhr.send("idRubrique="+idrubrique+"&idDossier="+idrep);
}
 
</script>
 
  </head>
  <body>
    <select name="liste_dossier_upload" id="liste_dossier_upload" onchange="go();">
      <option value="-1">Aucun</option>
      <option value="1">Actualit&eacute;s</option>
      <option value="2">R&eacute;alisations</option>
      <option value="3">Plan</option>
    </select>
<div id="dir" style="display:inline">
  <select name="rep" id="rep" >
    <option value="-1">Choisir une rubrique</option>
  </select>
</div>
 
<div id="tableau">
</div>
  </body>
</html>

liste2.php (à toi de générer ton select moi je l'ai mis en dur):

Code:

1
2
3
4
5
6
<select id="rep" name="rep" onchange="go2();">
  <option value="rep1">Rep1</option>
  <option value="rep2">Rep2</option>
  <option value="rep3">Rep3</option>
  <option value="rep4">Rep4</option>
</select>

tableau.php

Code:

1
2
3
4
5
6
<?php
if(isset($_POST["idDossier"]) && isset($_POST["idRubrique"]))
{ 
echo $_POST["idDossier"]." et " .$_POST["idRubrique"];
}
?>

Bons dev,

ERE

05/08/2009, 14h29
Perceuse-Killer
Magnifique !! :ccool:

Tout le problème était là, je gérais mon évènement onchange="go2();" avant l'exécution du code ajax :
Code:

1 2 3 4 5 6 7 function go(){ . . . xhr.send("idRubrique="+idrubrique); go2(); }
Je savais bien que c'était aberrant. :calim2:
Il fallait insérer l'évènement dans liste2.php et non pas dans ma page html principale !

Un grand merci à tous les deux, vous m'avez levé une épine du pied.
J'étudie tout de même l'option du responseXML qui constitue un bon compromis.

Excellente journée,
Cordialement. ;)

PK