Discussion :

[pierrot10]

Bonjour à tous,

Je veux afficher un graph selon un formulaire.
Voici l'exercice:
http://www.smart-idea.io/chart-step/new/

Afin d'éviter de recharger ma page j'utilise ajax.
Ce qui me surprend c'est qu'à chaque fois que je sélection un élément de mon formulaire, par exemple un checkbox, il semble que ma page est rechargée.
Ce qui m'indique ceci, c'est le bouton "reload", en haut à gauche du navigateur firefox, à côté du bouton home. Si vous sélectionnez un des élément du formulaire, on voit ce bouton changé en un crois et reprendre son état initial.

Je me demande si c'est normal (je ne crois pas) ou pas.

Pour apporter plus d'information, voici un oeu de code.
le formulaire:

Code HTML :

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
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<form id="form1" name="form" method="post">	
				<fieldset>
					<legend>Select a date range</legend>
					<input type="text" class="date-change" id="from" name="from" placeholder="From">
					<input type="text" id="to" class="date-change" name="to" placeholder="to">
 
					<br>
					<cite>By default, the 2 last days of <br>measures are displayed for Pond7A.</cite>
				</fieldset>
				<fieldset>
				<legend>Select one station</legend>
 
 
 
 
					 			<div class="radio stations">
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond7a" checked value="1" />
						<label for="id-pond7a">
														<img src="img/pond7a.png" alt="pond7a" title="pond7a">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond7b"  value="2" />
						<label for="id-pond7b">
														<img src="img/pond7b.png" alt="pond7b" title="pond7b">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond7c"  value="3" />
						<label for="id-pond7c">
														<img src="img/pond7c.png" alt="pond7c" title="pond7c">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond7d"  value="4" />
						<label for="id-pond7d">
														<img src="img/pond7d.png" alt="pond7d" title="pond7d">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond8a"  value="5" />
						<label for="id-pond8a">
														<img src="img/pond8a.png" alt="pond8a" title="pond8a">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond8b"  value="6" />
						<label for="id-pond8b">
														<img src="img/pond8b.png" alt="pond8b" title="pond8b">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond8c"  value="7" />
						<label for="id-pond8c">
														<img src="img/pond8c.png" alt="pond8c" title="pond8c">						</label>
	 				</div>
 
 
	 					 				<div class="input-group">
	 					<input type="radio" data-name="station" name="station" id="id-pond8d"  value="8" />
						<label for="id-pond8d">
														<img src="img/pond8d.png" alt="pond8d" title="pond8d">						</label>
	 				</div>
 
 
	 								</div><!-- End radio button -->
			</fieldset>
 
				<div style="clear:left"></div>
				<fieldset>
 
				<legend>Select some sensors</legend>
 
										<div class="checkbox sensors">
					<div class="select-title">Temperature</div>	
						<div class="input-group">
							<input type="checkbox" data-name="ta" data-family="temperature" name="type[]" id="id-ta" checked value="5" />
							<label for="id-ta">T-Air</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="ts" data-family="temperature" name="type[]" id="id-ts"  value="6" />
							<label for="id-ts">T-Surface</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t30mm" data-family="temperature" name="type[]" id="id-t30mm"  value="7" />
							<label for="id-t30mm">T-30mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t60mm" data-family="temperature" name="type[]" id="id-t60mm"  value="8" />
							<label for="id-t60mm">T-60mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t100mm" data-family="temperature" name="type[]" id="id-t100mm"  value="9" />
							<label for="id-t100mm">T-100mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t200mm" data-family="temperature" name="type[]" id="id-t200mm"  value="10" />
							<label for="id-t200mm">T-200mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t500mm" data-family="temperature" name="type[]" id="id-t500mm"  value="11" />
							<label for="id-t500mm">T-500mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="t1200mm" data-family="temperature" name="type[]" id="id-t1200mm"  value="12" />
							<label for="id-t1200mm">T-1200mm</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="tcb" data-family="temperature" name="type[]" id="id-tcb"  value="13" />
							<label for="id-tcb">T-Cover Bottom</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="tcts" data-family="temperature" name="type[]" id="id-tcts"  value="14" />
							<label for="id-tcts">T-Cover Top</label>
						</div>
										</div> <!-- end checkbox -->
										<div class="checkbox sensors">
					<div class="select-title">Heatflux</div>	
						<div class="input-group">
							<input type="checkbox" data-name="hfs" data-family="heatflux" name="type[]" id="id-hfs"  value="3" />
							<label for="id-hfs">Heatflux Shallow</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="hfb" data-family="heatflux" name="type[]" id="id-hfb"  value="4" />
							<label for="id-hfb">Heatflux Bottom</label>
						</div>
										</div> <!-- end checkbox -->
										<div class="checkbox sensors">
					<div class="select-title">Water</div>	
						<div class="input-group">
							<input type="checkbox" data-name="wl" data-family="water" name="type[]" id="id-wl"  value="1" />
							<label for="id-wl">Waterlevel</label>
						</div>
 
						<div class="input-group">
							<input type="checkbox" data-name="wln" data-family="water" name="type[]" id="id-wln"  value="2" />
							<label for="id-wln">Waterlevel normalized</label>
						</div>
										</div> <!-- end checkbox -->
 
					</fieldset>
 
 
			</form>

