[DOM] passage de parametres

Version imprimable

bonjour,
je crée une fonction en javascript qui créé un formulaire de saisie avec un bouton envoyer et un bouton close

pour le bouton close j'affecte une fonction qui se chargera de supprimer les éléemnts du formulaire dynamiquement
Code:

1 2 3 input_close.setAttribute("onclick","close_insert_img_book(div_insert_img_b,div_parent_insert_img)"); input_close.onclick = close_insert_img_book(div_insert_img_b, div_parent_insert_img); // pour Internet Explorer
la fonction prend deux paramètres, voici donc cette fonction :
Code:

1 2 3 4 5 6 7 function close_insert_img_book(div_insert_img_b,div_parent_insert_img) { var enfant = document.getElementById(div_insert_img_b); var parent = document.getElementById(div_parent_insert_img); alert(enfant); alert(parent); //enfant.parentNode.removeChild(enfant); }
lorsque je lance et que j'affiche alert(enfant), et alert(parent), il m'affiche "Null" comme valeur, ce qui n'est pas normal puisque j'ai vérifié que les div étaient bien créés sur ma page web initiale

donc ma question serait de savoir si j'utilise la bonne syntaxe pour passer des paramètres dynamiquement en javascript ??

ou quelqu'un a-t-il un exemple ou une solution à ce problème ?

merci par avance

Remplace :
Code:

1 2 3 input_close.setAttribute("onclick","close_insert_img_book(div_insert_img_b,div_parent_insert_img)"); input_close.onclick = close_insert_img_book(div_insert_img_b, div_parent_insert_img); // pour Internet Explorer
Par :

Code:

input_close.onclick = function(){close_insert_img_book('div_insert_img_b', 'div_parent_insert_img');}

11/01/2009, 14h31
aztec

merci pour la syntaxe que je ne connaissais pas -> celle-ci est-elle valable pour IE et Firefox ?

mais par contre, le résultat est le même, de plus il faut écrire :

input_close.onclick = function(){close_insert_img_book(div_insert_img_b, div_parent_insert_img);} avec les paramètres sans les guillements puisque ce sont des variables justement que je souhaite passer en paramètre

voici un exemple de code HTML généré (paramètres cette fois-ci avec des guillemets simple puisque les variables sont transformées en id)

Code:

<td class="violet12px" align="center" width="27%"><span style="cursor: pointer" ondblclick="create_insert_img_book('biblio','set_img_book=1','div_insert_img1','div_parent_insert_img1','num_bk','30')" title="Double-cliquez pour modifier"> </span><div id="div_parent_insert_img1"><div id="div_insert_img1"></div></div></td>

lorsque je double-clique, la fonction create_insert_img_book se lance bien et mon formulaire est bien créé dans le div_insert_img1, mais lorsque je clique sur le bouton "Fermer" du formulaire qui est censé lancer close_insert_img_book, alors tout se passe comme si il ne connaissait plus la valeur des variables div_insert_img et div_parent_insert_img qui sont respectivement div_insert_img1 et div_parent_insert_img1, ce qui est confirmé par les valeurs obtenues Null et Null de mes alert

donc ceci ne résout pas le problème du passage des paramètres

j'avoue que je n'ai pas d'idée, pourtant je pense que la solution doit être toute simple

merci
11/01/2009, 18h34
Bovino

Le problème, c'est que tu ne montres pas suffisamment de code pour pouvoir se faire une idée...
Pour ce qui est de la première question :

Citation:

celle-ci est-elle valable pour IE et Firefox ?

Non seulement elle est effectivement valable pour IE et FF (mais aussi Opera, Chrome Safari et autres) mais elle est surtout préférable. Le DOM niveau 2 accepte que les événements soient affectés en HTML comme des attributs, mais cela reste de la gestion d'événements, donc du JavaScript, il ne s'agit pas à proprement parler d'attributs HTML.

Pour le reste, j'imagine qu'il peut s'agir d'un problème de portée de variable ou de façon de générer le formulaire. En tout état de cause, il serait préférable de montrer l'ensemble du script ainsi que l'appel des fonctions.

1 pièce(s) jointe(s)

voici le code complet de mes deux fonctions

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function create_insert_img_book(section,set,div_insert_img,div_parent_insert_img,num,num_book)
 {
   var form_insert_img = document.createElement('form');
   var fieldset_insert_img = document.createElement('fieldset');
   var input_insert_img = document.createElement('input');
   var input_submit = document.createElement('input');
   var input_close = document.createElement('input');
   var div_insert_img_b = document.getElementById(div_insert_img);
   var div_parent_insert_img = document.getElementById(div_parent_insert_img);
 
   form_insert_img.setAttribute("enctype","multipart/form-data");
   form_insert_img.setAttribute("encoding","multipart/form-data");
   var params = "?go="+section+"&"+set+"&"+num+"="+num_book;
   form_insert_img.setAttribute("action",params);
   form_insert_img.setAttribute("method","post");
 
   input_insert_img.setAttribute("type","file");
   input_insert_img.setAttribute("name","userfile");
   input_insert_img.setAttribute("enctype","multipart/form-data");
   input_insert_img.setAttribute("encoding","multipart/form-data");
   input_submit.setAttribute("id","x");
   input_submit.setAttribute("type","submit");
   input_submit.setAttribute("value","Envoyer");
 
   input_close.setAttribute("id","x");
   input_close.setAttribute("type","button");
   input_close.setAttribute("value","Fermer");
   //input_close.setAttribute("onclick","close_insert_img_book(div_insert_img_b,div_parent_insert_img)");
   //input_close.onclick = close_insert_img_book(div_insert_img_b, div_parent_insert_img); // pour Internet Explorer
   input_close.onclick = function(){close_insert_img_book(div_insert_img_b, div_parent_insert_img);}
 
   fieldset_insert_img.appendChild(input_insert_img);
   fieldset_insert_img.appendChild(input_submit);
   fieldset_insert_img.appendChild(input_close);
   form_insert_img.appendChild(fieldset_insert_img);
   div_insert_img_b.appendChild(form_insert_img);
 }
 
 
function close_insert_img_book(div_insert_img_b,div_parent_insert_img)
{
  alert(div_insert_img_b);
  alert(div_parent_insert_img);
  var enfant = document.getElementById(div_insert_img_b);
  var parent = document.getElementById(div_parent_insert_img);
  alert(enfant);   alert(parent);
  enfant.parentNode.removeChild(enfant);
}

et en pièce jointe le code initial de ma page web qui pose problème

Essaie ca:

Code:

1
2
3
4
5
6
7
input_close.onclick = function(p1,p2)
                             {
                                return function()
                                {
                                  close_insert_img_book(p1,p2);
                                }
                             }(div_insert_img_b, div_parent_insert_img)

j'ai essayé, malheureusement :

voici le resultat

enfant is null
close_insert_img_book(div#div_insert_img2, div#div_parent_insert_img2) functions.js (ligne 364)
(?)()()

dans votre code, pourquoi les (div_insert_img_b, div_parent_insert_img) sont en dehors des parenthèses ??

Code:

1
2
3
4
5
6
7
   input_close.onclick = function(p1,p2)
                             {
                                return function()
                                {
                                  close_insert_img_book(p1,p2);
                                }
                             }(div_insert_img_b, div_parent_insert_img)

13/01/2009, 09h50
DoubleU
En fait, le fonctionnement normal pour ajouter un gestionnaire d'evenement (onclick) sur un objet DOM fait que tu dois passer une fonction avec le prototype suivant :

Code:

onclick = fonction(event)

Donc, tu ne peux pas passer explicitement de paramètres persos à cette fonction puisque le moteur javascript lui ne passera de toute façon qu'un seul paramètre qui est l'évènement déclanchant.

Un moyen de contourner ca consiste à créer une closure, c'est à dire une fonction qui retourne une fonction. Et l'avantage d'une closure, c'est que tu peux lui spécifier un contexte d'exécution spécial.
Ici, je déclare une fonction qui accepte 2 paramètres p1 et p2 et j'appelle immédiatement cette foncton en lui passant tes 2 arguments (le (div_insert_img_b, div_parent_insert_img) en dehors des parenthèses).
Quand cette fonction s'exécute, elle retourne une fonction qui sera définie comme le gestionnaire d'evenement pour le onclick et cette fonction connaitra dans son contexte d'exécution tes 2 paramètres que tu pourras utiliser.
Code:

1 2 3 enfant is null close_insert_img_book(div#div_insert_img2, div#div_parent_insert_img2) functions.js (ligne 364) (?)()()
Code:

1 2 var enfant = document.getElementById(div_insert_img_b); var parent = document.getElementById(div_parent_insert_img);
Tes paramètres sont censés être des string (l'id des divs), or tu lui passes des divs, d'ou l'erreur.
13/01/2009, 10h01
le_chomeur

Citation:

Envoyé par DoubleU

En fait, le fonctionnement normal pour ajouter un gestionnaire d'evenement (onclick) sur un objet DOM fait que tu dois passer une fonction avec le prototype suivant :

Code:

onclick = fonction(event)

Donc, tu ne peux pas passer explicitement de paramètres persos à cette fonction puisque le moteur javascript lui ne passera de toute façon qu'un seul paramètre qui est l'évènement déclanchant.

Un moyen de contourner ca consiste à créer une closure, c'est à dire une fonction qui retourne une fonction. Et l'avantage d'une closure, c'est que tu peux lui spécifier un contexte d'exécution spécial.
Ici, je déclare une fonction qui accepte 2 paramètres p1 et p2 et j'appelle immédiatement cette foncton en lui passant tes 2 arguments (le (div_insert_img_b, div_parent_insert_img) en dehors des parenthèses).
Quand cette fonction s'exécute, elle retourne une fonction qui sera définie comme le gestionnaire d'evenement pour le onclick et cette fonction connaitra dans son contexte d'exécution tes 2 paramètres que tu pourras utiliser.

c'est ce qu'on appel une fonction anonyme également car elle ne porte pas de nom ( terme souvent plus employé que closure :oops: ) j'intervenais juste a titre informatif :)
13/01/2009, 10h18
DoubleU
Citation:

Envoyé par le_chomeur

c'est ce qu'on appel une fonction anonyme également car elle ne porte pas de nom ( terme souvent plus employé que closure ) j'intervenais juste a titre informatif

C'est pas la même chose.

Code:

maDiv.onclick = function(){alert(this.id)}
Code:

1 2 function foo(arg){alert(arg())} foo(function(){return "bar";})
Dans les deux exemples, tu as des fonctions anonymes qui ne sont pas pour autant des closures.

alors que définirais tu par closure :?

pour moi ceci :

Code:

function(){return "bar";}

est une fonction anonyme

au même titre que :

Code:

1
2
3
4
5
6
7
8
 
function(p1,p2)
                             {
                                return function()
                                {
                                  close_insert_img_book(p1,p2);
                                }
                             }(div_insert_img_b, div_parent_insert_img)

13/01/2009, 11h14
DoubleU

Une closure est une structure spéciale qui permet à une fonction d'accéder à des variables hors de sa portée. Même si dans sa syntaxe elle utilise des fonctions anonymes, c'est vraiment quelque chose de différent d'une simple fonction anonyme.
13/01/2009, 11h21
E.Bzz

Citation:

Envoyé par DoubleU

c'est vraiment quelque chose de différent d'une simple fonction anonyme.

Visiblement ce n'est pas "différent", mais plutôt "un cas parmi d'autres" (ou "une application spécifique") de fonction anonyme ...

A+
13/01/2009, 11h29
le_chomeur

+1 E.Bzz
Après je veux bien que tu nous explique la différence DoubleU
13/01/2009, 12h12
Bovino

http://fr.wikipedia.org/wiki/Fermeture_(informatique)
13/01/2009, 12h41
le_chomeur

hum hum hum :? pas tout tout compris mais en gros une closure permet d'accéder a des variables qui ne sont pas dans le périmètre de la fonction quoi ?
13/01/2009, 14h23
DoubleU

La page donnée par Bovino explique d'une autre façon que celle que j'ai proposée plus haut le principe de la closure.
D'ailleurs, la question posée dans exemple initial se prete bien à l'explication: comment faire pour passer des paramètres au callback d'un evenement, qu'il soit ajouté via onclick on addEvent ?

Pour répondre à ce problème, tu vas vite te rendre compte qu'il te faut une structure spéciale du langage, qu'on appelle une closure.

Pour revenir à la question de E.Bzz, la différence entre une closure et une fonction anonyme est la même que celle entre Ajax et le protocole HTTP: Ajax utilise le protocole HTTP, mais ajax n'est pas le protocole HTTP.
13/01/2009, 14h28
E.Bzz

Citation:

Envoyé par DoubleU

Pour revenir à la question de E.Bzz, la différence entre une closure et une fonction anonyme est la même que celle entre Ajax et le protocole HTTP: Ajax utilise le protocole HTTP, mais ajax n'est pas le protocole HTTP.

Ce n'était pas une question, plutôt une reformulation ;)

Mais on est d'accord : l'exemple d'Ajax est effectivement comparable : Ajax n'est pas HTTP (il n'en est pas non plus différent) : il n'en est qu'une des utilisations possible, comme la closure n'est qu'une des utilisations possible des fonctions anonymes :mrgreen:

A+
13/01/2009, 14h44
le_chomeur

ok ok on y arrive :)
merci pour ces éclaircissement :)

bonjour !

merci beaucoup DoubleU pour ta solution et ton explication sur les closures et aux autres pour leurs infos et commentaires
j'ai compris le principe mais je n'ai toujours pas réussi à le mettre en oeuvre avec succes sur mon exemple

je rappelle ou j'en suis dans l'écriture de mon code (j'ai mis en commentaires mes codes anciens)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function create_insert_img_book(section,set,div_insert_img,div_parent_insert_img,num,num_book)
 {
   var form_insert_img = document.createElement('form');
   var fieldset_insert_img = document.createElement('fieldset');
   var input_insert_img = document.createElement('input');
   var input_submit = document.createElement('input');
   var input_close = document.createElement('input');
   var div_insert_img = document.getElementById(div_insert_img);
   var div_parent_insert_img = document.getElementById(div_parent_insert_img);

   form_insert_img.setAttribute("enctype","multipart/form-data");
   form_insert_img.setAttribute("encoding","multipart/form-data");
   var params = "?go="+section+"&"+set+"&"+num+"="+num_book;
   form_insert_img.setAttribute("action",params);
   form_insert_img.setAttribute("method","post");

   input_insert_img.setAttribute("type","file");
   input_insert_img.setAttribute("name","userfile");
   input_insert_img.setAttribute("enctype","multipart/form-data");
   input_insert_img.setAttribute("encoding","multipart/form-data");
   input_submit.setAttribute("id","x");
   input_submit.setAttribute("type","submit");
   input_submit.setAttribute("value","Envoyer");

   input_close.setAttribute("id","x");
   input_close.setAttribute("type","button");
   input_close.setAttribute("value","Fermer");
   //input_close.setAttribute("onclick","close_insert_img_book(div_insert_img_b,div_parent_insert_img)");
   //input_close.onclick = close_insert_img_book(div_insert_img_b, div_parent_insert_img); // pour Internet Explorer
   //input_close.onclick = function(){close_insert_img_book(div_insert_img_b, div_parent_insert_img);}

   input_close.onclick = function(p1,p2)
                             {
                                return function()
                                {
                                  close_insert_img_book(p1,p2);
                                }
                             }(div_insert_img, div_parent_insert_img)

   fieldset_insert_img.appendChild(input_insert_img);
   fieldset_insert_img.appendChild(input_submit);
   fieldset_insert_img.appendChild(input_close);
   form_insert_img.appendChild(fieldset_insert_img);
   div_insert_img.appendChild(form_insert_img);
 }

Code:

1
2
3
4
5
6
7
function close_insert_img_book(div_insert_img,div_parent_insert_img)
{
   var enfant = document.getElementById(div_insert_img);
   var parent = document.getElementById(div_parent_insert_img);
   alert(enfant);   alert(parent);
  //enfant.parentNode.removeChild(enfant);
}

le pb c'est que dans je ne sais pas si je dois vraiment utiliser le getElementById pour obtenir dans la ma fonction close les éléments que je vais supprimer dynamiquement ensuite
j'obtiens toujours des valeurs Null pour les variables enfant et parent même si j'utilise getElementById("div_insert_img") et getElmentById("div_parent_insert_img")

je sens que je ne suis pas loin, mais j'ai encore besoin d'un petit coup de pouce !

ça y est j'ai trouvé

il suffisait de faire
Code:

1 2 3 4 function close_insert_img_book(div_insert_img,div_parent_insert_img) { div_insert_img.parentNode.removeChild(div_insert_img); }
mon problème est donc résolu, merci encore !