div qui apparait puis disparait sur le clic d'un bouton

**triaguae** · 23/08/2016, 09h25

Bonjour

j'essaie de faire une petite appli web pour un affichage de graphique de statistiques, et lorsque je clique sur le bouton "ok" de mon form, le graphique (généré avec highcharts) apparait puis disparait aussitot.
Etant complètement novice avec jquery (et js aussi), je sèche !!

html

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
<!DOCTYPE html>
<html>
<head>
<title>liste analyse / stat</title>
<script type='text/javascript' src='Highcharts-3.0.8/js/jquery.min.js'></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/highcharts.js" ></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/modules/exporting.js" ></script>
<script type='text/javascript' src="listes.js"></script>
</head>
 
<body>
	<h2>graphiques</h2>
 
	<form name="graphique" >
 
	<p>choisir une analyse, puis une statistique associée</p>
		<select id="analyses" name="analyses">
			<option value="">-- Analyses --</option>
		</select>
 
		<select id="stats" name="stats">
			<option value="">-- Statistiques--</option>
		</select></br></br>
 
		Date début<input  type="date" id="date_deb" name="date_deb" size="10" value="<?php echo date('Y-m-d',strtotime('-3 month')) ?>" /></br></br>
		Date fin<input type="date" id="date_fin" name="date_fin" size="10" value="<?php echo date('Y-m-d') ?>"/></br></br>
		Espece<input type="esp" name="esp" size="5"value = "1"/></br></br>
		<input type="submit" id="valider" name="valider" value="OK"/></br></br>
 
	</form>
<div id="graphique" style="width: 100%; height: 400px;"></div>
</body>
 
 
</html>

le js :

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
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
$(document).ready(function() {
 
	var $analyses = $('#analyses');
	var $stats = $('#stats');
 
	// chargement des analyses
	$.ajax({
		url: 'listes.php',
		data: 'go', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) { // pour chaque noeud JSON
				// on ajoute l'option dans la liste
				$analyses.append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection d'une analyse dans la liste
	$analyses.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de l'analyse'
 
		if(val != '') {
			$stats.empty(); // on vide la liste des stats
 
			$.ajax({
				url: 'listes.php',
				data: 'analyses='+ val, // on envoie $_GET['id_analyse']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$stats.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
 
var $valider = $('#valider');
 
 
$valider.on('click', function(){
   //alert('Ce code fonctionne !');
 
    $('#graphique').highcharts({
        chart: {
            type: 'bar' // pie pour des graphiques en camembert
        },
        title: {
            text: 'Consommation de fruit'
        },
        xAxis: {
            categories: ['Pommes', 'Bananes', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Nombre de fruits mangés'
            }
        },
        // Les données de notre graphique
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});
 
});

**NoSmoking** · 31/08/2016, 11h41

Bonjour,

il te faut annuler le comportement par défaut, regarde du coté de event.preventDefault(), ta page est rechargée à chaque appui sur le bouton.

**triaguae** · 01/09/2016, 14h19

merci pour cette réponse

en m'y remettant (avant de voir ta réponse), j'ai bien pensé que la page se rechargeait sur le clic du bouton.
Dans un premier j'ai supprimé la balise <form> </form>, et ça fonctionne
Je veux bien admettre que ce n'est pas très propre

**SpaceFrog** · 01/09/2016, 16h16

modifie juste le type de ton sumbti en button ... ça ne soumettra plus le form

div qui apparait puis disparait sur le clic d'un bouton

jQuery

Discussions similaires

Partager

Partager