[AJAX] Un paramètre undefined

**Perceuse-Killer** · 31/07/2009, 11h40

Bonjour à tous,

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 :

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

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

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 :

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

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.

Cordialement.

PK

**emmanuel.remy** · 31/07/2009, 12h06

Salut,

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

Code :

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

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 :

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

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

**Perceuse-Killer** · 03/08/2009, 10h33

Bonjour emmanuel.remy et merci pour ta réponse aussi rapide.

J'ai retourné la chose dans tous les sens.

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

Code :

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

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.

Ensuite, dans ton code initial:

Code :

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

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 :

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

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.

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

Merci encore pour ton aide.

Bonne journée

PK

**emmanuel.remy** · 03/08/2009, 11h14

Salut,

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

Code :

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

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

**Perceuse-Killer** · 03/08/2009, 14h20

Exact, là j'ai fait fort.

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 :

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

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.

**emmanuel.remy** · 03/08/2009, 15h26

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

A mon avis il est vide ou undefined.

ERE

**Perceuse-Killer** · 03/08/2009, 16h00

Code :

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

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.

**emmanuel.remy** · 03/08/2009, 17h36

Re,

Une chose importante: tu écris dans go2()

Code :

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

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 :

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

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

**Perceuse-Killer** · 04/08/2009, 08h42

Bonjour emmanuel.remy et merci pour ta patience.

Voici le code :

code ajax

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

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

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

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>";
?>

**emmanuel.remy** · 04/08/2009, 10h56

Salut,

enlève le go2()

Code :

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

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

**andry.aime** · 04/08/2009, 11h02

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

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

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

Le div "tableau" n'existe plus.
Sinon

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

il n'a pas d'id "tableau".

**emmanuel.remy** · 04/08/2009, 11h05

Salut andry.aime

La balise est en fait refermée à la ligne

Code :

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

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

C'est vrai que cela manque de lisibilité

ERE

**Perceuse-Killer** · 04/08/2009, 11h22

Bonjour andry.aime.

Voici le code HTML généré:

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

**emmanuel.remy** · 04/08/2009, 12h07

T'as fait les autres tests (post précédent) ?
ERE

**andry.aime** · 04/08/2009, 12h17

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

;

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

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

un div n'as pas de name mais id
et

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

**Perceuse-Killer** · 04/08/2009, 13h30

Désolé pour ce manque de clarté.

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

En effet.

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.

**andry.aime** · 04/08/2009, 13h38

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

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

alors que dans le php tu as:

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

ce qui duplique l'id "tableau".

**Perceuse-Killer** · 04/08/2009, 14h21

Okay je vais creuser dans cette direction andry.aime.

Attention, tu fais

Code :

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

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

alors que dans le php tu as:

Code :

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

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.

**andry.aime** · 04/08/2009, 14h34

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"

**emmanuel.remy** · 04/08/2009, 16h34

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 :

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

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

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 :

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

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

Bons dev,

ERE

[AJAX] Un paramètre undefined

AJAX

Discussions similaires

Partager

Partager