Discussion :

[GlossyP]

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 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
{% 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.
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 !

[Toufik83]

Pourquoi ce "refresh" de page intempestif, lequel déclenche une deuxième exécution de script jquery ?

Parce que tu cliques sur un élément <a href="..."> ayant un attribut href, ce qui provoque un rechargement de page (comportement normal du navigateur).

Pour éviter ça, il faut empêcher le navigateur de se recharger avec preventDefault()

Puis je pense que tu n'as pas besoin de mettre une fonction click dans each, essaie plutôt :

Code javascript :

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

1
2
3
4
5
6
7
 
$("div.onglet a").click(function(e) {
    e.preventDefault();//empêcher le rechargement de page
    console.log('Script 2');
    $('div.oactif').removeClass('oactif');
    $(this).parent().addClass('oactif');
});

[GlossyP]

Bien vu !

L'activation des liens-onglets étaient effectivement à l'origine du "refresh" de la page. L'utilisation de "preventDefault" m'a permis de prendre le mal à la racine. Il m'a ensuite suffit de gérer programmatiquement le basculement entre onglets (les liens ne le faisant plus) et tout est rentré dans l'ordre.

Ce que je ne m'explique toujours pas, c'est pourquoi le rafraichissement de page ne se produisait que lors du premier clic sur un des liens et ensuite plus du tout. Pourquoi ???

Encore merci à toi.