Bonjour,
Afin d'afficher des résultats sous forme de graphique, je souhaite analyser le code HTML d'un bloque, puis faire appel à du AJAX qui va appeler un script PHP/MySQL et afficher le graph.
LE code a analyser est le suivante
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 <div id="graph" class="row"> <div class="col-md-12"> <!-- premier bloque --> <div class="card" data-family="2"> <div class="card-header"> <h4 class="card-title">Températures</h4> <p class="card-category"></p> </div> <div class="card-body" data-yaxis0="5" data-yaxis1="0" data-familyname="temperature"> <div class="chart-container" id="container-temperature"> <canvas class="canvas" id="temperature"></canvas> <div class="chartLoading"> <img src="img/ajax-loader.gif" /> </div> </div> <p></p> </div> </div> <!-- Deucième bloque --> <div class="card" data-family="3"> <div class="card-header"> <h4 class="card-title">Pression atmosphérique et humidité de l'air</h4> <p class="card-category"></p> </div> <div class="card-body" data-yaxis0="6" data-yaxis1="7" data-familyname="baro"> <div class="chart-container" id="container-baro"> <canvas class="canvas" id="baro"></canvas> <div class="chartLoading"> <img src="img/ajax-loader.gif" /> </div> </div> <p></p> </div> </div> </div> </div>
Évidement, le code de ma page est plus complet.
Ce que je dois faire,
J'aimerais que mon jquery analyse tout de qu'il se trouve dans
Il parcourt tous les <div> enfant, jusqu'à ce qu'il renconrtre
Code : Sélectionner tout - Visualiser dans une fenêtre à part <div id="graph" class="row">
Il doit enregistrer sa valeur.data-family
puis il continue et quand il rencontre la class
il doit enregistrer les valeurs declass="card-body"
Une fois que j'aurais les valeurs dedata-yaxis0
data-yaxis1
data-familyname
je ferai appel à ma fonction AJAX et le graphique s'affichera en fonction des valeurs extraites de la base de donnée.data-family
data-yaxis0
data-yaxis1
data-familyname
Puis Jquery, continue sur le deuxième bloque et affichera le deuxième graphique.
(Il y a plus de 3 bloques)
Je pensais utiliser le each() et le find(), mais a dire vrai, je ne vois pas comment pour parcourir mes bloques comme indiqué plus haut
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 $('#grap').each(function( index ) { console.log($( this ).find("card-body").attr("data-yaxis0")); console.log($( this ).find("card-body").attr("data-yaxis1")); console.log($( this ).find("card-body").attr("data-familyname")); });
Je vous remercie pour vos lumières
Partager