[AJAX] Filtrer données d'un tableau avec des checkbox en Ajax et JS
Bonjour,
j'ai affiché à l'aide d'un tableau mes données contenues dans ma base de données MYSQL. Le tableau affiche une colonne ville et une colonne pays associé.
j'ai fait un option "filtrer par pays" en haut du tableau qui lorsque je clique dessus m'affiche une liste de checkbox des pays. A partir de là je pourrais cocher les pays pour lesquels je veux afficher leurs villes et cliquer un bouton ok pour valider.
j'ai essayé de le faire en JavaScript et Ajax mais j'ai des soucis
Notation : pays ==>DOMAINE et
ville===>Type opération
Voici ma demarche :
quand l'utilisateur arrive sur la page, je lui présente la liste de toutes les villes (je les appelles Type opération ici), je mets un bouton "filtrer par domaines" tous en haut du tableau. lorsqu'on clique sur ce bouton, j'affiche la liste des checkboxs contenant les pays (DOMAINE ici) et avec un bouton "ok" en bas muni de l'option onclick.
L'utilisateur cochera les nom de pays (DOMAINE ici) dont il souhaite afficher leurs villes ( type opération ici). Apres il doit cliquer sur le bouton "ok "qui le dirige vers la fonction 'go()' du javascript. Cette fonction va récupérer tous les noms des checkboxs qui sont cochés et les mettre dans un tableau que je passe à ma fonction Ajax qui fera les traitement appropriés (lancer les requêtes et afficher les résultats)
Le problème c'est que Quand je clique sur mon bouton "filtrer par domaine" j'ai bien ma liste de checkboxs mais après avoir coche les checkboxs, quand je clique sur le bouton "ok" rien ne se passe) :o
Je ne sais pas pourquoi??
j'ai des doutes sur le faite d'avoir mis des <div> dans le tableau et de modifié le contenu de la <div> en utilisant innerHTML (avec l'id de la <div>dans la fonction go() )
Aussi je ne sais pas si c'est bon de faire : quand l'utilisateur appuis pas sur le bouton "filtrer par domaines", afficher les checkboxs contenant ces derniers SINON afficher toutes les villes (type opération ici) .
Serait -il mieux de remplacer ça par un case "cocher tous" qui est affiché par défaut au début?
Voici le code
PAGE selectTypOperUpdate.php : page d'affichage avec javascript
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
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
| <!DOCTYPE html>
</html>
<head>
<title>editer type operation</title>
<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 quand une case est coché
*/
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){
leTableau = xhr.responseText;
document.getElementById('tabeoperation').innerHTML = leTableau;
}
}
// utilisation du post
xhr.open("POST","ajaxSelectTypOper.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ici, recuperation l'id du domaine (qui est la clé primaire de ma table domaine)
var checkboxes = document.getElementsByTagName("choix");
var MonTableau = new Array();
for (var i = 0, iMax = checkboxes.length; i < iMax; ++i) {
var check = checkboxes[i];
if (check.type=="checkbox" && check.checked)
{
//Acces ici à chaque checkbox cochée
domaine = check.name;
MonTableau[i]=domaine;
}
}
//envoi du tableau
//xhr.send("MonTableau="+MonTableau);
xhr.send("MonTableau="+JSON.stringify(MonTableau));
}
</script>
</head>
<link rel="stylesheet" href="styleTable.css" />
<body>
<h2>Choisir le programme que vous voulez editer</h2>
<!-- Bouton filter au debut pour demander à l'utilisateur s'il veut filtrer ou pas-->
<form>
<input type="submit" name="filter" value="filtrer avec Domaine">
</form>
<?php
$link=mysql_connect("localhost", "root", "" );
$bdd=mysql_select_db("basec3p",$link );
if(!$bdd){
die ('Impossible de sélectionner la base de données : ' . mysql_error());
}
//requette pour afficher les type df'operation quand on arrive sur la page (avant filtre , on affiche tout les type d'operation)
$reponse = mysql_query("SELECT * FROM typeoperation " );
//requette pour chercher la liste des domaine à mettre dans les checkbox
$rep2=mysql_query("SELECT DISTINCT domaine FROM domaine " );
//Si onn a cliquer sur le bouton "filtrer avec domaine"
if (isset($_GET['filter']))
{
?>
<fieldset style="width: 800px">
<legend>Critere d'affichage</legend>
<?php
//boucle pour afficher les checkbox
while($tousDomaine=mysql_fetch_array($rep2)){
?>
<input class="choix" type="checkbox" name="<?php echo $tousDomaine['domaine'] ?>" id="<?php echo $tousDomaine['domaine'];?> "/>
<label for="<?php echo $tousDomaine['domaine'];?>"><?php echo $tousDomaine['domaine'];?></label><br />
<?php
}?>
</fieldset>
</br><input id="idFiltre" type="button" value="ok" onclick='go()'/> <!-- VALIDER LE CHOIX-->
<?php
}
//AFFICHAGE DU TABLEAU PAR DEFAUT QUAND ON ARRIVE SUR LA PAGE AVANT DE FILTRER
else{
//$i=0; //pour l'affichage des numeros
?>
<table>
<caption>Liste de types d'operation APR</caption>
<div id='tabeoperation'>
<tr>
<th>Nom du type d'opération</th>
<th> Domaine associé </th>
<th> Editer </th>
<th> supprimer </th>
</tr>
<?php while($donnees = mysql_fetch_array($reponse))
{
//$i=$i+1; //incrementer le compteur
$typeoper=$donnees['typeoper'];
$domaineAssocie=$donnees['domaine'];
?>
<tr>
<td><?php echo $typeoper;?></td>
<td><?php echo $domaineAssocie;?></td>
<td><a href="updateTypeOper.php?action=edit&nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
<td><a href="updateTypeOper.php?action=delete&nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
</tr>
<?php
}
mysql_close($link);
?>
</div>
</table>
<?php
}
?>
<p><a href="updateDonneesAPR.html"><img src="BoutonRetour.jpg" title="retour" /> </a></p>
</body>
</html> |
PAGE ajaxSelectTypOperUpdate.php : pade de traitement 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
| <?php
// si le bouton ok a ete cliqué
if(isset($_POST['ok'])){
$link=mysql_connect("localhost", "root", "" );
//connexion à la bdd
$bdd=mysql_select_db("basec3p",$link );
if(!$bdd){
die ('Impossible de sélectionner la base de données : ' . mysql_error());
}
$tab=array();
//$tab=$_POST['MonTableau'];
$tab=json_decode($_POST['MonTableau']);
if($tab!=NULL)
{
?>
<!-- DEBUT DU TABLEAU-->
<table id="tabeoperation">
<caption>Liste de types d'operation APR</caption>
<tr>
<th>Nom du type d'opération</th>
<th> Domaine associé </th>
<th> Editer </th>
<th> supprimer </th>
</tr>
<?php
//POUR CHAQUE ELEMENT DU TABLEAU RECUPERE
foreach($tab as $element)
{
//RECUPERER LES TYPE OPERATION CORRESPONDANT ET FAIRE LAFFICHAGE
$reponseTypOper = mysql_query("SELECT typeoper FROM typeoperation WHERE domaine=\"$element\"" );
while($donnesDomaine = mysql_fetch_array($reponseTypOper))
{
$typeoper=$donnesDomaine['typeoper'];
$domaineAssocie=$donnesDomaine['domaine'];
?>
<tr>
<td><?php echo $typeoper;?></td>
<td><?php echo $domaineAssocie;?></td>
<td><a href="updateTypeOper.php?action=edit&nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
<td><a href="updateTypeOper.php?action=delete&nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
</tr>
<?php
}
}
mysql_close($link);
?>
</table>
<?php
}
}
?> |
Merci d'avance de votre aide
