Checkbox Onclick et load de Jquery

Résolu/Fermé
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021 - Modifié le 30 mai 2021 à 16:34
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 - 30 mai 2021 à 17:19
Bonjour,
J'essaye de faire en sorte que sur cochage / décochage d'une checkbox je puisse via la fonction onclick inclure un de mes graphique dans une div avec un ID dédié a ce graphique.
J'utilise jquery 3.3.1 et sa fonction load pour essayer de faire ca.

J'ai donc ma checkbox :

      <label class="noselect" for="Sankey">
        <input onclick="loadCluster(this.id)" type="checkbox" class="mr-1" id="Sankey">Sankey
      </label>


Les variables du code suivant ne servent qu'a définir le chemin correct pour inclure le fichier associé a ma checkbox (de la forme "modele/2_cluster/Plot1K2.html") et l'ID. Je ne souhaite pas modifier ce mode de fonctionnement.

Les graphes sont dans un fichier HTML contenant du js qui les génères.
Ma tentative de fonction js :

  $(document).ready(function(){
    $("Sankey").click(function(placeToLoad){
      var clusterFile = '<?=$_POST['nbCluster']?>';
      var nbCluster = clusterFile.slice(7, 8);

      var elem = "/"+placeToLoad+"K"+nbCluster+".html";

      clusterFile = clusterFile + elem;
      placeToLoad = "#"+placeToLoad+"d";

      console.log(placeToLoad);

      $(placeToLoad).load(clusterFile);
    });
  });


Et pour finir ma div qui attend d'être remplie avec le graphique :

      <div class="row m-3">
    <div class="col-md-6 col-12" id="Sankeyd"></div>
  </div>


Et ce qu'il se passe c'est que mon graphique ne s'affiche pas, je ne comprend pas pourquoi c'est pour ca que je demande ici ^^
Si possible j'aimerai ne pas utiliser ca $("Sankey").click(function(placeToLoad) car il fautdrait que je fasse 6 copier coller pour chaque ID de chaque checkBox.

La partie cacher / unload le graphe sera gérée quand cette partie fonctionnera.

Merci d'avance !

3 réponses

jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
Modifié le 30 mai 2021 à 16:55
Bonjour,

Première chose .. si ça ne marche pas il faudrait regarder dans la console js du navigateur si il n'y aurait pas des messages d'erreur.

Ensuite, (ou en même temps...) il faudrait ajouter des console.log des variables dans le code histoire de voir si leur contenu est bon
=> au moins celle la :
console.log("clusterFile",  clusterFile );


A noter que tu as mis du PHP dans ton JS ... hummm ... es-tu certains de récupérer la variable $_POST['nbCluster']


Et pour fini :

Si possible j'aimerai ne pas passer par la ligne $("Sankey").click(function(placeToLoad) car il faut drait que je fasse 6 copier coller pour chaque ID différents.

Alors non ...
Dans l'idéal, tu mets une CLASS "fictive" à tes input et ainsi tu peux les cibler tous avec une seule fonction en javascript

Par exemple
      <label class="noselect" for="Sankey">
        <input type="checkbox" class="mr-1 choix" id="Sankey">Sankey
      </label>
      <label class="noselect" for="Autre">
        <input type="checkbox" class="mr-1 choix" id="Autre">Autre
      </label>

et en js
$(".choix").click(function(){
  
 var id = $(this).id; // récupère l'id du checkbox cliqué

    //... la suite de ton code
   //...
   // ...
});



1
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
Modifié le 30 mai 2021 à 16:55
Merci,
J'ai fait quelques modification pour adapter mon code, j'ai donc ajouter une classe CSS check a toutes mes checkbox, enlever le onclick et modifier ma fonction comme suit :
  $( document ).ready(function(){
    $(".check").click(function(){
      var placeToLoad = $(this).id;
      console.log(placeToLoad);

      var clusterFile = '<?=$_POST['nbCluster']?>';
      var nbCluster = clusterFile.slice(7, 8);

      var elem = "/"+placeToLoad+"K"+nbCluster+".html";

      clusterFile = clusterFile + elem;
      placeToLoad = "#"+placeToLoad+"d";

      console.log(clusterFile);

      $(placeToLoad).load(clusterFile);
    });
  });


Voici ce qui s'affiche dans la console sur click de la checkbox :


le chemin est correct, c'est la partie récupération de l'ID qui ne fonctionne pas.
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696 > regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
30 mai 2021 à 16:57
Etrange qu'il retourne undefined...

Essaye avec :
 var placeToLoad = $(this).attr("id");

et montre nous le code html de tes inputs. ( le code généré.. c'est à dire, lorsque tu affiches la page dans ton navigateur, tu fais CTRL+u pour en afficher la source.. et tu nous le colles ici )
0
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021 > jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024
Modifié le 30 mai 2021 à 17:06
Voici le code d'un de mes input trouver dans le code source de la page :
<div class="col-md-2 col-12">
      <label class="noselect" for="Sankey">
        <input type="checkbox" class="mr-1 check" id="Sankey">Sankey
      </label>
    </div>


Et le message d'erreur qui est apparut dans la console :


Bokey c'est la bibliothèque python que l'on a utiliser pour générer ce graphe interactif html, losrqu'on inclut manuellement en PHP il n'y a aucun soucis
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696 > regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
30 mai 2021 à 17:07

Bokey c'est la bibliothèque python que l'on a utiliser pour générer ce graphe interactif html, losrqu'on inclut manuellement en PHP il n'y a aucun soucis

Donc le souci ne vient pas du code que tu nous as montré...
0
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
Modifié le 30 mai 2021 à 17:10
Plus maintenant,
Merci de m'avoir aider réglé ce premier soucis car avant ca ne chargeait juste pas, et aucun message d'erreurs ne s'affichait.

Voici le début du fichier autogénéré html du graphe interactif :
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
30 mai 2021 à 17:19
La dépose de code sur le forum se fait uniquement en utilisant les balises de code... sinon on ne peut rien en faire.

Ensuite, ben.. faut regarder ce que donne la documentation de ta lib...
Si tu charges cette page directement.. est-ce qu'elle fonctionne ?
0
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
30 mai 2021 à 17:17
J'ai modifier l'extension de mes graphes pour mettre .js a la place de .html et tout semble fonctionner ^^

Un grand merci a toi jordane45 !
0