Action au click sur une liste déroulante
lara
-
Modifié par Whismeril le 4/02/2015 à 17:34
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 5 févr. 2015 à 12:34
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 5 févr. 2015 à 12:34
5 réponses
Whismeril
Messages postés
19022
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
17 avril 2024
656
Modifié par Whismeril le 4/02/2015 à 17:35
Modifié par Whismeril le 4/02/2015 à 17:35
Bonjour, écrire tout en majuscule, avec plein de point d'exclamation ça fait agressif et du coup ça ne donne pas envie de lire le message et donc encore moins d'y répondre. En outre un titre explicite est plus engageant.
Je vais donc renommer pour te laisser une chance.
De plus, pour que ceux qui savent puisse te répondre il faudrait qu'ils sachent comment tu as codé ta liste déroulante, voir ici comment poster un code.
La modération m'amène à intervenir dans de nombreux posts, mais le seul langage que je maitrise est le C#, un peu de VB aussi. Pour vos codes pensez à la coloration. Réponse trouvée ->Question Résolue
Je vais donc renommer pour te laisser une chance.
De plus, pour que ceux qui savent puisse te répondre il faudrait qu'ils sachent comment tu as codé ta liste déroulante, voir ici comment poster un code.
La modération m'amène à intervenir dans de nombreux posts, mais le seul langage que je maitrise est le C#, un peu de VB aussi. Pour vos codes pensez à la coloration. Réponse trouvée ->Question Résolue
22youenn
Messages postés
17
Date d'inscription
jeudi 31 octobre 2013
Statut
Membre
Dernière intervention
9 février 2016
1
4 févr. 2015 à 21:22
4 févr. 2015 à 21:22
bonjour,
je te donne le principe de base :
@+
je te donne le principe de base :
<?php
$formname = "nom_formulaire";
//début du code PHP
/* on test si un choix a été fait dans la liste déroulante */
if(isset($_POST['liste1'])){
/* un choix a été fait,
on positionne la valeur de liste1 à $_POST['liste1'] */
$liste1=$_POST['liste1'];
}
else{
/* aucun choix n'a été fait dans la liste déroulante,
on positionne la valeur de liste1 à '-1' */
$liste1=-1;
}
....
...
....
?>
<select name="liste1" onchange="<?php echo $formname ?>.submit();">
<!-- il faut cette ligne pour avoir obliagtoirement un changement -->
<option style="background-color: #CCCCCC;" value=-1>SELECTION</option>
<option value="value1">option1</option>
<option value="value2">option2</option>
</select>
<?php
...
...
...
...
if($liste1 != -1)
{
/* la valeur de liste1 est différente de '-1', un choix a été fait :
-- > on refait une requête avec la condition de la valeur sélectionnée dans la liste déroulante */
/* récurération de la valeur sélectionnée */
$liste1=$_POST['liste1'];
}
@+
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
Modifié par jordane45 le 4/02/2015 à 22:40
Modifié par jordane45 le 4/02/2015 à 22:40
Au niveau de ton SELECT :
Au niveau de ton script...
Bien sûr;... il te reste la partie evtrim.php à modifier pour prendre en compte la variable annee ( passée en POST).
Cordialement,
Jordane
<select name="annee" onChange="genereGraphique(this.value);"> <option value="0"> CHOISIR UNE ANNEE </option> <option value="2009"> 2009</option> <option value="2010"> 2010</option> <option value="2011"> 2011</option> <option value="2012"> 2012</option> </select>
Au niveau de ton script...
// A l'ouverture de la page..génère le graphique
$(document).ready(function() {
genereGraphique("2012");
});
// Récupération des données du graphique via AJAX
// Format : JSON
function genereGraphique(annee){
var urlAjx ="evtrim.php";
$.ajax({
type: "POST",
url:urlAjx,
data: "annee="annee
,
async: false,
dataType: "json",
success: function(reponse){
drawChart(reponse);
},
error:function(reponse){
alert('error');
;
}
});
}
// Fonction qui CREEE le graphique
function drawChart(json){
var options = {
chart: {
renderTo: 'container0',
type: 'column',
},
title: {
text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
},
xAxis: {
categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
},
yAxis: {
min: 0,
title: {
text: 'millions'
},
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}}},
tooltip: {
pointFormat: ' <b>{point.y:.1f} millions</b>'
},
series: []
}
options.series[0]=json[0];
chart=new Highcharts.Chart(options);
}
}
Bien sûr;... il te reste la partie evtrim.php à modifier pour prendre en compte la variable annee ( passée en POST).
Cordialement,
Jordane
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
>
lara
4 févr. 2015 à 23:18
4 févr. 2015 à 23:18
Ben... tout dépend où tu as placé le code dans ta page...
Postes nous le code complet de ta page.
Postes nous le code complet de ta page.
En fait j'ai un ensemble de graphiques pour chaque année que j'ai regroupé dans un tableau.. comme celui ci
Et je sais pas comment faire pour résoudre ce prob, j'ai éssayé avec un seul graphique comme tu m'a dis :
Mais cela ne marche pas.
MERCI POUR VOTRE AIDE
<form name="test" method="post" >
<select name="annee" onChange="genereGraphique(this.value)">
<option value="0"> CHOISIR UNE ANNEE </option>
<option value="2009"> 2009</option>
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
</select>
<div class="row">
<div class="col-lg-6">
<div class="panel-body text-center">
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container0',
type: 'column',
},
title: {
text: 'Evolution trimestrielle du Parc Mobile '
},
xAxis: {
categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
},
yAxis: {
min: 0,
title: {
text: 'millions'
},
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}}},
tooltip: {
pointFormat: ' <b>{point.y:.1f} millions</b>'
},
series: []
}
$.getJSON("evte.php", function(json){
//options.xAxis.categories=json[0]['data'];
options.series[0]=json[0];
chart=new Highcharts.Chart(options);
});
});
</script>
<div id="container0" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="panel-body text-center">
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: 'Répartition Prépayé Post-payé'
},
xAxis: {
categories: ['mars-08','juin-08','sept-08','déc-08','mars-09']
},
yAxis: {
min: 0,
title: {
text: 'milliers'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
x: 10,
verticalAlign: 'under',
y: 371,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: []
}
$.getJSON("repartition.php", function(json){
options.series[0]=json[0];
options.series[1]=json[1];
chart=new Highcharts.Chart(options);
});
});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="service-two">
<br/>
<div class="col-lg-6">
<div class="panel-body text-center">
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container09',
type: 'column',
},
title: {
text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
},
xAxis: {
categories: ['juin-08','sept-08', 'déc-08','mars-09','juin-09' ]
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}}},
tooltip: {
pointFormat: ' <b>{point.y:.1f} millions</b>'
},
series: []
}
$.getJSON("evtrimmobile juin09.php", function(json){
options.series[0]=json[0];
chart=new Highcharts.Chart(options);
});
});
</script>
<div id="container09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
</div></div>
<div class="col-lg-6">
<div class="panel-body text-center">
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'containerr09',
type: 'column',
},
title: {
text: 'Répartition Prépayé Post-payé'
},
xAxis: {
categories: ['juin-08','sept-08','déc-08','mars-09','juin-09']
},
yAxis: {
min: 0,
title: {
text: 'milliers'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
x: 10,
verticalAlign: 'under',
y: 371,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}}},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: []
}
$.getJSON("repartitionm.php", function(json){
options.series[0]=json[0];
options.series[1]=json[1];
chart=new Highcharts.Chart(options);
});
});
</script>
<div id="containerr09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
</div></div>
</div></div>
</div>
Et je sais pas comment faire pour résoudre ce prob, j'ai éssayé avec un seul graphique comme tu m'a dis :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.7.min.js"> </script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/tms-0.4.x.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<title>ANRT - Observatoires </title>
</head>
<body>
<script text="javascript">
$(document).ready(function() {
genereGraphique("2009");
});
</script>
<script text="javascript">
// Récupération des données du graphique via AJAX
// Format : JSON
function genereGraphique(annee){
var urlAjx ="evtrimmobile.php";
$.ajax({
type: "POST",
url:urlAjx,
data: "annee="annee
,
async: false,
dataType: "json",
success: function(reponse){
drawChart(reponse);
},
error:function(reponse){
alert('error');
;
}
});
}
// Fonction qui CREEE le graphique
function drawChart(json){
var options = {
chart: {
renderTo: 'container0',
type: 'column',
},
title: {
text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
},
xAxis: {
categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
},
yAxis: {
min: 0,
title: {
text: 'millions'
},
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}}},
tooltip: {
pointFormat: ' <b>{point.y:.1f} millions</b>'
},
series: []
}
options.series[0]=json[0];
chart=new Highcharts.Chart(options);
}
</script>
<form name="test" method="post" >
<select name="annee" onChange="genereGraphique(this.value)">
<option value="0"> CHOISIR UNE ANNEE </option>
<option value="2009"> 2009</option>
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
</select>
</body>
</html>
Mais cela ne marche pas.
MERCI POUR VOTRE AIDE
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
4 févr. 2015 à 23:37
4 févr. 2015 à 23:37
déjà .. tu as écris à plusieurs endroits :
Alors.. que la bonne syntaxe c'est :
Ensuite... tu as, dans ton code HTML mis une balise FORM .. (sans la FERMER ...) mais qui est, de toutes façons, inutiles .
Enfin... utilises tu les outils de debogage de ton navigateur internet ??
Je te conseille d'utiliser le plugin FIREBUG pour FIREFOX.
Tu le lances.. ouvres l'onglet CONSOLE et regarde s'il n'y a pas d'erreurs de scripts indiquées dedans.
<script text="javascript">
Alors.. que la bonne syntaxe c'est :
<script type="text/javascript">
Ensuite... tu as, dans ton code HTML mis une balise FORM .. (sans la FERMER ...) mais qui est, de toutes façons, inutiles .
Enfin... utilises tu les outils de debogage de ton navigateur internet ??
Je te conseille d'utiliser le plugin FIREBUG pour FIREFOX.
Tu le lances.. ouvres l'onglet CONSOLE et regarde s'il n'y a pas d'erreurs de scripts indiquées dedans.
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
4 févr. 2015 à 23:38
4 févr. 2015 à 23:38
PS.. penses aussi à ajouter le LANGAGE lorsque tu utilises les balises de code.... ça le rend plus lisible.
Si tu as lu le lien que je t'ai donné tout à l'heure.. tu as du voir comment faire... ça y est expliqué !
Si tu as lu le lien que je t'ai donné tout à l'heure.. tu as du voir comment faire... ça y est expliqué !
@karamel
Messages postés
1854
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 avril 2024
153
Modifié par kazma le 5/02/2015 à 11:53
Modifié par kazma le 5/02/2015 à 11:53
bonjour
c'est une erreur de syntaxe dans la fonctiongenereGraphique
le guillemet de année est placé apres le signe egale
la correction donne
}</code>
c'est une erreur de syntaxe dans la fonctiongenereGraphique
data: "annee="annee
le guillemet de année est placé apres le signe egale
la correction donne
data: "annee"=annee
}</code>
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
>
@karamel
Messages postés
1854
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 avril 2024
5 févr. 2015 à 11:59
5 févr. 2015 à 11:59
Y'a bien une erreur de syntaxe... mais pas celle là.
En fait le guillemet est bien placé.... mais il manque un +
En fait le guillemet est bien placé.... mais il manque un +
data: "annee="+annee
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
@karamel
Messages postés
1854
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 avril 2024
153
5 févr. 2015 à 12:34
5 févr. 2015 à 12:34
je plussois
4 févr. 2015 à 19:23
J'ajouterai que le code qui te permet de générer tes graphiques est tout autant nécessaire (si ce n'est plus...) pour que l'on puisse te répondre....
Mais dans le principe.. je dirais que tu ajoutes un ONCHANGE sur ton SELECT ....
que ce ONCHANGE déclenche un SUBMIT de la FORM où tu as placé ton SELECT
et qu'au chargement de la page.. tu regardes QUELLE VALEUR a été envoyée dans ce SUBMIT.
A partir de là .. tu n'as plus qu'à t'en servir pour créer ton graphique.
NB : Le ONCHANGE est un attribut HTML .. qui appel du JAVASCRIPT.... (pas du PHP ..présente section de ce forum...)
4 févr. 2015 à 21:52
Merci bcp, les ghraphiques que j'ai créeé c'est à l'aide du logiciel Highcharts, c'est en javascript.
A présent j'ai fait cela :
<form name="test" method="post" action ="home.php">
<select name="annee" onChange="this.form.submit()">
<option value="1"> 2009</option>
<option value="2"> 2010</option>
<option value="3"> 2011</option>
<option value="4"> 2012</option>
</select>
Mais je sais pas comment faire pour qu'on cliquant sur 2009 par exemple l'ensemble de graphiques s'affiche. Merci bcp
4 févr. 2015 à 22:01
1 - Que tu utilises la coloration syntaxique pour poster ton code sur le forum...
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
2 - Que tu nous fournisses le code qui te permet de générer tes graphiques...
Sans ça... IMPOSSIBLE de t'aider
Modifié par jordane45 le 4/02/2015 à 22:27
<script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container0', type: 'column', }, title: { text: 'Evolution trimestrielle du Parc Mobile (en milliers)' }, xAxis: { categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ] }, yAxis: { min: 0, title: { text: 'millions' }, }, legend: { enabled: false }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.y:.1f}' }}}, tooltip: { pointFormat: ' <b>{point.y:.1f} millions</b>' }, series: [] } $.getJSON("evtrim.php", function(json){ //options.xAxis.categories=json[0]['data']; options.series[0]=json[0]; chart=new Highcharts.Chart(options); }); }); </script> <div id="container0" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>J'espère que ce sera une bonne réponse pour ta qst
4 févr. 2015 à 22:29
Le hic vois tu .... c'est que tu as posté ta question dans la section PHP du forum....
hors.... ton code... comme tu DEVRAIS le savoir... n'en contient pas.... il est UNIQUEMENT en JAVASCRIPT ( Jquery) !
et donc... il faut que sur ton ONCHANGE tu déclenches l'appel AJAX qui te permet d'afficher ton graphique (en lui passant en paramètre... la valeur du select)
==>>> Je déplace la conversation dans la BONNE section du forum...