problème de refresh graphique

mise à jour graphique non fonctionnel mais rafraîchissement oui

28 avril 2017 à 15:14:01

Bonjour,

Je cherche à rafraîchir une section d'un page web toute les 15 secondes. Je ne connais que tres mal javascript et ajax, d'où mon problème.

Mon refresh de la section de ma page fonctionne correctement : j'ai mis 2 "fonctions" m'affichant un nombre random entre 1 et 100 toutes les 15 secondes, et j'ai bien un changement de ces nombres à ce moment là, mais mon graphique qui devrait être rafraîchie en même temps, lui ne s'affiche même pas alors qu'il s'affiche bien dans une page sans cette ce refresh. (graphique Google Chart).

commencant à ne plus trouver d'idée de modifications à faire pour résoudre mon problème, je m'en remet à vous.

Voici ma page contenant mon code JS (graph.php)

html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/sn2_banc_test_eolienne/test.php";
		function rafraichir() {
                    if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
                    else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
                    //xhr.open('GET',URL+"?anticache="+new Date().getTime(),true);
                    xhr.open('GET',URL,true);
                    xhr.onreadystatechange = ajaxReponse;
                    xhr.send(null);
                                
		}
 
		function ajaxReponse() {
                    if (xhr.readyState === 4) {
                        document.getElementById("refresh_graph").innerHTML=xhr.responseText; 

                        var timer=setTimeout("rafraichir()",100); 
                    }
		}
</script>
<?php
    include'header.php';

?>
</head>

<div class="col-lg-12">
    <h1 class="page-header">
       <span class="glyphicon glyphicon-eye-open"></span> Vision instantanée <small> Observez l'évolution de la production de l'éolienne.</small>
    </h1>
        <ol class="breadcrumb">
        <li class="active">
            <a href="vision.php"><span class="glyphicon glyphicon-chevron-right"></span> Passez en kilomètres par heure</a>
        </li>
    </ol>
</div>



<div class="row">
        <div class="col-lg-1"></div>
            <h2 class="page-header">

            </h2>
        </div>

<body onLoad="javascript:rafraichir();">
    <table>
         <tr>
		<td id="refresh_graph">    
                    

                       
		</td>
	</tr>
    </table>
</body>
</html>

<?php 
        include 'footer.php';

et voici mon php de la page "test.php" contenant ce qui doit etre affiché dans <td id="refresh_graph"> de la page graph.php:

<?php
    include 'fonctions.php';
?>
<!-- SCRIPT DE REALISATION GRAPHIQUE  -->
        <center>
            <?php 
                $nb_min = 1;
                $nb_max = 100;
                $nombre = mt_rand($nb_min,$nb_max);

                echo $nombre;
            ?>

                <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                <script type="text/javascript">
                    google.load;
                      google.load("visualization", "1", {packages:["corechart"]});
                      google.setOnLoadCallback(drawChart);
                      function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                        ['heure', 'Force du vent (en Km/h)', 'Puissance fournie (en Watts)'],

                          <?php
                            releves_chart() // fonction qui permet de recupérer et d'afficher les 30 dernieres entrées de la bases de données
                        
                            //PARAMETRE DU TABLEAU:
                            ?>
                        ]);
                        var options = {
                          title: '',
                          hAxis: {showTextEvery: 5},
                          vAxes: {0: {viewWindowMode:'explicit',

                                      gridlines: {color: 'transparent'},
                                      format:"# km/h"},
                                  1: {gridlines: {color: 'transparent'},
                                      format:"# Watts"}
                                  },
                          series: {0: {targetAxisIndex:0},
                                   1:{targetAxisIndex:1}
                                  },
                          colors: ["blue", "orange"],
                          chartArea:{left:100,top:100, width:625, height:170}
                        };
                        var chart = new google.visualization.LineChart(document.getElementById('chart_id'));
                        chart.draw(data, options);
                      }
                </script>

                <div id="chart_id" style="width: 800px; height: 300px;"></div>
                
                
            <?php 
                $nb_min = 1;
                $nb_max = 100;
                $nombre = mt_rand($nb_min,$nb_max);
                echo $nombre;
            ?>
        </center>

-
Edité par Shyiuna 28 avril 2017 à 15:18:07

xoxotf

28 avril 2017 à 15:57:14

Salut,

Comme beaucoup de langages, il faut déclarer tes variables en JS, tu peux le faire avec le mot-clé : var. De plus tu crées une variable URL en dehors de tes fonctions, puis tu la ré-utilise dans tes fonctions, hors comme dans n'importe quel langage l'intérieur d'une fonction est un espace différent, si tu ne transmet pas la variable à l'appelle de ta fonction elle n'en aura pas connaissance, sauf si c'est une variable global.

Donc ton appel devrait être fait de la sorte:

var URL = "blabla";

function rafraichir(variable) {
   
   if (variable == "blabla") {
      ...
   }

   ...

}

rafraichir(URL);

Pareillement, l'appelle de ajaxReponse est invalide, et la fonction ajaxReponse est invalide aussi, tu devrais travailler avec la console du navigateur quand tu fais du JS ca t'indique les erreurs. Je penses qu'il faut que tu passe par un apprentissage des bases du JS, je serais étonné que tu n'ai pas de fautes dans ton code PHP aussi car cela reste de la programmation est malgré leur différence le PHP et JS sont assez ressemblant.

-
Edité par xoxotf 28 avril 2017 à 16:05:08

Shyiuna

28 avril 2017 à 16:31:14

Bonjour, merci de m'avoir répondu.

Néanmoins, comme dit précédemment, seul mon graphique ne s'affiche pas, mais les valeurs qui doivent changée toute les 15 secondes change bien. De plus mon graphique s'affiche parfaitement dans une page sans JS. Donc je ne pense pas avoir mal coder mon php. Mais si tu remarque des erreur je veux bien que tu m'en fasse part.

Je suis effectivement débutant en JS, mais je pense que repasser par une nouvelle session d'apprentissage ne m'avancera pas plus que cela.

J'ai également ajouter "var" dedans mon URL, mais il n'y a eu absolument aucun changement. (Je pense d'ailleurs que mon URL était déjà hors de ma fonction non ?)

Je te laisse également une image de mon interface web affin d'avoir une petite idée de la chose.

-
Edité par Shyiuna 28 avril 2017 à 16:45:18

Shyiuna

23 mai 2017 à 15:12:43

Bonjour,

Après avoir laissé cette partie de mon projet de coté pour me concentrer sur une section plus importante de ce dernier, je reviens dessus tout en ayant toujours les même problèmes.

Auriez vous une idée s'il vous plait ?

Shyiuna

28 mai 2017 à 15:50:22

toujours personne ?