Discussion :

[pierrot10]

Bonjour à tous,

Quand je clique sur un boutton trois fonction vont être appelée.
Les trois fonctionnent avec ajax. (voir plus bas).

En gros, ces fonctions sont presque les même. Grace a AJAX, elles font faire uen requete MySQL et la réponse (des données de capteurs) permettra d'afficher les résultats sous forme des graphique
https://demo.smart-idea.io/?logout=1 (authentifez-vous avec les compte demo et vous verrez le resultat pour les différentes stations.

Il se trouve que la fonction get_température() affiche un graphique toujours avant la fonction get_moisture(). Ce qui me semble dans un sens logique, car il y a moins de donnée que pour get_moisture.

Malgé peut-être mes explications pas très claire, j'aimerais faire en sorte que la deuxième fonction s'exécute que la première a terminé et dès que les valeurs sont affichées sur le graphique.
Puis dès que le deuxième a terminé, la troisième est exécutée.

Code jquery :

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

1
2
3
4
5
6
 
$("#showStation a").click(function(e){
    get_moisture($(this).attr("data-field"),$(this).attr("data-station"),"wm");
    get_temperature($(this).attr("data-field"),$(this).attr("data-station"),"te");
    get_pressionHumidity($(this).attr("data-field"),$(this).attr("data-station"),"pr");
})

Code jquery :

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
 
function get_moisture(field,station,container){
   //alert(container);
 
   var para = "field=" + field + "&station=" + station;
 
    return $.ajax({
        url: 'include/get_measures.php', 
        type: 'POST',
        data:'type[]=8&type[]=1&y-axis-0=8&y-axis-1=1&'+para, 
        //data:'type[]=1&y-axis-1=1&'+para, 
        //data:'type[]=1&'+para,                                  // data: { pond: pond, from: from, to: to },
        cache: false,
        dataType: 'json',
 
    // xhr For testing
       xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function e() {
            // For downloads
            if (e.lengthComputable) {
                console.log("Download ", e.loaded / e.total);
            }
        };
        xhr.upload.onprogress = function (e) {
            // For uploads
            if (e.lengthComputable) {
 
                $("#container-st" + station + container ).children('.chartLoading').show(1);
            }
        };
        return xhr;
    },
 
        error: function (request, error) {
               console.log("Error......263");
               console.log(request.responseText);     
        },
        success: function (data) {   
 
            if(data.length <= 0)
            {
            }
            else
            {  
                console.log("Moisture Success:",data);
 
                $("#container-st" + station + container ).children('.chartLoading').hide(1);
 
                $('#st' + station + container).remove();
                $('#container-st' + station + container).append('<canvas class="canvas" id="st' + station + container + '"></canvas>');
 
 
                var ctx = document.getElementById("st"+station+container).getContext('2d');
                var conf_moisture = config_multiAxies(data);
                mychart = new Chart(ctx, conf_moisture);
 
 
            }
        }
    });
 
}

Normalement, la deuxième fonction devrait s'exécuter quand la première à terminé, (voir 'success').
Mais alors pourquoi get_temperature affiche le graphique avant get_moisture()?
Et comment donc s'assurer que la troisième attende la deuxième, et la deuxième attende la première?

Voyez-vous?

[Invité]

Bonjour,

Il suffit justement d'appeler la fonction dans le ".success" (ou ".done") de la précédente.

[pierrot10]

Salut jreaux62

Merci pour ta réponse. Oui mais ca va pas le faire dans le cas de mon application. J'y avais pensé.
Je vais fermé ce post, car je pars avec de GET. (mes menus ne fonctionneront plus avec jquery et des nav-tabs) Je vais faire plus simple finalement.

Merci