Partage

JQuery plot défaut d'affichage avec Firefox >v19

Sujet résolu

24 avril 2018 à 11:54:13

Bonjour à tous,

Je me retrouve confronter à un soucis, malheureusement je n'arrive pas en localiser la cause.

Je vous explique :

Sur ma page web, je souhaite afficher un graphique avec plot de JQuery avec certains paramètres cliquables (avec des "onclick"). Celui-ci fonctionne convenablement sur Firefox version 19 (oui le graph a quelques belles années derrière lui ) mais dès qu'on met à jour Firefox et cela peu importe la version, ça ne passe plus, j'ai beau cliqué sur le "onclick", rien de ne se passe. Sur les dernières versions de Chrome pareil, et sur IE8 pareil aussi.

J'ai regardé les changelog de Firefox entre la 19 et 20, rien ne semble toucher au Javascript hormis pour la partie développer, mais au vu du descriptif, il ne me semble pas que cela impacte ma page.

J'ai aussi tenté d'installer Firefox Developper Edition pour voir les erreurs qu'il me retourne, rien de bien folichon (je vous mets le screen) car bizarre que sur la 19 les erreurs sont ok mais pas sur la 20.

J'ai mis la dernière version de plot (0.8.3).

Là je sèche un peu... Ah si, dans la journée, je vais essayer de remplacer les "onclick" par des "checkbox" et un "submit". :-°

Je ne vous fournie pas encore de code car en soi, je ne vois pas pourquoi le code fonctionne sous v19 et non v20+ :colere: . Mais je peux vous en fournir des parties s'il faut

Could you help me ? :honte:

error

Makatury

24 avril 2018 à 13:09:40

Bonjour,

Peux-tu nous fourni le html et le js ?

Car d'après l'erreur ton code est invalide...

Demg

24 avril 2018 à 14:12:49

Makatury a écrit:

Bonjour,

Peux-tu nous fourni le html et le js ?

Car d'après l'erreur ton code est invalide...

Tu parles bien de la 1ère erreur ? Si oui, le script "jquery.js" provient directement de la librairie, j'ai quand même modifié le script pour déplacer l'instruction après le "return" mais cela n'a rien changé.

Je peux te fournir le script, cela te poserait un soucis si je modifie juste le nom de variable utilisées (pour un soucis de sécu ) ?

SpaceIn

24 avril 2018 à 14:48:53

Makatury parle plus probablement des 2 erreurs qui suivent, plutôt que du warning sur le code jquery qui est sans conséquence.

Apparemment tu as une erreur de syntaxe dans une boucle for -peut être l'interpréteur javascript était plus laxiste à l'époque sur cette erreur-, et tu as une fonction qui n'est pas définie (peut être un effet de bord de la 1ère erreur), celle qu'appelle onclick d'ailleurs.

Sans le code, difficile d'aller plus loin.

Demg

24 avril 2018 à 16:06:07

SpaceIn a écrit:

Sans le code, difficile d'aller plus loin.

J'essaye de vous fournir cela demain dans la matinée car je dois modifier l'intitulé des variables

<?php 
	ini_set("register_globals","on");
	ini_set("display_errors","on");
	ini_set("expose_php","on");
	require_once('includes/utile.inc.php'); 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <link rel="shortcut icon" href="../images/favicons.ico" type="image/x-icon">
  <link rel="icon" href="images/favicond.ico" type="image/x-icon">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Graphs</title>
  <link href="includes/style.php" rel="stylesheet" type="text/css"></link>
  <script language="javascript" type="text/javascript" src="../LIBS/flot/jquery.js"></script>
  <script language="javascript" type="text/javascript" src="../LIBS/flot/jquery.flot.js"></script>
  <script language="javascript" type="text/javascript" src="../LIBS/flot/jquery.flot.selection.js"></script>
  <script language="javascript" type="text/javascript" src="../LIBS/flot/jquery.flot.navigate.js"></script>

 </head>
 <body>
