Discussion :

[Ricou13]

Bonjour,

Je cherche à modifier un évènement en lui fournissant une variable.
Je précise que la page est en XHTML Strict.

Voici un exemple simple : soit un élément possédant, à l'origine, un évènement "onclick"

Code :

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

<... id="MonObjet" onclick = "MaFonction('titi');"...>

Suite à un traitement AJAX, je veux changer "titi" en "toto" (mise à jour de la donnée dans la bdd par exemple).
Là où cela se complique c'est que "toto" est donc issu d'une variable.

Pour cela, j'ai utilisé plusieurs méthodes

Code :

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

1
2
3
4
// Méthode 1
Variable = "toto";
Item = document.getElementById("MonObjet");
Item.setAttribute("onclick", "MaFonction('" + Variable + "');");

J'ai ajouté des "Item.getAttribute("onclick");" avant et après la modification pour voir la différence.

Sous FF : cela fonctionne. Les getAttribute affichent : "MaFonction('titi');" puis "MaFonction('toto');"

Sous IE : rien ne se passe (sans erreur). Les getAttribute affichent : "function anonymous() { MaFonction('titi'); }" puis "MaFonction('toto');"


Cette méthode n'étant pas, à priori, la plus propre (les évènements ne se gérant pas comme les attributs) j'ai essayé la suivante :

Code :

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

1
2
3
4
// Méthode 2
Variable = "toto";
Item = document.getElementById("MonObjet");
Item.onclick = "MaFonction('" + Variable + "');";

Sous FF : la fonction n'est pas modifiée (getAttributes identiques avec 'titi') mais fonctionne toujours (avec la valeur "titi" bien sûr)

sous IE : Comme la méthode 1

J'ai donc recherché du coté du "fonction anonymous..." et j'ai fait un premier essai en codant le "toto" en dur

Code :

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

1
2
3
4
// Méthode 3
Variable = "toto";
Item = document.getElementById("MonObjet");
Item.onclick = function() { Test('toto'); };

Sous FF : le code reste inchangé mais cela fonctionne Je ne sais pas où il a collé la fonction

Sous IE : le getAttribute après modif vaut "function() { Test('toto'); };". Cela fonctionne mais je ne peux dire (contrairement à FF) si le code à été modifié ou non

J'en suis là car la méthode 4 consisterait à remplacé le "toto" en dur par la variable mais je vois pas trop comment.

Merci (ne serait-ce que d'avoir lu jusque là )

[sekaijin]

Bonjour,

Je cherche à modifier un évènement en lui fournissant une variable.
Je précise que la page est en XHTML Strict.

Voici un exemple simple : soit un élément possédant, à l'origine, un évènement "onclick"

Code :

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

<... id="MonObjet" onclick = "MaFonction('titi');"...>

Suite à un traitement AJAX, je veux changer "titi" en "toto" (mise à jour de la donnée dans la bdd par exemple).

Code :

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

1
2
3
4
 
<... id="MonObjet"
     onclick = "MaFonction(this.getAttribute('myns:myAttribute'));"
     myns:myAttribute="titi"...>

ton script ajaxt n'a plus alors qu'à faire

Code :

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

myObj = document.getElementById('MonObjet').setAttribute('myns:myAttribute','toto');

tu déclare le name space dans ton entête html et c'est tout
c'est conforme et oppérationnel
A+JYT

[Macintoc]

Ou alors addEventListener (attachEvent sous IE) avec une fermeture lexicale sur maVariable (qui prend soit Toto, soit Titi). Aprés, tu n'a plus besoin de toucher a ton évènement, il suffit de modifier la valeur de maVariable pour que la fermeture lexicale reporte la valeur dans l'appel à la fonction attaché à l'évènement.

En gros :

Code :

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

1
2
var maVariable='Toto'
document.getElementById('MonObjet').addEventListener('click', evtFct=function(){maFunction(maVariable)}, false)

Et si tu veux passer 'Toto' a 'Titi', il suffira de faire maVariable='Titi'.

[Ricou13]

Bonjour,

Désolé, je n'étais pas là ce WE.

Entre temps j'ai trouvé ça

Code :

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

1
2
3
4
// Méthode 4
Variable = "toto";
Item = document.getElementById("MonObjet");
Item.onclick = function() { Test(Variable); };

Ca marche bien (du moins sous IE6 et FF2). L'inconvénient (pour les puristes surtout) c'est que, lorsqu'on regarde le morceau de la page qui a été modifié, sous FF (click droit => code de la séléction), c'est toujours l'ancien code qui est affiché.

Code :

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

1
2
3
4
 
<... id="MonObjet"
     onclick = "MaFonction(this.getAttribute('myns:myAttribute'));"
     myns:myAttribute="titi"...>

J'y avais pensé. Mais ce n'est valable (disons plutot "propre") que pour des variables simple.
Dans mon cas réél, la fonction affiche une infobulle du genre

Code :

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

1
2
3
4
5
// Méthode 4
Titre = '15/01/07 à 20:30';
Texte = '<span class="MatchA">Gymnase municipal à Aramon</span><br /><hr /><span class="score">Score : 3 - 0</span>Par forfait de Clarensac 2 !';
Item = document.getElementById("MonObjet");
Item.onclick = function(event) { InfoBulle_Show(Titre, Texte, event); };

Bien sûr, la méthode de l'attribut supplémentaire devrait pouvoir fonctionner en faisant attention au guillemets.

tu déclare le name space dans ton entête html

Là, par contre, je capte pas

avec une fermeture lexicale sur maVariable[...]pour que la fermeture lexicale reporte la valeur dans l'appel à la fonction attaché à l'évènement

Là non plus d'ailleurs

Je me mets seulement à AJAX et DOM et je n'ai pas encore vraiment étudié la gestion DOM des évènements. Je pense que ce serait la bonne voie mais c'est encore de l'hébreu pour moi.

Je vais travailler sur la solution EventListener, mais en attendant, j'ai un autre problème (peut-être lié à ma syntaxe pas très "carrée" d'ailleurs)
Je veux appliquer cette création d'évènement dans une boucle (je reprend le principe de "toto")