Code javascript :

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
 
$(document).ready(function(){
/* When you check a checkbo, it will uncheck the other which are not from the same familly */
    $("input:checkbox").on('click',function(e) {
 
        if (this.checked){
 
            var fam_name = $( this ).attr('data-family');
            var name = $(this).attr('data-name');
            $(":checkbox").each(function() {
                if(this.checked ){
                    if( ($( this ).attr('data-family') != fam_name && fam_name != "station") || ( $( this ).attr('data-family') == "water" ) && name != $( this ).attr('data-name') ){
                            this.checked = false;
                    }
                }
            });
        }
 
 
        var formData = $("#form1").serialize();
            console.log("Checkbox click");
            console.log("FormData: ", formData);
        mychart.destroy();
        get_data(formData);
 
    })
$("#form1").submit(function( event ) {
        event.preventDefault();
 
    });
});
 
function get_data(para){
 
    return $.ajax({
        url: 'get_measures-v2.php', 
        type: 'POST',
        data:para,                                  // data: { pond: pond, from: from, to: to },
        cache: false,
        dataType: 'json',
        error: function (request, error) {
               console.log("Error");
               console.log(request.responseText);     
        },
        success: function (data) {   
 
            if(data.length <= 0)
            {
                console.log(data);
                $( "#dialog" ).dialog();
            }
            else
            {  
                console.log("Success");
                console.log(data);
 
                var ctx = document.getElementById("stations");
                var conf = config(data);
                mychart = new Chart(ctx, conf);
 
 
            }
        }
    });
 
}

J'espère que je donne assez de code, mais tous les cas, vous pouvez voir le code source de la page.

Ce qui me surprends c'est que je n'utilise pas un bouton "submit"

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" value="Submit">

donc en soit, il n'y a rien qui envoi le formulaire. Mon code va lire les états des inputs et faire un serialize

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var formData = $("#form1").serialize();

Est-ce que la fonction serialize(), équivaut à un submit?

Merci pour vos lumières!!!

[psychadelic]

Afin d'éviter de recharger ma page j'utilise ajax.
Ce qui me surprend c'est qu'à chaque fois que je sélection un élément de mon formulaire, par exemple un checkbox, il semble que ma page est rechargée.
Ce qui m'indique ceci, c'est le bouton "reload", en haut à gauche du navigateur firefox, à côté du bouton home. Si vous sélectionnez un des élément du formulaire, on voit ce bouton changé en un croix et reprendre son état initial.

Je me demande si c'est normal (je ne crois pas) ou pas.

ben si c'est normal,
dés qu'il y a une opération d'entrée/sortie sur la page, même si c'est très minime et partiel, cet icône l'indique.