Discussion :

[clavier12AZQSWX]

bonjour,

à l'écran je génére du contenu HTML à partir d'un code javascript qui boucle sur un tableau de valeurs.

sur chaque ligne double-cliquée, j'ai besoin de générer un événement javascript qui se lance via une instruction jquery.
le problème c'est que cette instruction jquery comporte un sélecteur avec une expression ayant des guillemets et une variable.
en bref : je m'enmèle avec les quotes, anti-quotes, guillemets...

voici mon code simple qui marche avec un alert (donc avant que j'ajoute la sauce jquery) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
for(var key in categories)
{
var value = categories[key];	
var lien_dbclic="";
var mot=key;
lien_dbclic="<span style='cursor: pointer;' ondblclick=\"alert('"+mot+"');\" > filtrer</span>";
 
texte+="<br>- "+key + " : " + value + "h" + " ("+ categories_nb[key]+" fois)" + lien_dbclic;
}
texte=texte+"</span>";
$( ".text-muted" ).append(texte);

Maintenant je veux remplacer dans le onclinck mon test alert par ma ligne jquery qui fonctionne ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
mot='grammaire';
$("tr:contains('" + mot + "')").toggle("slow");

Ce code cherche toutes les lignes TR d'un tableau et cache celles contenant le mot dans son texte html. Le toggle est un effet d'animation.

ma ligne simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lien_dbclic="<span style='cursor: pointer;' ondblclick=\"alert('"+mot+"');\" > filtrer</span>";

devient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lien_dbclic="<span style='cursor: pointer;' ondblclick=\"$("tr:contains('" + mot + "')").toggle("slow");\" > filtrer </span>";

mais ça marche pas, ya un problème de quotes ou guillements.
j'ai tenté de mettre des slash avant chaque guillements et avant chaque quote , mais ça ne résoud pas le souci dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
lien_dbclic="<span style='cursor: pointer;' ondblclick=\"$(\"tr:contains(\'\" + mot + \"\')\").toggle(\"slow\");\" > filtrer </span>";

Le problème c'est que dans mon selecteur jquery, j'ai une expression de concatenation avec les chaines et la variable mot que je n'arrive pas à mettre à l'intérieur de la concatenation de chaine qui sera elle-même déposé dans le onclick.

si il existait en javascript un super délimiteur de chaine comme en php (genre le triple guillemet), ce serait super, je pourrais faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lien_dbclic=""" <span style='cursor: pointer;' ondblclick=\"$("tr:contains('" + mot + "')").toggle("slow");;\" > filtrer </span> """;

quand je regarde le code généré niveau navigateur, je vois que la variable mot n'a pas été interprétée et est présente dans le HTML au lieu d'être remplacée par sa valeur !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

- grammaire: 6h 12fois <span style="cursor: pointer;" ondblclick="$(" tr:contains('="" +="" mot="" ')").toggle("slow");"=""> filtrer</span>

comment m'en sortir ? j'ai l'impression de devoir faire une concatenation à la INCEPTION (à l'interieur d'une concatenation)

[Toufik83]

Bonjour,

Rien ne t'empêche d'utiliser des apostrophes à l'intérieur des guillemets.

Deux solutions possibles :

• Créer une fonction toggleTr(value)et l'appeler quand tu construis les span : lien_dbclic="<span style='cursor: pointer;' ondblclick='toggleTr("+mot+")' > filtrer</span>";.
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
   
  function toggleTr(value){
     $('tr:contains('+value+')').toggle('slow');
  }

• Ou bien supprimer l'attribut dblclick de l'html et le remplacer par un data-mot puis attacher l'événement en jQuery :
  lien_dbclic="<span style='cursor: pointer;' class='filter' data-mot='"+mot+"'> filtrer</span>";

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
   
  $(document).ready(function(){
     $(".text-muted").on("dblclick","span.filter",function(){
         toggleTr($(this).attr('data-mot'));
     });
  });

[clavier12AZQSWX]

merci Toufik83

en fait j'ai fait un mix de tes deux propositions :

j'ai bien enlevé mon éventement dblick et poussé ma variable dans le data :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lien_dbclic="<span style='cursor: pointer;' class='filtrer' data-mot='"+mot+"'> filtrer</span>";

et j'ai ajouté l'avtion en jq directement sans passer par une fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function(){
   $(".text-muted").on("dblclick","span.filtrer",function(){
 
	   $("tr:contains('" + $(this).attr('data-mot') + "')").toggle("slow");
   });