[AJAX] Ajax avec des checkbox

**Meloooo** · 28/02/2011, 14h36

Bonjour,
J'ai réalisé un tableau ou l'utilisateur peut choisir les données à afficher exemple :
Tache 1 - Gain +1000 - Catégorie A
Tache 2 - Gain +1000 - Catégorie A
Tache 3 - Gain -1000 - Catégorie B

L'utilisateur peut choisir d'afficher toutes les catégories, ou seulement les catégories A ou seulement les catégories B.
Quelque que soit les lignes que désirent afficher l'utilisateur, je veux récuperer le gain total pour chaque lien affichées.
Exemple :
Si l'utilisateur choisis d'afficher seulement les catégories A alors le gain total est de : +2000€ si il choisis d'afficher seulement les catégories B alors le gain total est de -1000€.
Mon souci c'est que je n'arrive pas à prendre en compte le choix de l'utilisateur.
Voici mon 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
 
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){
						alert(xhr.responseText);
					}
				}
		exploit = "";
		infra = "";
		bat = "";
		// false : pas cochée - true : cochée	
		if(document.getElementById('checkA').checked == true && document.getElementById('checkB').checked == false)
		{
		exploit = "A";
		data="Exploitation="+exploit;
		}
				xhr.open("POST","tableau_bord.php",true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(data);

Ce code permet de connaitre les checkbox cochés et de faire le traitement.
Appel de la fonction go() :

Code :

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

1
2
 
<input type="checkbox" onclick="go()" checked id="check2" name="check[]"

Et le traitement pour le gain total :

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
 
if(isset($_POST['A']))
{
echo "je rentre";
$sum = "SELECT DISTINCT SUM(tableau_gain_e) , SUM(tableau_gain_c) FROM tableau_bord WHERE tableau_type != 'B' ORDER BY tableau_gain_e";
 
$query_sum = mysql_query($sum);
$_sum = mysql_fetch_array($query_sum);
echo $_sum[0];
		echo '<td align="center" id="contenu_tab" class="e_tot" style="display:none;"  bgcolor="white">'.$_sum[0].'</td>';
		echo '<td align="center" id="contenu_tab" class="c_tot" style="display:none;" bgcolor="white">'.$_sum[1].'</td>';
}
else
{	
$sum = "SELECT DISTINCT SUM(tableau_gain_e) , SUM(tableau_gain_c) FROM tableau_bord WHERE  ORDER BY tableau_gain_e";
$query_sum = mysql_query($sum);
$_sum = mysql_fetch_array($query_sum);
echo '<td align="center" id="contenu_tab" class="e_tot" style="display:none;"  bgcolor="white">'.$_sum[0].'</td>';
echo '<td align="center" id="contenu_tab" class="c_tot" style="display:none;" bgcolor="white">'.$_sum[1].'</td>';
}

Et lorsque je décoche catégorie B, le gain total ne s'affiche pas, lorsque tout est coché tout est ok.
je précise que tout est sur la même page (l'affichage de mon tableau + l'appel ajax)

**andry.aime** · 28/02/2011, 16h43

Bonsoir,

if(isset($_POST['A']))

Tu n'envoies pas un parametre A.

Code :

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

if(isset($_POST['Exploitation'])&& $_POST['Exploitation'])=="A")

Tous tes td ont le stylel display:none.
A+.

**Meloooo** · 28/02/2011, 16h55

Je suis désolé en faite c'est que pour paraitre plus claire j'ai voulu modifier mes vrais données par A B et C
mais en faite c'est A = Exploitation B = Infrastructure et C = Batiment.

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
 
