Actualiser un div toutes les x secondes en JS

**Derko** · 05/02/2022, 19h19

Bonjour,

J'aimerai actualiser le contenu d'un <div> toutes les 5sec en JavaScript (c'est la première fois que je me lance dans JS. J'ai lu des cours et effectué je ne sais combien de recherches depuis 3 jours).

Pour cela, j'ai écrit le code suivant dans ma page index.php à force de recherches :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>My Server</title>
        <script type="text/javascript">
            function refresh_div()
            {
                setInterval(refreshDiv, 5000);
            }
            function refreshDiv()
            {
                document.getElementById('fonctionPerfServ');
                console.log(fonctionPerfServ);                
            }
        </script>
    </head>
    <body onLoad="refresh_div()">
 
        <!-- DEBUT Affichage des Performances du serveur -->
        <div class="row" id="fonctionPerfServ">                            
            <?php
                include("fonctions/perfServer.php");
                $perfs = perfServer();
            ?>
 
            <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Network Used</h4>                                                
                        <?php                                                
                            echo $perfs[0].' Octets / Seconde';                                             
                        ?>
                    </div>
                </div>
            </div>
 
            <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">CPU Used</h4>
                        <?php
                            echo $perfs[1].' %';                                      
                        ?>
                    </div>
                </div>
            </div>
 
            <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">RAM Used</h4>
                        <?php 
                            echo $perfs[2].' %';                                              
                        ?>
                    </div>
                </div>        
            </div>
 
        </div>                        
        <!-- FIN Affichage des Performances du serveur -->
    </body>
</html>

Pour plus de clarté, voici ma fonction perfServer() (qui fonctionne parfaitement) :

Code php :

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
<?php
    function perfServer()
    {
        // On lance le script PowerShell perfServer.ps1 qui va écrire la commande Get-Counter dans le fichier perfServ_LOG.txt
        $output = shell_exec('powershell -executionpolicy remotesigned -command "& {"fonctions/perfServer.ps1"; exit $err}"');
 
        // Le fichier texte
        $txt_file = 'fonctions/perfServer_Log.txt';
        // Variable permettant de parcourir le fichier texte
        $lines = file($txt_file);
        // On parcourt le fichier texte ligne par ligne
        foreach ($lines as $num=>$line)
        {
            // Si la ligne = 5 alors on obtient la valeur de consommation du réseau
            if($num == 5)
            {
                $reseau = $line;
                $reseau = trim($reseau);
                //$reseau = substr($reseau,0,3);               
            }
            // Si la ligne = 8 alors on obtient la valeur de consommation du processeur
            elseif($num == 8)
            {
                $processeur = $line;
                $processeur = trim($processeur);
                //$processeur = substr($processeur,0,3);                
            }
            // Si la ligne = 11 alors on obtient la valeur de consommation de la RAM
            elseif($num == 11)
            {
                $ram = $line;
                $ram = trim($ram);
                //$ram = substr($ram,0,3);
            }
        }
        // On récupère les valeurs dans un tableau
        $perfServer = array($reseau, $processeur, $ram);
        // On retourne le tableau
        return $perfServer;
    }
?>

Pour encore plus d'infos, voici mon fichier perfServer.ps1 appelé par ma fonction perfServ() :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
$varCheminRepertoireScript = [System.IO.Path]::GetDirectoryName($MyInvocation.MyCommand.Definition)
$currentScriptName = $MyInvocation.MyCommand.Name #Récupération du nom du script en cours
 
#On ne prend que le nom du script sans l'extention. Pour cela on chercher la position d'un point en partant de la droite et on prend tout ce qui est à sa gauche
$currentScriptName = $currentScriptName.substring(0,$($currentScriptName.lastindexofany(".")))
 
#Création du fichier vierge
$EmplacementFichier = "$varCheminRepertoireScript\$($currentScriptName)_Log.txt"
$MonFichier = New-Item -type file $EmplacementFichier -Force
 
Get-Counter | out-file $MonFichier

Et enfin, mon fichier texte perfServer_LOG.txt créée par mon perfServer.ps1 :

Code :

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
Timestamp                  CounterSamples                                                                              
---------                  --------------                                                                              
05/02/2022 18:14:52        \\monPC\interface réseau(intel[r] ethernet connection [2] i219-v)\total des       
                           octets/s :                                                                                  
                           1078331,00728607                                                                            
 
                           \\monPC\processeur(_total)\% temps processeur :                                   
                           25,5405828147069                                                                            
 
                           \\monPC\mémoire\pourcentage d’octets dédiés utilisés :                            
                           52,5155239627965                                                                            
 
                           \\monPC\mémoire\défauts de cache/s :                                              
                           0                                                                                           
 
                           \\monPC\disque physique(_total)\pourcentage du temps disque :                     
                           0                                                                                           
 
                           \\monPC\disque physique(_total)\taille de file d’attente du disque actuelle :     
                           0

