Créer une fonction avec une variable

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:

---

<... 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:

---

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:

---

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:

---

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 8O 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à ;) )

Citation:

---

Envoyé par 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:

---

<... 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:

---

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:

---

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

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:

---

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'.

Bonjour,

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

Entre temps j'ai trouvé ça

Code:

---

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é.

Citation:

---

Envoyé par sekaijin

Code:

---

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:

---

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.

Citation:

---

Envoyé par sekaijin

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

---

Là, par contre, je capte pas 8O

Citation:

---

Envoyé par sekaijin

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:

---

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

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

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+')).

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:

---

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:

---

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

;)