[AJAX] Modifier quantité (ajax)

**Kenshin86** · 22/04/2010, 18h19

Bonjour,

Déja merci pour l'aide que vous allez m'apporter.

J'aimerais lors d'une commande, modifier la quantité (plutôt de façon dynamique avec de l'ajax) afin d'éviter l'usage d'un bouton modifier.

J'ai deux soucis :

1) Avec ce code (ci-dessous), il me renvoie la valeur du "select" (quantité) mais malheureusement, il me renvoie toujours la valeur du premier select, même lorsque je modifies les autres.

2) j'aimerais récupérer l'id de l'article en question (ou la quantité à été modifiée), ici par contre, je n'ai aucun retour. Je ne sais pas si c'est possible lorsque je modifie une liste(de quantité) concernant un article, que l'ajax me renvoie cette nouvelle quantité ET le numéro de l'article en question

page 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
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
135
136
137
138
139
140
141
142
143
144
145
146
<head>	
	<script language="javascript" src="ajax.js"> </script> <!-- APPEL FICHIER AJAX.JS -->
</head>
<?php
 
include('affiche.php');
 
$tab=$_SESSION['commande'];
 
?>
 
<div id="details_panier">
	Articles sélectionnés
	<table class="center_bloc" border="1" bgcolor="#FF6633" align="center" cellspacing="2" cellpadding="2" height="1%" width="100%"> 
			<tr bgcolor="white">
				<th>Des.</th> 
				<th>Qté</th>
				<th>Sup</th>
			</tr>	
	<?php
                        
        foreach($tab as $key => $value)
        {
                $sql = "SELECT id_article,designation_article FROM article WHERE id_article='".$key."' ";
                $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
                while ($row = mysql_fetch_row($req))
                {
                        echo '<tr bgcolor="white">';
                                echo '<form method="post" action="index.php?page=supp_article1_2">';
                                        $row[1]=substr($row[1], 0, 30); 
                                        echo '<td>'.$row[1].'</td>';
                                        ?>
					<td><select name="qte" id='qte' onchange='go_maj_qte()' >
										<option value=<?php echo $value;?> selected><?php echo $value?> &nbsp </option>
										<?php
                                                                                if($value==1)
                                                                                {
                                                                                        ?>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==2)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==3)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==4)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==5)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==6)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<?php
                                                                                }
                                                                                ?>
										</select></td>
 
										<input type="hidden" name="id_article" id="id_article" value="<?php echo $row[0]; ?>">
 
					<?php
                                        //echo '<td><img src ="css/supp.jpg" width="20" height="20" onClick(submit();)></img></td>';
                                        echo '<td><input type="submit" value="X"/></td>';
                                        echo '</form>'; 
                }                                               
                                        echo '</tr>';
        }
                ?>
		</table>
</div>	
 
<div id='new_qte' style='display:inline'> 
</div>		
 
<div id="details_panier2">
<form method="post" action="index.php?page=traitement_validation_panier">
	<table class="center_bloc" >
		<tr>
			<td> Priorité &nbsp </td>
			<td>
			<input type="radio" name="priorite" value="1"> Urgent 
			&nbsp <input type="radio" name="priorite" value="2"> Moyen
			&nbsp <input type="radio" name="priorite" value="3"> Faible
			</td>
		</tr>
		<tr>
		<td> &nbsp Description &nbsp </td>
		<td><textarea style="FONT-SIZE: 10pt; FONT-FAMILY: Verdana" onkeyup="this.value=this.value.slice(0,150)" name="description"  value="" rows=5 cols=37></textarea></td>
	</tr>
	</table>
 
		<br />
		<br />
		<tr>
			 <td><input type="reset"></td>
			 <td><input type="submit" value="Valider"></td>
		</tr>
		<br /><br />
 
		<br />
</form> 
</div>
<?php
include('espace.php');
echo "<br /><br /><br />";
?>

partie ajax 1 :

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
function go_maj_qte()
{ 
	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;
			alert(leselect);			
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('new_qte').innerHTML = leselect; 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajax_maj_qte.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 du corps de métier
	sel = document.getElementById('qte'); 
	quantite = sel.options[sel.selectedIndex].value; 
	xhr.send("qte_="+quantite);	
}

partie ajax 2 (php):

Code :

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

1
2
3
$qte=$_POST['qte_'];
 
echo $qte;

**Kenshin86** · 22/04/2010, 21h10

Vu que c'est assez compliqué avec l'AJAX, j'ai pensé à une autre solution pour contourner le problème :

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
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
135
136
137
138
139
140
141
142
<?php
 
include('affiche.php');
 
$tab=$_SESSION['commande'];
 
?>
 