if(isset($_POST['Exploitation']) && $_POST['Exploitation'] == "Exploitation")
{
echo "je rentre";
$sum = "SELECT DISTINCT SUM(tableau_gain_e) , SUM(tableau_gain_c) FROM tableau_bord WHERE tableau_type = 'Exploitation' ORDER BY tableau_gain_e";
 
$query_sum = mysql_query($sum);
$_sum = mysql_fetch_array($query_sum);
echo $_SESSION['bidule'] = $_sum[0];
		echo '<td align="center" id="contenu_tab" class="e_tot" style="display:none;"  bgcolor="white">'. $_SESSION['bidule'].'</td>';
		echo '<td align="center" id="contenu_tab" class="c_tot" style="display:none;" bgcolor="white">'. $_SESSION['bidule'].'</td>';
}
else
{	
$sum = "SELECT DISTINCT SUM(tableau_gain_e) , SUM(tableau_gain_c) FROM tableau_bord ORDER BY tableau_gain_e";
$query_sum = mysql_query($sum);
$_sum = mysql_fetch_array($query_sum);
echo '<td align="center" id="contenu_tab" class="e_tot" style="display:none;"  bgcolor="white">marche po</td>';
echo '<td align="center" id="contenu_tab" class="c_tot" style="display:none;" bgcolor="white">marche pas</td>';
}

Voici le code non modifié
mais cela ne fonctionne pas il m'affiche toujours marche pas
Est-ce que je peux faire un appel ajax sur la même page que mon tableau ?

**andry.aime** · 28/02/2011, 17h09

Mais avec ton code Javascript tu n'envoies que la variable Exploitation avec la valeur A si les conditions sont vérifiées sinon ça envoie un null.

A+.

**Meloooo** · 28/02/2011, 17h12

Oui pour le moment j'essaye seulement avec la checkbox Exploitation.
Si ma variable $_POST['Exploitation'] == 'Exploitation' alors je fais la somme de mon gain seulement avec exploitation...
mais apparement ma variable POST n'existe pas

**andry.aime** · 01/03/2011, 06h18

Re,

Si tu veux envoyer Exploitation avec la valeur Exploitation

Code :

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

1
2
exploit = "Exploitation";
		data="Exploitation="+exploit;

A+.

**Meloooo** · 01/03/2011, 08h59

Bonjour,
Oui j'ai bien mis ce code pour Exploitation, je vous remontre tous mon code qui au passage ce situe sur la même page (ajax, tableau, et récuperation de mes variables "créer" en 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
 
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){
						//alert(xhr.responseText);
					}
				}

Code :

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

1
2
3
4
5
6
 
if(document.getElementById('check1').checked == true && document.getElementById('check2').checked == false && document.getElementById('check3').checked == false )
		{
		exploit = "Exploitation";
		data="Exploitation="+exploit;
		}

Code :

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

1
2
3
4
5
6
7
8
9
 
 if(isset($_POST['Exploitation']) && ($_POST['Exploitation'] == "Exploitation"))
{
$sum = "SELECT DISTINCT SUM(tableau_gain_e) , SUM(tableau_gain_c) FROM tableau_bord WHERE tableau_type = 'Exploitation' ORDER BY tableau_gain_e";
$query_sum = mysql_query($sum);
$_sum = mysql_fetch_array($query_sum);
echo $_SESSION['bidule'] = $_sum[0];
echo '<td align="center" id="contenu_tab" class="e_tot"  bgcolor="white">'.$_SESSION['bidule'].'</td>';
}

Peut être est-ce le fait que je fais sa sur la même page, car quand j'essayes de récupérer mes variables ajax sur une autre page, cela fonctionne... mais il faut que je passe par la même page. merci de votre aide andry.aime

**Meloooo** · 01/03/2011, 11h13

Bon j'ai essayé de passer par une autre page (et la je récupère bien mes résultats)
donc voici ma page tableau_bord.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
 