Code :

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

1
2
3
4
5
6
7
8
9
10
// Méthode 5
for(i = 0; i < 5; i++)
{
   Variable = "toto" + i;
   //Cette fois, on crée un objet de type bouton
   Item = document.createElement("input");
   Item.setAttribute(...); // type, value, etc
   Item.onclick = function() { Test(Variable); };
   Parent.appenChild(Item);
}

Le code se passe bien et les boutons sont créés. Seulement, ils ont tous, comme variable transmise, la dernière valeur, soit "toto4". Malheureusement, sous FF, je ne peux voir le code généré (voir Methode3)

Evidement, là aussi, le passage par un attribut devrait fonctionner mais comme mes paramètres sont assez complexe, je préfererais l'éviter et j'aimerais comprendre ce qui ne va pas.

Merci

[Macintoc]

Erf... pour ton dernier problème, c'est exactement le même que j'ai

C'est justement ça un fermeture lexicale. L'utilisation d'une propriété d'un objet A a l'intérieur d'un objet B. Un système extrêmement puissant mais qui peut parfois poser problème.

Dans ton cas, je ne vois aucune solution parfaite.

Il y aurait bien la solution de modifier la fonction addEventListener et attachEvent pour forcer le passage d'un tableau de paramètre mais je n'arrives pas a modifier le DOM.

Une autre solution serait de créer un nouvel objet Param auquel tu passe la valeur de ton paramètre (i dans ton cas) puis de passer cette objet a la fonction attaché à ton évènement mais y a le problème du nom, chaque nouvel objet doit avoir un nom différent.

Ou alors, il y a une solution qui fonctionne mais qui t'oblige a utiliser un seul évènement par balise. C'est de modifier directement l'attribut onClick via la méthode setAttribut('onclick', 'Test('+i+')).

[Ricou13]

Bon,

En attendant qu'un pro nous fasse un article complet, je m'en sort avec la methode 4, adapatée à mes multi variables par ta solution d'attributs supplémentaires, mais dépendante du browser.

Par contre, elle règle le problème des variables indexées dans une boucle puisque l'indexation ne posait pas de pb sous FF et que, pour IE, l'évaluation de la fonction devient indépendante de l'index.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// Méthode 6
Item = document.getElementById("MonObjet");
if(document.all)   // IE
   {
   // Création des attributs supplémentaires
   Item.setAttribute("Attr1", Variable1);
   Item.setAttribute("Attr2", Variable2);
   ...
   Item.onclick = function() { MaFonction(this.Attr1, this.Attr2); };
   }
else   // FF et W3C compatibles
   Item.setAttribute("onclick ", "MaFonction('" + Variable1 + "', '" + Variable2 + ");");

Je ne peux pas utiliser les EventListener car il est impossible d'y définir des paramètres.
De fait, on ne peut pas utiliser cette méthode sans écraser les évènements définis précédemment.
La méthode "function() {...}" utilisée pour IE ne fonctionnera pas telle quelle pour FF car il ne reconnait pas les "this.Attr1" (peut être avec ton histoire de name space ? Mais je ne sais pas m'en servir)

Et si la fonction doit prendre en compte l'objet "event" (c'est mon cas puisqu'il s'agit d'un fonction d'infobulle), on modifie les créations des fonctions comme suit

Code :

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

1
2
3
4
5
6
7
if(document.all)   // IE
   {
   ...
   Item.onclick = function(event) { MaFonction(this.Attr1, this.Attr2, event); };
   }
else   // FF et W3C compatibles
   Item.setAttribute("onclick ", "MaFonction('" + Variable1 + "', '" + Variable2 + ", event);");

Je ferme ce topic en espérant quand même d'autres interventions pour d'autres pistes de recherche.

Merci