Lors de la première arrivée sur index.php, ma fonction perfServer() est bien appelée et les données sont bien transmises dans le tableau et affichées dans mes différents sous-div. (Cf. Image ci-dessous)

Nom : affichagePerf.png
Affichages : 1186
Taille : 11,4 Ko

Nom : affichagePerf.png
Affichages : 1186
Taille : 11,4 Ko

La console m'affiche bien le <div id="fonctionPerfServ"> toutes les 5sec. Mais le contenu visuel, sur mon index.php, ne change pas. (Cf. Image ci-dessous)

Nom : console.png
Affichages : 1192
Taille : 12,7 Ko

Nom : console.png
Affichages : 1192
Taille : 12,7 Ko

Franchement je ne comprends pas
Quelqu'un aurait-il une idée ?

Merci d'avance et bon weekend à toutes et à tous

Cordialement,

Derko.

**Toufik83** · 06/02/2022, 01h03

Bonjour,

Javascript c'est un langage côté Client et PHP est côté serveur, donc si tu veux actualiser le <div> il faudrait utiliser l'objet XMLHttpRequest pour envoyer une requête ajax vers le fichier PHP et ensuite récupérer le retour et l'injecter au DOM (éléments HTML).

**Derko** · 06/02/2022, 08h50

Bonjour Toufik83,
merci pour ton intérêt.

Suite à ton message, j'ai parcouru les documentations de XMLHttpRequest (et quelques 10ène d'autres) afin de bien comprendre de quoi on parle.
Mais j'avoue avoir du mal à me représenter mentalement ce que doit faire mon script.

En gros :
- j'arrive sur mon index.php
- le div devant être actualisé dans mon index.php s'actualise mais ne s'affiche pas car le JS ne peut afficher/traiter des données PHP
- du coup je dois appeler un script JS qui va :
- Récupérer le contenu de ma page PerfServer.php (ma fonction perfServer() ) via XMLHttpRequest
- Analyser et manipuler une propriété responseText contenant le document HTML (la réponse de ma fonction) grâce à fragment.body.innerHTML
- Renvoyer ce document dans l'index.php qui va afficher le contenu de mon div

C'est ça ou bien j'ai absolument tout faux ?

Cordialement,
Derko.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------
EDIT : J'ai changé d'approche suite à la découverte d'un nouveau tuto qui utilise le JQuery.

J'ai mon index.php :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>My Server</title>
        <script src="http://code.jquery.com/jquery.js"></script>
 
        <script type="text/javascript">
            $(document).ready(function () 
            {
                setInterval(function () 
                {
                    $("#fonctionPerfServ").load("fonctions/afficherPerfServer.php");
                }, 5000);
            });
        </script>
    </head>
    <body>       
            <!-- DEBUT Affichage des Performances du serveur -->
            <div class="row" id="fonctionPerfServ">                    
                <?php                        
                    include("fonctions/afficherPerfServer.php");
                ?>
            </div>                        
            <!-- FIN Affichage des Performances du serveur --> 
    </body>
</hmtl>

Et ici mon include("fonctions/afficherPerfServer.php") :

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
<?php
    // On lance le script PowerShell perfServer.ps1 qui va écrire la commande Get-Counter dans le fichier perfServ_LOG.txt
    $output = shell_exec('powershell -executionpolicy remotesigned -command "& {"fonctions/perfServer.ps1"; exit $err}"');
 
    // Le fichier texte
    // $txt_file = 'fonctions/perfServer_Log.txt';
    // Variable permettant de parcourir le fichier texte comme un tableau
    $lines = file('fonctions/perfServer_Log.txt');
 
    // On parcourt le fichier texte ligne par ligne
    foreach ($lines as $num => $line)
    {
        // Si la ligne = 5 alors on obtient la valeur de consommation du réseau
        if($num == 5)
        {
            $reseau = $line;
            $reseau = trim($reseau);
            //$reseau = substr($reseau,0,3);               
        }
        // Si la ligne = 8 alors on obtient la valeur de consommation du processeur
        elseif($num == 8)
        {
            $processeur = $line;
            $processeur = trim($processeur);
            //$processeur = substr($processeur,0,3);                
        }
        // Si la ligne = 11 alors on obtient la valeur de consommation de la RAM
        elseif($num == 11)
        {
            $ram = $line;
            $ram = trim($ram);
            //$ram = substr($ram,0,3);
        }
    }
 
    // On récupère les valeurs dans un tableau
    $perfServer = array($reseau, $processeur, $ram);
 