while($resultat = mysql_fetch_array($query))
{
$result = array();
if($resultat[1] == "Infrastructure") { $image = "<img src='images/ico/infrastructure.png'>";} else if($resultat[1] == "Exploitation"){ $image = "<img src='images/ico/exploitation.png'>"; } else { $image = "<img src='images/ico/batiment.png'>";}
if($resultat[4] == "0"){$pourc = "Enattente";$pourcent ="En attente"; $statut = "<img border='0' src='images/ico/statut.png' class='tTip'>";}else if($resultat[4] == "100"){$pourc="Terminé";$pourcent = "Terminé"; $statut = "<img border='0' src='images/ico/statut3.png' class='tTip' >";}else{$pourc="Encours";$pourcent = "En cours  +".$resultat[4]." %"; $statut = "<img border='0' src='images/ico/statut2.png' class='tTip'>";}
 
 
echo '<tr class="'.$resultat[1].' '.$resultat[3].' '.$pourc. ' '.$resultat[2].'">';
		echo '<td align="center" width="30px" bgcolor='.$bg.' style="display:none;" class="id_act" id="contenu_tab">'.$resultat[14].'</td>
		<td height="30px" width="280px" bgcolor='.$bg.' id="contenu_tab"><a href="#" style="text-decoration:none;color:#4c4c4c" class="tooltip2"><span style="margin-left:10px;">'.$cut.'</span><em><span style=line-height:'.$line_height.'>'.$saut.'</span></em></span></a></td>
		<td align="center" width="40px" bgcolor='.$bg.' class="processus" id="contenu_tab">'.$image.'</td>
		<td align="center" width="70px" bgcolor='.$bg.' class="priorite" id="contenu_tab">'.$resultat[2].'</td>
		<td align="center" width="85px" bgcolor='.$bg.' class="indicateur2" id="contenu_tab">'.$resultat[3].'</td>
		<td align="center" width="65px" bgcolor='.$bg.' class="statut" id="contenu_tab"><a href="#" class="tooltip">'.$statut.'<em><span style="line-height:29px;">'.$pourcent.'</span></em></span></a></td>
		<td align="center" width="75px" bgcolor='.$bg.' class="gain_e" id="contenu_tab">'.$resultat[5].'</td>
		<td align="center" width="75px" bgcolor='.$bg.' class="gain_c" id="contenu_tab">'.$resultat[6].'</td>
		<td align="center" width="55px" bgcolor='.$bg.' class="impact" id="contenu_tab"><img src="images/ico/impact.png"></td>
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="pred" id="contenu_tab">'.$resultat[8].'</td>	
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="delai" id="contenu_tab">'.$resultat[9].'</td>			
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="e_ini" id="contenu_tab">'.$resultat[10].'</td>			
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="e_fin" id="contenu_tab">'.$resultat[11].'</td>	
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="c_ini" id="contenu_tab">'.$resultat[12].'</td>	
		<td align="center" height="30px" width="85px" bgcolor='.$bg.' style="display:none;" class="c_fin" id="contenu_tab">'.$resultat[13].'</td>	
		';
		// pour ne pas afficher plusieurs fois la somme globale je rentre dans le if
}

Ce qui me permet d'afficher mon tableau.
ensuite j'ai ma page req_donnees qui est appellé lorsque je clique sur ma checkbox et ou je calcule mon gain total :

Code :

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

1
2
3
4
5
6
7
8
 
if(isset($_POST['Exploitation']))
{
$req = "SELECT SUM(tableau_gain_e) FROM tableau_bord WHERE tableau_type= 'Exploitation'";
$query = mysql_query($req);
$sum = mysql_fetch_array($query);
echo $sum[0];
}

Je récupère bien le bon gain total.
Mais comment faire pour le mettre dans mon tableau sur la page tableau_bord.php ?

**Meloooo** · 01/03/2011, 16h52

Encore moi

Désolé d'insister mais j'y suis presque, mon souci c'était que mon responsetext n'était jamais affiché, du coup j'ai ajouté cette ligne :

Code :

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

1
2
3
4
 
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('resultat').innerHTML = leselect;

Quand je fais un alert(leselect) tout se passe bien, j'ai bien les résultats escomptés pour toutes mes checkbox, mais il ne m'affiche seulement le résultat pour la checkbox Exploitation pas pour les autres...
Une piste ?

**andry.aime** · 01/03/2011, 17h42

Parce que tu ne lances une requête que pour Exploitation

et tu n'envoies une variable que pour Exploitation

.

[AJAX] Ajax avec des checkbox

AJAX

Discussions similaires

Partager

Partager