[AJAX] Envoi de deux variable en xhr.send

**armelpiquet** · 27/03/2012, 14h21

Bonjour le code explique tout,

pour le fichier origine tout marche bien, la première liste deroulante marche parfaitement.

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
	<head>
		<script type='text/javascript'>
			var sid = "'.session_id().'";
			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 
				{ 
				   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(n)
			{
 
				var xhr = getXhr();
				xhr.open("POST","Vues/reqAjaxClasse.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('option1');
				option1= sel.options[sel.selectedIndex].value;
				xhr.send("option1="+option1+"&niveau="+n);
				alert("option1="+option1+"&niveau="+n);
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{					
						leselect = xhr.responseText;
						document.getElementById('option2').innerHTML = leselect;
 
					}
				}
 
			}
		</script>
	</head>
	<body>
		<form action="index.php?vue=creation_classe_option_conf" method="post">
			<?php 
                                if($_SESSION['niveau_classe'] == 6)
                                {
                                        $niveau = 6;
                                        $listeOption=$_SESSION['listeOptions6'];
                                }
                                elseif($_SESSION['niveau_classe'] == 5)
                                {
                                        $niveau = 5;
                                        $listeOption=$_SESSION['listeOptions5'];
                                }
                                elseif($_SESSION['niveau_classe'] == 4)
                                {
                                        $niveau = 4;
                                        $listeOption=$_SESSION['listeOptions4'];
                                }
                                else
                                {
                                        $niveau = 3;
                                        $listeOption=$_SESSION['listeOptions3'];
                                }
                                
                        ?>
			<fieldset class="interieur_cadre_inscription">
 
				<label>Option1 : </label>
				<select name='option1' id='option1' onchange='go(<?php echo $niveau ?>)'>
					<option value='-1'>AUCUNE</option>
					<?php
                                                foreach ($listeOption as $data)
                                                {
                                                        echo '<option>'.$data[0].' </option>';
                                                }
                                        ?>
				</select><br>
				<label>Option2 : </label>
				<div name='option2' id='option2' style='display:inline'>
					<select name='option2'>
						<option value='-1'>AUCUNE</option>
					</select>
				</div>
				<center><input type="submit"></center>
			</fieldset>
		</form>
	</body>
</html>

Le alert("option1="+option1+"&niveau="+niveau) renvoi bien ce qu'il me faut.

Le fichier de requete est le suivant :

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
<?php
        $chaine = $_POST['option1'];
        $deconcatenation = explode("&", $chaine);
        $option1 = $deconcatenation[0];
        $niveau = $deconcatenation[1]
        $dec_option = explode("=", $option1);
        $option1=$dec_option[1];
        $dec_niveau=explode("=", $niveau);
        $niveau=$dec_niveau[1];
        
        if($niveau == 6)
                $inc = "o___";
        elseif($niveau == 5)
                $inc = "_o__";
        elseif($niveau==4)
                $inc = "__o_";
        else
                $inc = "___o";
        $var="<select name='option2'><option value='-1'>TOTO</option>";
        if(isset($option1))
        {
                mysql_connect("localhost","root"," ");
                mysql_select_db("AutoClasse");
                $res = mysql_query("SELECT `nom` FROM `option` WHERE `incompatibilite1`<>'".$option1."' AND `incompatibilite2`<>'".$option1."'AND `niveau` like'".$inc."'");
                $i = 0;
                while($row = mysql_fetch_assoc($res))
                {
                        $var.="<option value='".$i."'>".$row['nom']."</option>";
                        $i++;
                }
        }
        $var.="</select>";
        echo $var;
        
?>

La deuxième liste déroulante ne se met jamais à jour.

Merci d'avance.

PS : je crois que je vais finir par trouver une autre utilité au cable ethernet...

**andry.aime** · 28/03/2012, 07h16

Bonjour,

$deconcatenation = explode("&", $chaine);

Si tu as de caractères spéciaux comme "&" dans la variable "option1", tu dois l'encoder avec encodeURI avant de l'envoyer.
Sinon, pour récupérer les 2 variables

Code php :

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

1
2
$option1 = $_POST["option1"];
$niveau = $_POST["niveau"];

Peut-on voir ton code HTML généré?

A+.

**armelpiquet** · 28/03/2012, 11h38

J'ai essayer votre sollution en l'integrant dans le fichier de requete ajax. Mais sans grand résultat.

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
<?php
        /*$chaine = $_POST['option1'];
        $deconcatenation = explode("&", $chaine);
        $option1 = $deconcatenation[0];
        $niveau = $deconcatenation[1]
        $dec_option = explode("=", $option1);
        $option1=$dec_option[1];
        $dec_niveau=explode("=", $niveau);
        $niveau=$dec_niveau[1];*/
        $option1 = $_POST["option1"];
        $niveau = $_POST["niveau"];
        if($niveau == 6)
                $inc = "o___";
        elseif($niveau == 5)
                $inc = "_o__";
        elseif($niveau==4)
                $inc = "__o_";
        else
                $inc = "___o";
        $var="<select name='option2'><option value='-1'>TOTO</option>";
        if(isset($option1))
        {
                mysql_connect("localhost","root","4%xttfllk5$$60%4q");
                mysql_select_db("AutoClasse");
                $res = mysql_query("SELECT `nom` FROM `option` WHERE `incompatibilite1`<>'".$option1."' AND `incompatibilite2`<>'".$option1."'AND `niveau` like'".$inc."'");
                $i = 0;
                while($row = mysql_fetch_assoc($res))
                {
                        $var.="<option value='".$i."'>".$row['nom']."</option>";
                        $i++;
                }
        }
        $var.="</select>";
        echo $var;
        
?>

Pour ce qui est de la console d'erreur, il n'y en a aucune.

**andry.aime** · 28/03/2012, 12h04

if($niveau == 6)

Code :

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

if(intval($niveau) == 6)

Fait echo des valeurs postés.
Peut-on voir ton code html généré et Javascript actuels?

**armelpiquet** · 28/03/2012, 13h10

Qu'est ce que tu entend par html généré et js actuel? Je n'utilise pas d'autre js du site.
Quand au valeur, j'ai un alert() des valeurs du xhr.send() et affiche bien les valeurs que je veux envoyer.

**andry.aime** · 28/03/2012, 13h40

Html généré, quand la page s'affiche, regarde le source dans ton navigateur et c'est ça. Js , le code javascript que tu as actuellement.

A+.

**armelpiquet** · 28/03/2012, 13h43

voila le 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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>AutoClasse</title>
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/Main.css" />
 
 
	</head>
		<body>
			<div class="page-width">
				<div class="menu_in">
					<div>
					<a href="index.php"><div id="logo-align"></div></a>
						<div id="menu-align">
							<ul id="menu">
 
 
 
	<li><a href="#">Importer</a></li>
</ul>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
				<div class="page-width">
					<br/>
 
 
				</div>
				<div class="clear"></div>
				<div id="white-container">
					<br/>
					<div class="page-width">
						<div class="contentbox">
							<img class="paper" src="images/paper.png" alt="Content"/>
							<div class="paperalign">
<html>
	<head>
		<script type='text/javascript'>
			var sid = "'.session_id().'";
			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 
				{ 
				   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(n)
			{
 
				var xhr = getXhr();
				xhr.open("POST","Vues/reqAjaxClasse.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('option1');
				option1= sel.options[sel.selectedIndex].value;
				xhr.send("option1="+option1+"&niveau="+n);
				alert("option1="+option1+"&niveau="+n);
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{					
						leselect = xhr.responseText;
						document.getElementById('option2').innerHTML = leselect;
 
					}
				}
 
			}
		</script>
	</head>
	<body>
		<form action="index.php?vue=creation_classe_option_conf" method="post">
						<fieldset class="interieur_cadre_inscription">
 
				<label>Option1 : </label>
				<select name='option1' id='option1' onchange='go(6)'>
					<option value='-1'>AUCUNE</option>
					<option>CINEMA </option><option>LVB </option>				</select><br>
				<label>Option2 : </label>
				<div name='option2' id='option2' style='display:inline'>
					<select name='option2'>
						<option value='-1'>AUCUNE</option>
					</select>
				</div>
				<center><input type="submit"></center>
			</fieldset>
		</form>
	</body>
</html>
						</div>
					</div>
				</div>
				<div class="clear"></div>
				<br/>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer-container">
			<div class="page-width">
				<div class="footdivleft">
					<div class="text-left">Copyleft <span style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -khtml-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block;">
						&copy;</span> Armel PIQUET</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
</html>

et le js :

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
		<script type='text/javascript'>
			var sid = "'.session_id().'";
			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 
				{ 
				   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(n)
			{
 
				var xhr = getXhr();
				xhr.open("POST","Vues/reqAjaxClasse.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('option1');
				option1= sel.options[sel.selectedIndex].value;
				xhr.send("option1="+option1+"&niveau="+n);
				alert("option1="+option1+"&niveau="+n);
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{					
						leselect = xhr.responseText;
						document.getElementById('option2').innerHTML = leselect;
 
					}
				}
 
			}
		</script>

Voila, merci de ton attention a ce sujet.

**andry.aime** · 28/03/2012, 14h55

Tu ne dois pas avoir plusieurs balise html, head, body dans un document

tes options n'ont pas de value

<option>CINEMA </option><option>LVB </option>

Un div n'a pas d'attribut name

Coté php, fait des echo des valeurs postées pour voir si les données sont bien transmises.

**armelpiquet** · 28/03/2012, 15h10

les option de la deuxième liste déroulante découlent de la première et d'une requete sql. Il est donc normal qu'il n'ai pas de valeur etant donné que ça echoue avant.

**andry.aime** · 28/03/2012, 16h14

Envoyé par armelpiquet

les option de la deuxième liste déroulante découlent de la première et d'une requete sql. Il est donc normal qu'il n'ai pas de valeur etant donné que ça echoue avant.

sel = document.getElementById('option1');

<select name='option1' id='option1' onchange='go(6)'>
<option value='-1'>AUCUNE</option>
<option>CINEMA </option><option>LVB </option> </select>

Et prend aussi en compte tous les autres remarques.

**armelpiquet** · 28/03/2012, 16h22

J'ai peut etre pas précisé, je suis débutant en js/ajax, donc j'essaye de comprendre tes explications, mais je ne les comprend pas forcement....

Les valeurs de la 1ere liste déroulantes découlent d'une requete sql, et la deuxieme découle de la première, du niveau et d'une requete sql.

**andry.aime** · 28/03/2012, 17h23

1- Comme j'ai dit plus haut, ton code html déjà n'est pas bon. Commence par le réorganiser.
2- Si tu regarde bien, les options de ton premier select n'ont pas de value.

**armelpiquet** · 28/03/2012, 17h36

Je viens de changer mon code pour éviter d'avoir deux head deux body.... Je ne vois pas ce que tu entend par la value du select.

Dsl de mes incapacités