Sujet Précédent Sujet Suivant

Checkbox Onclick et load de Jquery [Résolu]

Signaler
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
 -
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
 -
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

Réponse 1 / 3
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
 3 565
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
   //...
   // ...
});


.
Cordialement,
Jordane
Signaler
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
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.
Signaler
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
 3 565 >
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
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 )
Signaler
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
 >
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
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
Signaler
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
 3 565 >
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021

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é...
Réponse 2 / 3
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
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 :
Signaler
Messages postés
32989
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
 3 565
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 ?
Réponse 3 / 3
Messages postés
92
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
30 mai 2021
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 !
Répondre Posez votre question