Discussion :

[aztec]

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 :

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

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 :

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

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

[Bovino]

Remplace :

Code :

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

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 :

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

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

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

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

<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">&nbsp;</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

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

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.

[aztec]

voici le code complet de mes deux fonctions

Code :

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

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

[DoubleU]

Essaie ca:

Code :

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

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)

[aztec]

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 :

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

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)

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

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

 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 :

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

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

Code :

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

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.

[le_chomeur]

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 :

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

 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 ) j'intervenais juste a titre informatif

[DoubleU]

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 :

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

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

Code :

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

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.

[le_chomeur]

alors que définirais tu par closure

pour moi ceci :

Code :

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

function(){return "bar";}

est une fonction anonyme

au même titre que :

Code :

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

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)

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

[E.Bzz]

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+

[le_chomeur]

+1 E.Bzz
Après je veux bien que tu nous explique la différence DoubleU

[Bovino]

http://fr.wikipedia.org/wiki/Fermeture_(informatique)

[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 ?

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

[E.Bzz]

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

A+

[le_chomeur]

ok ok on y arrive
merci pour ces éclaircissement

[aztec]

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 :

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

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 :

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

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 !