Checkbox Onclick et load de Jquery

Résolu

regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention - 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 !

A voir également:

Checkbox Onclick et load de Jquery
Load optimized defaults - Forum Windows
Bios asus/exit/load optimized defaults - Forum BIOS
Pc ne demarre plus après avoir rétablit paramètres par défaut ✓ - Forum Windows 7
Acrobat failed to load its core dll ✓ - Forum Windows
Couldn't load xpcom thunderbird ✓ - Forum Mozilla Firefox

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

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
   //...
   // ...
});

regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention

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.

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746 > regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention

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 )

regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention

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

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746 > regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention

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

regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention

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 :

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

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

regitraz Messages postés 89 Date d'inscription Statut Membre Dernière intervention

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 !

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''

J'ai le message "coudn't load XPCOM."

Coudn't load XPCOM.

couldn't load xpcom

Firefox ne marche plus : couldn't load XPCOM

Votre réponse

Discussions similaires