<div id="details_panier">
<form method="post" action="index.php?page=traitement_validation_panier">
	Articles sélectionnés
	<table class="center_bloc" border="1" bgcolor="#FF6633" align="center" cellspacing="2" cellpadding="2" height="1%" width="100%"> 
			<tr bgcolor="white">
				<th>Des.</th> 
				<th>Qté</th>
				<th>Sup</th>
			</tr>	
	<?php
                        
        foreach($tab as $key => $value)
        {
                $sql = "SELECT id_article,designation_article FROM article WHERE id_article='".$key."' ";
                $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
                while ($row = mysql_fetch_row($req))
                {
                        echo '<tr bgcolor="white">';
                                echo '<form method="post" action="index.php?page=supp_article1_2">';
                                        $row[1]=substr($row[1], 0, 30); 
                                        echo '<td>'.$row[1].'</td>';
                                        ?>
					<td><select name="qte" id='qte'>
										<option value=<?php echo $value;?> selected><?php echo $value?> &nbsp </option>
										<?php
                                                                                if($value==1)
                                                                                {
                                                                                        ?>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==2)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==3)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==4)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==5)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==6)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<?php
                                                                                }
                                                                                ?>
										</select></td>
 
										<input type="hidden" name="id_article" id="id_article" value="<?php echo $row[0]; ?>">
 
					<?php
                                        //echo '<td><img src ="css/supp.jpg" width="20" height="20" onClick(submit();)></img></td>';
                                        echo '<td><input type="submit" value="X" name="action"/></td>';                 
                }                                               
                                        echo '</tr>';
        }
                ?>
		</table>
</div>	
 
 
 
<div id="details_panier2">
 
	<table class="center_bloc" >
		<tr>
			<td> Priorité &nbsp </td>
			<td>
			<input type="radio" name="priorite" value="1"> Urgent 
			&nbsp <input type="radio" name="priorite" value="2"> Moyen
			&nbsp <input type="radio" name="priorite" value="3"> Faible
			</td>
		</tr>
		<tr>
		<td> &nbsp Description &nbsp </td>
		<td><textarea style="FONT-SIZE: 10pt; FONT-FAMILY: Verdana" onkeyup="this.value=this.value.slice(0,150)" name="description"  value="" rows=5 cols=37></textarea></td>
	</tr>
	</table>
 
		<br />
		<br />
		<tr>
			 <td><input type="reset"></td>
			 <td><input type="submit" value="Valider" name="action"/></td> 
		</tr>
		<br /><br />
 
		<br />
</form> 
</div>
<?php
include('espace.php');
echo "<br /><br /><br />";
?>

traitement

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
$action = $_POST['action'];
if($action=="Valider")
{
	//echo "Validation";
	$id_article=$_POST['id_article'];
 
	echo $id_article;
 
}
elseif($action=="X")
{
	//echo "Suppression";
	$id_article=$_POST['id_article'];
	$tab=$_SESSION['commande'];
	unset($tab[$id_article]);
	$_SESSION['commande']=$tab;
 
	header("location:index.php?page=valider_panier");
}

Lorsque je cliques sur le bouton X, il me supprime bien l'article en question, cependant lorsque je cliques sur le bouton "Valider", je ne peut récupérer la quantité du formulaire.

**Kenshin86** · 22/04/2010, 22h00

Je me suis remis à l'AJAX.

Rien à faire... il me renvoie toujours la quantité du premier select et toujours pas l'id de l'article. C'est fou, puisque quand je fais avec le bouton, cela fonctionnes

**E.Bzz** · 23/04/2010, 10h52

Bonjour,

Envoyé par Kenshin86

il me renvoie toujours la quantité du premier select

Normal !
Avec ça dans une boucle (while PHP)

Code :

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

 id='qte'

tu as forcément une duplication de l'id, ce qui est interdit.

Du coup, il prend le premier qu'il trouve.
Ajoute un compteur à l'id et au name afin de pouvoir identifier chaque select de manière unique.

A+

**Kenshin86** · 23/04/2010, 14h49

D'accord, mais comment ajouter le compteur ? je n'ai pas compris

Si c'est quelque chose comme id=qte?identifiant=$row[0] , ça ne fonctionnes pas il me semble

**E.Bzz** · 23/04/2010, 14h50

Ben une variable PHP que tu incrémentes dans la boucle et que tu concatènes à la partie fixe de l'id ...

A+

**Kenshin86** · 23/04/2010, 14h55

Ok, C'est bien à ce que j'avais pensé alors.

