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
dans le tableau et de modifié le contenu de la
en utilisantinnerHTML (avec l'id de la
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
<!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" />
Choisir le programme que vous voulez editer
<!-- Bouton filter au debut pour demander à l'utilisateur s'il veut filtrer ou pas-->
<form>
</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)){
?>
" id="<?php echo $tousDomaine['domaine'];?> "/>
<label for="<?php echo $tousDomaine['domaine'];?>"><?php echo $tousDomaine['domaine'];?></label>
<?php
}?>
</fieldset>
<!-- 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
?>
<caption>Liste de types d'operation APR</caption>
----
Nom du type d'opération |
Domaine associé |
Editer |
supprimer |
<?php while($donnees = mysql_fetch_array($reponse))
{
//$i= $i+1; //incrementer le compteur
$typeoper=$donnees['typeoper'];
$domaineAssocie=$donnees['domaine'];
?>
----
<?php echo $typeoper;?>,
<?php echo $domaineAssocie;?>,
[updateDonneesAPR.html ]
</html>
PAGE ajaxSelectTypOperUpdate.php : pade de traitement AJAX
<?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-->
<caption>Liste de types d'operation APR</caption>
----
Nom du type d'opération |
Domaine associé |
Editer |
supprimer |
<?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'];
?>
----
<?php echo $typeoper;?>,
<?php echo $domaineAssocie;?>,
">,
" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
,
<?php
}
}
mysql_close($link);
?>
<?php
}
}
?>
Je sais qu'il y'au un moyen (en JavaScript)plus facile de le faire en affichant les types d'opération des domaines si ces derniers sont cochés et de ne pas les afficher s'il ne sont pas cochés mais je ne sais pas comment le faire.
Je sollicite vraiment votre aide car je galère depuis 5 jours là dessus.
cs_stay
Messages postés493Date d'inscriptionjeudi 7 juillet 2005StatutMembreDernière intervention24 mai 20174 5 mars 2013 à 18:58
Salut, en effet, il y a plus simple, en jQuery.
Le même cas sur ce topique.
Je te propose de réadapter le code sur ton application.
Pour le jQuery, y a pas mieux comme exemple.
Pour le PHP, j'ai uniquement adapté en PDO pour binder les données.
Évidement, avec cette méthode, tu pourras également retourner en json un message ou autre.
Si tu as des questions, n’hésites pas !
Merci beaucoup Steph.
Désolé d'avoir répondu tardivement. Enfait j'avais arrêté un peu cette partie que je dois reprendre à la fin du mois (je suis en stage).
Actuellement j'ai un soucis. Enfait j'ai un tableau rempli à partir des données de ma base.
Je voudrais cette fois avoir des boutons (+) à coté de chaque ligne de mon tableau et quand je clique sur un bouton il devient (-) et m'affiche les ligne contenant les détails de la ligne en question.
Mais je ne sais pas comment le faire,? qu'est ce qu'i faut utiliser ? CSS? JQUERY?
je n'ai pas trop d'idée.