?>
 
<div class="col-xl-4 col-sm-6 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Network Used</h4>                                                
            <?php                                                
                echo $perfServer[0].' Octets / Seconde';                                             
            ?>
        </div>
    </div>
</div>
 
<div class="col-xl-4 col-sm-6 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">CPU Used</h4>
            <?php
                echo $perfServer[1].' %';                                      
            ?>
        </div>
    </div>
</div>
 
<div class="col-xl-4 col-sm-6 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">RAM Used</h4>
            <?php 
                echo $perfServer[2].' %';                                              
            ?>
        </div>
    </div>        
</div>

Lors du premier chargement de la page index.php, j'obtiens :

Nom : premierCharge.png
Affichages : 1119
Taille : 4,7 Ko

Et lors des actualisations j'obtiens :

Nom : actualisation.png
Affichages : 1193
Taille : 23,2 Ko

Je ne comprends pas pourquoi le fichier n'est pas rechargé...
Est-ce encore une histoire que JS ne peut pas afficher le contenu PHP même lors de l'appel d'une page complète via un include ? Si c'était le cas, je n'aurais pas d'erreur, juste une page blanche non ?

**Derko** · 06/02/2022, 13h24

Salut,
on m'a donné une solution sur un autre forum.
Je post la réponse ici pour ceux que ça peut éventuellement intéresser :

index.php :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>My Server</title>
        <script>
            const parser = new DOMParser(); // DOMParser
        </script>
    </head>
    <body>       
            <!-- DEBUT Affichage des Performances du serveur -->
            <div class="refresh">
                <script>
                    setInterval(async () => { // Après 20 secondes, on exécute la fonction asynchrone suivante.
                        const query = await fetch(location.href); // Nouvelle requête sur la page actuelle
                        const response = await query.text(); // Résultat sous forme de texte
                        const newDiv = parser.parseFromString(response, 'text/html').querySelector('div.refresh'); // On récupère le nouveau 'div'
 
                        newDiv.querySelectorAll('script').forEach(script => { // Pour chaque élément 'script' dans le nouveau 'div'
                            const newScript = document.createElement('script'); // On crée un nouvel element 'script'
                            [...script.attributes].forEach(attr => newScript.attributes.setNamedItem(attr.cloneNode())); // On clone les attribut des éléments 'script' d'origine dans le nouvelle élément 'script'
                            newScript.innerHTML = script.innerHTML; // On copie le contenu de l'élément 'script' d'origine dans le nouvelle élément 'script'
                            script.replaceWith(newScript); // On remplace l'élément 'script' d'origine par le nouvelle élément 'script'
                        }); // Tout ça est requis pour s'assurer que les éléments 'script' charger depuis 'fetch' soit bien exécuter (étant donner que 'DOMParser.parseFromString' parse une string en un DOM mais n'exécute pas le javascript qu'il contient)
                        const div = document.querySelector('.refresh'); // On récupère le 'div' actuel
                        div.replaceWith(newDiv); // On le remplace par le nouveau.
                    }, 20000); // 20000 => 20 seconde
                </script>
 
                <?php
                    include("fonctions/perfServer.php");
                    $perfs = perfServer();
                ?>
                <div class="row">            
                    <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Network Used</h4>                                                
                                <?php                                                
                                    echo $perfs[0].' Octets / Seconde';                                             
                                ?>
                            </div>
                        </div>
                    </div>
 
                    <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">CPU Used</h4>
                                <?php
                                    echo $perfs[1].' %';                                      
                                ?>
                            </div>
                        </div>
                    </div>
 
                    <div class="col-xl-4 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">RAM Used</h4>
                                <?php 
                                    echo $perfs[2].' %';                                              
                                ?>
                            </div>
                        </div>        
                    </div>
                </div>
            </div>                   
            <!-- FIN Affichage des Performances du serveur --> 
    </body>
</hmtl>

J'avoue que je ne comprends pas encore tout mais je suis dessus car je n'aime pas ne pas comprendre.

Bonne fin de weekend à tous.
Merci quand même pour votre aide.

Cordialement,
Derko.

Actualiser un div toutes les x secondes en JS

JavaScript

Discussions similaires

Partager

Partager