J'ai mis ça :

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
	foreach($tab as $key => $value)
	{
 
		$sql = "SELECT id_article,designation_article FROM article WHERE id_article='".$key."' ";
		$req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
		while ($row = mysql_fetch_row($req))
		{
			echo '<tr bgcolor="white">';
				echo '<form method="post" action="index.php?page=supp_article1_2">';
					$row[1]=substr($row[1], 0, 30); 
					echo '<td>'.$row[1].'</td>';
					$id_select="qte".$row[0];
					echo"<td><select name='$id_select' id='$id_select' onchange='go_maj_qte()'>";
					?>
										<option value=<?php echo $value;?> selected><?php echo $value?> &nbsp </option>
										<?php
                                                                                if($value==1)
                                                                                {
                                                                                        ?>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==2)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==3)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==4)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==5)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=6>6 &nbsp </option>
											<?php
                                                                                }
                                                                                if($value==6)
                                                                                {
                                                                                        ?>
											<option value=1>1 &nbsp </option>
											<option value=2>2 &nbsp </option>
											<option value=3>3 &nbsp </option>
											<option value=4>4 &nbsp </option>
											<option value=5>5 &nbsp </option>
											<?php
                                                                                }
                                                                                ?>
										</select></td>
 
										<input type="hidden" name="id_article" id="id_article" value="<?php echo $row[0]; ?>">
 
					<?php
					//echo '<td><img src ="css/supp.jpg" width="20" height="20" onClick(submit();)></img></td>';
					echo '<td><input type="submit" value="X"/></td>';
					echo '</form>';	
		}						
					echo '</tr>';
	}

Je penses que la c'est correct, cependant, je n'ai aucun retour de l'ajax.

surement parce que maintenant il ne retrouve pas l'id que j'ai mis dans ma fonction ajax :

Code :

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

sel = document.getElementById('qte');

**Kenshin86** · 23/04/2010, 15h14

Puisque lorsque je met, il m'affiche la nouvelle quantité de l'article que j'ai modifié.

Code :

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

sel = document.getElementById('qte433');

Mais je ne vois pas comment faire ceci dynamiquement

Et ça aurait été bien si je pouvais récupérer la suite de l'id (c'est à dire le numéro de l'article) afin que je puisse renvoyer deux valeurs (c'est à dire, pour chaque modification, la nouvelle quantité et l'id en question), je serais sauvé la.

**E.Bzz** · 23/04/2010, 15h21

Oui, il faut du coup indiquer à la fonction quel select elle est en train de traiter.
Il suffit de le passer en paramètre

Code :

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

onchange='go_maj_qte(this)'

puis de le réutiliser dans la fonction

Code :

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

function go_maj_qte(sel)

Il te suffit donc de virer la ligne

Code :

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

sel = document.getElementById('qte');

puisque sel est déjà défini lors de l'appel ...

EDIT : dans la fonction, tu accèdes à l'id simplement avec

Code :

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

sel.id

A+

**Kenshin86** · 23/04/2010, 15h52

Merci vraiment beaucoup.

Cela fonctionne.

Maintenant, une toute dernière chose, pourrais-je récupérer la chaine suivant l'id du select ? c'est à dire le numéro de l'article. Ou alors, pourrais-je l'avoir autrement?

Une fois que j'aurais les deux (quantité et numéro de l'article) , je pourrais effectuer mon traitement.

**E.Bzz** · 23/04/2010, 15h59

Envoyé par Kenshin86

pourrais-je récupérer la chaine suivant l'id du select ? c'est à dire le numéro de l'article. Ou alors, pourrais-je l'avoir autrement?

Tu peux soit le récupérer à partir de l'id (avec un substr()), soit profiter de ta boucle PHP pour le générer en 2° paramètre de ta fonction (dans ce cas, n'oublie pas de l'entourer de quotes).

A+

**Kenshin86** · 23/04/2010, 16h21

J'ai choisi la première option.

Du coup, j'ai bien l'affichage de mes 2 variables, mais j'ai un problème je ne peut envoyer qu'une variable.

Code :

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

1
2
3
//xhr.send("qte_="+quantite);	
//xhr.send("id_article="+idarticle);	
xhr.send("id_article="+idarticle+"&qte_="+qte);

Lorsque je fais un xhr send (avec une variable), cela fonctionne mais pas avec les deux.

**E.Bzz** · 23/04/2010, 16h26

Envoyé par Kenshin86

Lorsque je fais un xhr send (avec une variable), cela fonctionne mais pas avec les deux.

Y a pas de raison ...

Tu es sûr que ce n'est pas la récupération PHP qui pose problème ?

A+

**Kenshin86** · 23/04/2010, 16h29

Code :

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

1
2
3
4
5
6
7
8
$qte=$_POST['qte_'];
 
echo $qte;
 
 
$id_article=$_POST['id_article'];
 
echo $id_article;

Voici ce que j'ai dans la récupération PHP.

Lorsque je fais un alert :

Code :

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

alert("id_article="+idarticle+"&qte_="+qte);

Je n'ai pas d'affichage.

Je me suis trompé, c'était quantite et qte, le nom de ma variable

**E.Bzz** · 23/04/2010, 16h46

Envoyé par Kenshin86

Je me suis trompé, c'était quantite et qte, le nom de ma variable

Donc ça marche ou toujours pas ?

A+

**Kenshin86** · 23/04/2010, 16h54

Oui cela fonctionne.

Je te remercies vraiment E.Bzz.

Je n'aurais pas réussi sinon.

[AJAX] Modifier quantité (ajax)

AJAX

Discussions similaires

Partager

Partager