Je m'en remets à vous car je bute sur un problème depuis quelques jours.
Dans le but de créer un tableau de bord, je dois afficher un tableau de données selon un mois et une année (donc deux listes déroulantes). Pour faire ça dynamiquement, j'ai vu qu'il fallait utiliser AJAX et j'ai suivi un tuto sur w3schools qui montrait comment afficher un tableau en fonction de la sélection dans UNE SEULE liste déroulante.
J'ai essayé d'adapter mon code à la fonction javascript et ça donne ça:
Le fichier formAnnee.php:
function showIndic(str,str2) {
if (str == "" || str2 == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","form.php?date="+str+str2,true);
xmlhttp.send();
}
}
J'ai aussi une première liste déroulante dans laquelle j'affiche les mois et une deuxième liste déroulante qui affiche les années à partir de 2016:
J'ai un autre fichier "form.php" qui lui affiche le tableau en fonction des valeurs récupérées des deux listes déroulantes:
<?php
$selectedDate = intval($_GET['date']);
$mois = substr($selectedDate,-1);
if($mois != "10" || $mois != "11" || $mois !="12")
$mois = "0".$mois;
$year = substr($selectedDate,1);
$date = $mois."/".$year;
// on récupère les données de la messagerie pour la date sélectionnée
$req = $bdd->query('SELECT * FROM indicateur WHERE date = "'.$date.'" AND id_domaine = 1');
echo "<table>
<tr>
<th>Nom</th>
<th>Date</th>
<th>Valeur</th>
</tr>";
while($row = $req->fetch()) {
echo "<tr>";
echo "<td>" . $row['nom'] . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td>" . $row['valeur'] . "</td>";
echo "</tr>";
}
echo "</table>";
$req->closeCursor();
?>
Donc voilà, la problématique est: "Comment récupérer la valeur des deux listes et ensuite afficher le tableau seulement si les deux valeurs sont sélectionnées?"
En vous remerciant d'avance pour ceux qui auront l'amabilité de me venir en aide.
Jessy
- Edité par JessyXiong 11 septembre 2017 à 16:49:38
Ne vend pas la peau de l'ours avant de l'avoir tué
Tu peux mettre une valeur null (vide) au début de tes deux listes et donc vérifier que tes deux listes aient un élément sélectionné si la valeur est différente de vide.
Développeur web aimanté par les projets prometteurs
Désolé de la réponse tardive je pensais que personne n'allait m'aider ...
Je vais essayer de faire ce que tu me suggères et je reviendrai vers toi en cas de soucis
Petite question, du coup les arguments de ma fonction showIndic() ne servent plus à rien ? Puisqu'il faut déclarer ces variables directement dans al fonction.
- Edité par JessyXiong 14 septembre 2017 à 11:45:05
Ne vend pas la peau de l'ours avant de l'avoir tué
les arguments de ta fonction ne seront plus utiles, il va falloir la modifier un peut pour qu'elle prennent en compte les deux values des deux listes (mois + année) et déclencher cette fonction après sélection d'un élément différent de null pour les deux listes.
Et merci pour le conseil c'est ce que je cherchais, j'arrête pas d'essayer de trouver comment faire fonctionner "onchange" sur les deux listes!
Je te tiens au courant !
Re,
Alors j'ai essayé avec addEventListener mais je ne saisis pas comment faire lorsque'on a deux variables. On concatène les deux en une seule et ensuite on ajoute addEventListener sur celui là ? J'ai fais un truc du genre, voici ma fonction modifiée:
function showIndic() {
var month = document.getElementById("month");
var year = document.getElementById("year");
var strMonth = month.options[month.selectedIndex].value;
var strYear = year.options[year.selectedIndex].value;
var strDate = strMonth+strYear;
if(strMonth != "" && strYear != ""){
if(window.XMLHttpRequest){
xmlhttpd = new XMLHttpRequest();
}
else{
xmlhttpd = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
strDate.addEventListener('change',function(){
xmlhttp.open("GET","form.php?date="+strMonth+strYear,true);
xmlhttp.send();
}, false);
}
else{
document.getElementById("txtHint").innerHTML = "";
return;
}
}
- Edité par JessyXiong 15 septembre 2017 à 9:42:50
Ne vend pas la peau de l'ours avant de l'avoir tué
tu met deux "addEventListener" après le chargement de ta page un sur ta liste de mois et un sur ta liste d'années et les deux "listener" pointeront vers ta fonction "showIndic" sur l’événement "change" ou "click" (enfin éventement déclencheur quoi).
var year = document.getElementById("year");
var month = document.getElementById("month");
year.addEventListener('change', showIndic);
month.addEventListener('change', showIndic);
Du coup là je dis : quand l'événement 'change' est appliqué à la liste d'année je lance la fonction showIndic et quand l'événement 'change' est appliqué à la liste de mois je lance showIndic.
Et du coup ce n'est pas possible de concaténer des objets JS XD
Et la méthode "addEventListener" doit être appliqué sur un objet du DOM.
- Edité par kokoal 18 septembre 2017 à 12:01:23
Développeur web aimanté par les projets prometteurs
Merci beaucoup ! C'est ce que j'avais fais initialement mais je l'avais pas écrit comme ça. Du coup je teste tout ça
Ne vend pas la peau de l'ours avant de l'avoir tué
Affichage tableau de données grâce à AJAX
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.