JS qui marche sur template, mais ne marche pas sur Rails

#1

Hello,
J’ai fait un p’tit bout de code JS pour gérer 2 sous-menu déroulant, pour cela j’utilise le click et toggleclass.
Sur mon template tout marche bien mais sur Rails si je click sur #lang il s’affiche mais ne veut plus partir…

Voici mon bout de code :

$(document).ready(function(){
  // On cache le sous-menu langue avec un display none :
  $(".lang").addClass("lang-disabled");

  // Si on clique sur le menu lang on active ou désactive la liste des langues
  $("#lang").click(function(){
    $(".lang").toggleClass("lang-disabled");
  });

  // Si on clique sur le menu mobile on active ou désactive la liste du menu déroulant
  $("#mobile").click(function(){
    $(".nav-left").toggleClass("left-enabled");
  });
});

Si quelqu’un a une idée du pb je suis preneur :) ?
Merci

0 Likes

#2

Hello !

Je vois pas trop ce que Rails pourrait changer là-dedans…
As-tu des messages d’erreurs dans la console du navigateur ? Charges-tu d’autres scripts JS ?

0 Likes

#3

Bonjour @zcd,

Si tu dis « sur le template » tout marche bien et que sur « Rails » ça ne marche plus. Je suppose que le code fonctionne simplement sur un bout de code HTML mais qu’une fois exécuter dans un code de site tierce sensé avoir le même template, il ne marche plus.

Avant toute choses il convient de vérifier si le code HTML identique a ton template est bien présent dans le code source de la page. Si le template est chargé plus tard de manière asynchrone, alors il ne faut pas que ton code soit dans un $(document).ready puisque cette étape est déjà terminé. Il faudra qu’il soit exécuté à la fin de ton retour asynchrone, quand le DOM sera à jour.


Divers tests a effectuer :

Aller dans F12 > Console pour voir les résultats des tests.

jQuery est-il bien chargé ?

console.log($) doit retourner quelque chose comme ça :

ƒ ( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.…

$(document).ready n’a t-elle pas été écrasée / est accessible ?

console.log($(document).ready) doit retourner quelque chose comme ça :

ƒ ( fn ) {
	// Add the callback
	jQuery.ready.promise().done( fn );

	return this;
}

quand le code est appelé, le document n’est t-il pas DÉJÀ ready ?

Placer un console.log('Est-ce que ce message s'affiche') à l’intérieur de $(document).ready et vérifier qu’il s’affiche.

Les nœuds ciblés existent t-ils dans le DOM au moment de l’exécution ?

console.log($(".lang"), $("#lang"), $("#mobile")) doivent retourner des éléments jQuery.

Les classes CSS appelée sont-elles correctement habillées ? (Les fichiers CSS sont-il correctement chargé)

Après les addClass et toggleClass vérifier les classes retourné par les éléments avec console.log(window.getComputedStyle($(".lang")[0])) par exemple.


Tiens nous au courant et dit nous si quelque chose fait mouche.

1 Like

#4

Hello,
non aucune erreur dans la console, et je n’ai rien d’autre en script.

0 Likes

#5

Hello,
Je viens de tout tester et je n’ai rien vu d’anormale, j’ai mis le résultat en fichier joint!

je vais voir pour modifier mon JS et utiliser plutot des conditions avec un truc dans se genre $(".lang").css(“display”, “none”);
au lieu de charger un class

0 Likes

#6

bon jai fais comme j’ai dis et le resultat est le même…
Mais je viens de remarquer un truc, sur mon bouton j’ai mis une petite animation graphique (en hover) et si je clique 1 fois dessus l’animation s’execute 2 fois de suite rapidement… de temps en temps je vois mon sous-menu apparaitre puis disparaitre aussitôt, et des fois je ne le vois pas apparaitre.

0 Likes