<?php
	//Vérification des données POSTEES : 
	if( count($_POST) > 0 ) {

		//vérification de la présence des numéros
		if ( !XNumberExist($_POST['X']) ) $_POST['X'] = "";
		if ( !YNumberExist($_POST['Y']) ) $_POST['Y'] = "";
		//vérification du format des dates
		$_POST['Debut'] = formatDate(strlen($_POST['Debut'])==4?"01/01/".$_POST['Debut']:$_POST['Debut']);
		$_POST['Fin'] = formatDate(strlen($_POST['Fin'])==4?"31/12/".$_POST['Fin']:$_POST['Fin']);

		$ref = getref($_POST['X'], $_POST['Y'], $_POST["Debut"], $_POST["Fin"], $_POST["Date"], isset($_POST["Cut"]));

	}
?>  
  <form id="formulaire" method="POST">
   <fieldset style="border:1px solid silver;">
    <legend>Données : </legend>
    <label>X </label>
    <input style="margin-left:3px;" type="text" name="X" value="<?php echo (isset($_POST['X'])&&XNumberExist($_POST['X'])?$_POST['X']:'')?>" size="5">
    <label>Y </label> 
    <input style="margin-left:3px;" type="text" name="Y" value="<?php echo (isset($_POST['Y'])&&YNumberExist($_POST['Y'])?$_POST['Y']:'')?>" size="5">
    (<input type="checkbox" name="Cut"<?php if(isset($_POST["Cut"])) echo " checked=\"checked\"";?>>pistes liées à l'objet)
    &nbsp;&nbsp;&nbsp;   
    <label>Du </label> 
    <input style="margin-left:3px;" type="text" name="Debut" size="7" value="<?php echo (isset($_POST['Debut'])?$_POST['Debut']:'');?>">
    <label> au </label>
    <input style="margin-left:3px;" type="text" name="Fin" size="7" value="<?php echo (isset($_POST['Fin'])?$_POST['Fin']:'');?>">
    <select name="Date">
     <option value="Epoch"<?php echo (count($_POST)>0 && $_POST['Date'] == 'Epoch'?' selected="selected"':'')?>>Epoch</option>
     <option value="REF_date"<?php echo (count($_POST)>0 && $_POST['Date'] == 'REF_date'?' selected="selected"':'')?>>REF_date</option>
    </select>
    <input type="submit" name="valider" value="Rechercher" style="margin-left:10px;">
    <?php echo isset($ref["REF_date"])&&count($ref)>0?count($ref["REF_date"]["data"])." ref disponibles.":"";?> 
   </fieldset>
<?php 
 if(isset($_POST["valider"])
 && (strlen($_POST["X"])>0 || strlen($_POST["Y"])>0)
 && true) {
  

 	$field = array("P0" => "Precision 0", "P1" => "Precision 1", "P2" => "Precision 2");
?>
   <fieldset style="border:1px solid silver;" id="choice">
    <legend>Composantes du graphique : </legend>
    <table style="font-size:medium;" border="1">
     <tr>
      <th width="2%">y2</th>
<?php 
	foreach ($field as $id => $nom) 
		echo "<td><input style=\"width: 50px; height: 50px;\" type=\"checkbox\" id=\"y2".$id."\" value=\"".$id."\"></td>\n";
?>
      <th>l<input type="radio" name="y2Style" value="ligne" onclick="selectYData('');" checked="checked">
      /<input type="radio" name="y2Style" value="point" onclick="selectYData('');">p</th>
     </tr>
     <tr>
      <th>y1</th>
<?php 
	foreach ($field as $id => $nom) 
		echo "<th width=\"6%\" style=\"cursor: pointer;\" onclick=\"selectYData(this.id);\" id=\"".$id."\">".$nom."</th>\n";
?>
      <th>l<input type="radio" name="yStyle" value="ligne" onclick="selectYData('');" checked="checked">
      /<input type="radio" name="yStyle" value="point" onclick="selectYData('');">p</th>
     </tr>
    </table>
   </fieldset>
  </form>	
  <fieldset style="border:1px solid silver;float:left;width:96%;text-align: justify;" id="action0">
   <legend>Aide : </legend> 
   <ul>
    <li>Pour commencer, cliquez sur le nom de la composante du graph que vous souhaitez afficher.</li>
    <li>Cochez les cases des composantes à ajouter sur l'axe y2, validez en reséléctionnant y1.</li>
    <li>Zoomez en sélectionnant une zone du graphique qui vous intéresse (le zoom s'effectue sur l'axe y1).</li>
    <li>Dezoomez en recliquant sur le nom de la courbe principale (y1).</li>
   </ul>
  </fieldset>
  <fieldset style="border:0px solid silver;float:left;width:78%;height:720px;display:none;" id="fieldsetGraph">
   <legend>Graphique : </legend>
<?php if ( isset($ref) && count($ref)>0 ) { ?>
   <script language="javascript" type="text/javascript">
  	
    function selectYData(id) {
      var datasets = <?php echo json_encode($ref); ?>;
		  var data = [];
		  var range = null;
		  var options = { 
		           xaxis: { 
		            mode: "time", 
		           },
		           grid: { 
		            backgroundColor: "rgba(56, 56, 56, 1)",
		            color: "rgba(255, 255, 255, 1)" 
		           },
		           selection: { 
		            color: "brown", 
		            mode: "xy" 
		           },
		           legend: { show: true, container: $("#divLegend") }
		          };
		  var plot;
 
     data = [];
     this.selectedColor = 'gray';
     this.deselectedColor = 'transparent';
     if (this.currentY1 != 'undefined' && this.currentY1 != '' && this.currentY1 != null) {
      document.getElementById(this.currentY1).style.background = this.deselectedColor;
     }
     else {
      document.getElementById('fieldsetLegend').style.display = 'block';
      document.getElementById('action0').style.display = 'none';
      //document.getElementById('action1').style.display = 'block';
      document.getElementById('fieldsetGraph').style.display = 'block';
     }

     if(id != "")
     this.currentY1 = id;     
     document.getElementById(this.currentY1).style.background = this.selectedColor;

     var form = document.forms.formulaire;
     for (i = 0; i < form.length; i++) {
      if (form[i].type == 'checkbox'  && 
          form[i].id.substr(0, 2) == 'y2' && 
          form[i].checked && form[i].id != 'y2' + this.currentY1) {
      }
     }
     for each(var comp in datasets) {
      if (comp.type == this.currentY1) {
       comp.yaxis = 1;
       if($("input[name=yStyle]:checked").val() == "point") {
				comp.points.show=true;
       }
       data.push(comp);
      }
      else {
       for (i = 0; i < form.length; i++) {
        if (form[i].type == 'checkbox'  &&
            form[i].checked && form[i].id == 'y2' + comp.type) {
         comp.yaxis = 2;
		     if($("input[name=y2Style]:checked").val() == "point") {
					comp.points.show=true;
		     }         
         data.push(comp);
        }
       }
      }
     }

     plot = $.plot( $("#placeholder"), data, options );
     $("#placeholder").bind("plotselected", function (event, ranges) {
      plot = $.plot($("#placeholder"), data,
       $.extend(true, {}, options, {
        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
      }));
		 }); 

    };
    
   </script> 
<?php } ?>   
   <div id="placeholder" style="width:100%;height:700px;"></div>
  </fieldset>
<?php } ?>
 </body>
</html>

J'ai remarqué que le "for each .... in" n'était plus le bienvenu, j'ai tenté de le remplacer par un "for ... of" mais pas marché en le remplaçant "for each ... in" par "for ... in" le graphique s'affiche mais sans données

-
Edité par Demg 25 avril 2018 à 10:43:04

Demg

26 avril 2018 à 7:52:31

J'ai effectué 2 tests :

Remplacer : "for each ... in" par "for ... of", résultat : TypeError : datasets is not iterable

Remplacer : "for each ... in" par "for ... in", résultat : le graphique s'affiche mais aucune donnée n'est affichée, aucune erreur n'apparaît.

Makatury

26 avril 2018 à 9:32:44

Dans ta boucle tu as fais un console.log() de l'item ? afin de savoir ce que contient la variable.

$.each(json, function (key, data) {
    console.log(key, data)

})

Genroa

26 avril 2018 à 10:15:06

for...in et for...of ont deux comportements bien différents. Tu ne peux pas juste changer de l'un à l'autre sans faire attention, ce n'est pas juste un changement de syntaxe. Mais dans tous les cas, les deux sont encore légaux. Souvent, si un for...in ne passe plus une fois que tu tentes de l'écrire mais avec un for...of, c'est que tu faisais un truc sale. (genre créer un objet formel et boucler sur ses propriétés comme si c'était les clefs d'une Map). Pour "malgré tout" boucler de manière clean sur les propriétés d'un objet (ça peut servir), utilise Object.keys(...), Object.values(...), etc., et boucle dessus.

Edit : j'avais pas vu... C'était un for each...in o_O mais c'est pas genre déprécié depuis 10 ans ça? La lib que tu utilises elle a quel âge? (mon point sur le for...of avec Object tient toujours, au passage)

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Demg

27 avril 2018 à 8:00:21

Makatury a écrit:

Dans ta boucle tu as fais un console.log() de l'item ? afin de savoir ce que contient la variable.
$.each(json, function (key, data) {
    console.log(key, data)

})

Je l'ai fait, j'avais bien mes valeurs

Genroa a écrit:

for...in et for...of ont deux comportements bien différents. Tu ne peux pas juste changer de l'un à l'autre sans faire attention, ce n'est pas juste un changement de syntaxe. Mais dans tous les cas, les deux sont encore légaux. Souvent, si un for...in ne passe plus une fois que tu tentes de l'écrire mais avec un for...of, c'est que tu faisais un truc sale. (genre créer un objet formel et boucler sur ses propriétés comme si c'était les clefs d'une Map). Pour "malgré tout" boucler de manière clean sur les propriétés d'un objet (ça peut servir), utilise Object.keys(...), Object.values(...), etc., et boucle dessus.

Edit : j'avais pas vu... C'était un for each...in mais c'est pas genre déprécié depuis 10 ans ça? La lib que tu utilises elle a quel âge? (mon point sur le for...of avec Object tient toujours, au passage)

Yeah nickel, tu m'as sauvé la mise !! Oui le "for each... in" est déprécié depuis un petit moment, mais j'ai repris d'anciens scripts pour les améliorer et adapter donc jusqu'aujourd'hui je ne m'y attardais pas

Du coup, pour ceux qui cherchent la réponse :

il faut remplacer

for each(var comp in datasets par for (var comp of Object.values(datasets)

Merci à vous deux pour votre temps pour une si petite chose, faut que je me spécialise dans le JS

-
Edité par Demg 27 avril 2018 à 8:01:44

Genroa

27 avril 2018 à 10:10:09

Dernier point, vu que tu sembles vouloir progresser : oublie var. 99% du temps, c'est remplaçable par let et ça t'évitera des surprises.

for(let mon_element of ma_collection) {

}

Le mot-clef let permet de définir une variable locale, c'est-à-dire une variable n'existant qu'à l'intérieur du bloc dans lequel elle a été définie (bloc if, bloc d'une boucle, une fonction, etc.) var est un mot-clef souvent mal utilisé, qui ne sert aujourd'hui que dans des cas précis. Le mot-clef var définit une variable "locale" à toute la fonction. Exemple:

function ma_fonction() {
 
    let i1 = 2;
    for(let i2=0; i2<10; i2++) {
         //...
         let locale=i2; // cette variable est supprimée et recréée à chaque tour de boucle
    }
    
    for(var i3=0; i3<10; i3++) {
        //...
        var fausse_locale=i3; // cette variable n'est pas supprimée et recréée à chaque tour.
    }
 
    // Ici, i1 existe toujours.
    // Ici, i2 n'existe plus : il a été défini dans le bloc for
    // Ici, i3 existe...toujours. Même défini dans un bloc, il est global dans la fonction.
    // Ici, fausse_local existe toujours aussi, contrairement à ce qu'on pourrait attendre d'une variable locale.
    console.log(i3);
    console.log(fausse_locale);
    console.log(i2); // va provoquer une erreur : i2 n'existe plus! Et c'est normal.
}


ma_fonction();

Lien JSFiddle pour que tu puisses tester en live : lien (n'oublie pas d'ouvrir ta console, tout est affiché dedans, et de cliquer sur Run en haut à gauche)

Et ça, ça va te créer des comportements bizarres ou problèmes un jour, parce que tu vas t'attendre à ce que la variable soit recréée alors que non. Tu peux avoir des écrasements de valeur avec ça par exemple.

-
Edité par Genroa 27 avril 2018 à 10:20:43

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\