Réinitialisation de page intempestive
Bonjour à tous !
Je vais faire appel à votre aide afin de m'aider à résoudre un problème qui s'avère bien embêtant.
Il s'agit d'afficher une page html, laquelle contient 4 onglets (jour, semaine, mois et année). Je poste ci-dessous le code utilisé à cette fin (il s'agit d'un template Flask contenant de l'html, du javascript et du Jquery).
Code:
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
| {% block section1 %}
<div class="onglets">
<div id="jour">
<div class="onglet">
<a href="{{ url_for('rayon',_anchor='jour') }}">JOUR</a>
</div>
<div class="panel">
<canvas id="graphe_r" height="18vh" width="50vw"></canvas>
</div>
<div class="progress" id="prg_jour">
<p>Chargement des données: <span id="etat">0</span> %</p>
</div>
</div>
<div id="semaine">
<div class="onglet">
<a href="{{ url_for('rayon',_anchor='semaine') }}">SEMAINE</a>
</div>
<div class="panel">
<p>Par semaine</p>
</div>
</div>
<div id="mois">
<div class="onglet">
<a href="{{ url_for('rayon',_anchor='mois') }}">MOIS</a>
</div>
<div class="panel">
<p>Par mois</p>
</div>
</div>
<div id="an">
<div class="onglet">
<a href="{{ url_for('rayon',_anchor='an') }}">ANNEE</a>
</div>
<div class="panel">
<p>Par an</p>
</div>
</div>
</div>
<script src="{{ url_for('static',filename='scripts/graph_rayon.js') }}"></script>
<script>
$(function() {
console.log('Script 1');
$('.menu a:eq(0)').addClass('lactif');
$('#jour div.onglet').addClass('oactif');
$('div.onglet a').each(function(index) {
$(this).click(function() {
console.log('Script 2');
$('div.oactif').removeClass('oactif');
$(this).parent().addClass('oactif');
});
});
var socket = io.connect('http://localhost:5000');
socket.on('progres',function(prg) {
$('#etat').text(prg);
});
socket.on('rayondons',function(donnees) {
initGrapheR(donnees);
$('#prg_jour').hide();
$('#jour div.panel').addClass('pactif').show();
});
var debut = new Date(2019,7,21,23,0,0);
var fin = debut.addJours(1);
socket.emit('rayonreq',{ 'debut' : debut,'fin' : fin,'intervalle' : 10 });
});
</script>
{% endblock %} |
Les onglets en question sont activables aux moyens des liens <a> correspondants.
Lors du chargement de la page, j'obtiens bien un écho "Script 1" comme on pourrait s'y attendre.
Lors du premier clic (et seulement le premier) sur un des liens, j'obtiens d'abord un écho "Script 2" (exécution de l'event handler correspondant au clic sur le lien utilisé). Logique jusque là.
Malheureusement j'obtiens également un écho "Script 1" ! Ce qui signifie que le script jquery de la fin de page est réexécuté entièrement une seconde fois alors que la page était déjà initialisée correctement dès son affichage initial.
Pourquoi ce "refresh" de page intempestif, lequel déclenche une deuxième exécution de script jquery ? Ce qui, je confirme, ne fait pas mon affaire. :furieux:
Comment pourrais-je éviter/corriger ce problème ?
Encore deux précisions.
La première : pour les clics ultérieurs sur les onglets, tout de passe ensuite correctement (seulement un écho "Script 2" !).
La seconde : les événements socketio dont les handlers se trouvent dans le script ne surviennent plus une fois l'affichage initial de la page terminé. Ils n'ont d'ailleurs, à priori, pas d'influence sur l'affichage des onglets.
N'hésitez pas à me dire s'il vous manque des informations.
D'avance merci et (je vais oser) bonne pandémie ! :mrgreen:
