Ajouter un évènement onclick avec un argument au callback

**_jey_** · 10/07/2009, 11h17

Bonjour,

J'ai créé une fonction qui génère des éléments input HTML sur ma page, ainsi qu'un span qui, au clic, devrait permettre de les supprimer.
Je dis "devrait" car pour le moment, je n'ai pas trouvé le moyen de m'en sortir sur IE...
Avec FF, setAttribute marche du tonnerre :

Code :

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

1
2
bouton_suppr=document.createElement('span');
bouton_suppr.setAttribute("onclick","suppEntree(this)");

Mais avec IE, après moultes essais, rien n'y fait :

Code :

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

1
2
3
4
5
bouton_suppr.onclick="suppEntree(this)";
bouton_suppr.onclick="suppEntree('"this"')";
bouton_suppr.onclick=function(){ alert(this.id) };
bouton_suppr.attachEvent=("onclick","suppEntree()");
bouton_suppr.attachEvent=("onclick","suppEntree");

Entre autres, le tout avant ou après le appendChild.

Merci d'avance pour votre aide salutaire !

**franculo_caoulene** · 10/07/2009, 11h40

Salut,

Il y a cette façon de faire.

Sinon tu peux regarder du coté de onclick ou addEventListener qui récupèrent l'évènement exécuté depuis lequel tu peux trouver l'élément source de cet évènement. Ceci ne se passe pas de la même façon sous IE pour lequel il faut utiliser attachEvent plutôt qu'addEventListener. On peut utiliser onclick dans tous les navigateurs. IE ne récupère pas l'objet évènement. Pour trouver la source de l'évènement, il faut explicitement faire appel à l'objet event.

**_jey_** · 10/07/2009, 12h00

Y'a-t-il un équivalent à la console d'erreur de FF sur IE ? Parce là, je ne sais pas si l'erreur vient de la déclaration de l'évènement onclick, ou du callback (ou des deux)...

Sinon merci Franculo pour ta réponse, mais j'avoue que je n'ai pas compris grand chose à la fonction que tu donnes en lien, et ne sachant pas où est l'erreur, je ne sais pas si window.event.scrElement résout mon problème...

Pour le moment, mon callback se résume à un "alert(this.id)" ou "alert(window.event.srcElement.id)", et ni l'un ni l'autre n'affiche quoi que ce soit.

**_jey_** · 10/07/2009, 12h17

Voici mon code, il y a peut-être une erreur énorme qui m'aurait échappé :

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
49
50
51
52
53
54
55
56
57
58
59
60
function ajoutEntree(entree, partie, destination)
// entree désigne la valeur prise par le "input"
// partie désigne une partie de l'id du input
// destination vaut soit "window.opener", soit "window" car l'ajout se fait soit via un popup, soit via la page mère
{
	var destination= destination || "window";
	var i=1;
	var unique=true;
	while(window.opener.document.getElementById(partie+'_entree_'+i)!=null)
	{
		if((window.opener.document.getElementById(partie+'_entree_'+i).value==entree)||(window.opener.document.getElementById(partie+'_entree_'+i).value.toLowerCase()==entree.toLowerCase()))
		{
			alert("Vous avez d"+String.fromCharCode(233)+"j"+String.fromCharCode(224)+" entr"+String.fromCharCode(233)+" un champs ayant cette valeur : "+entree);
			unique=false;
		}
		i++;
	}
 
	if(unique)
	{
		var conteneur;
		if(destination=="window")
		{
			conteneur=document.getElementById('ouverturePop_'+partie).parentNode;
//conteneur designe la case td dans laquelle va se trouver le input ajouté
			var choix_enr=document.createElement('input');
			var bouton_suppr=document.createElement('span');
		}
		else
		{
			conteneur=window.opener.document.getElementById('ouverturePop_'+partie).parentNode;
			var choix_enr=window.opener.document.createElement('input');
			var bouton_suppr=window.opener.document.createElement('span');
		}
 
		choix_enr.id=partie+'_entree_'+i;
		choix_enr.className='entree_liste';
		choix_enr.style.width="75%";
		choix_enr.readOnly=true;
		choix_enr.value=entree;
 
		bouton_suppr.innerHTML="supprimer";
		bouton_suppr.id='suppr_'+choix_enr.id;
		bouton_suppr.className='bouton petit';
	//	bouton_suppr.setAttribute("onclick","suppEntree(this)");
 
		conteneur.appendChild(choix_enr);
		conteneur.appendChild(bouton_suppr);
		bouton_suppr.attachEvent("onclick",suppEntree);
 
	}
}
 
// pour le moment, j'ai limité au maximum le callback...
function suppEntree()
{
	alert("test");
	//var src=window.event.srcElement.id;
	//alert("source "+src);
}

**emmanuel.remy** · 10/07/2009, 12h39

Salut,

Attention je n'ai testé qu'avec IE, mais de toute façon étant donné que tu utilises dans ce test attachEvent il ne peut en être autrement

.

A mon avis ce qui te pose problème c'est cette ligne de code:

Code :

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

1
2
 
while(window.opener.document.getElementById(partie+'_entree_'+i)!=null)

qui impose au code de fonctionner à partir d'une fenêtre fille, ce qui n'est pas exactement prévu car ton paramètre destination peut valoir window...

De mon côté ce code fonctionne:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
function ajoutEntree(entree, partie, destination)
// entree désigne la valeur prise par le "input"
// partie désigne une partie de l'id du input
// destination vaut soit "window.opener", soit "window" car l'ajout se fait soit via un popup, soit via la page mère
{
	var destination= destination || "window";
	var i=1;
	var unique=true;
/*	while(window.opener.document.getElementById(partie+'_entree_'+i)!=null)
	{
		if((window.opener.document.getElementById(partie+'_entree_'+i).value==entree)||(window.opener.document.getElementById(partie+'_entree_'+i).value.toLowerCase()==entree.toLowerCase()))
		{
			alert("Vous avez d"+String.fromCharCode(233)+"j"+String.fromCharCode(224)+" entr"+String.fromCharCode(233)+" un champs ayant cette valeur : "+entree);
			unique=false;
		}
		i++;
	}
*/	
	if(unique)
	{
		var conteneur;
		if(destination=="window")
		{
			conteneur=document.getElementById('ouverturePop_'+partie).parentNode;
//conteneur designe la case td dans laquelle va se trouver le input ajouté
			var choix_enr=document.createElement('input');
			var bouton_suppr=document.createElement('span');
		}
		else
		{
			conteneur=window.opener.document.getElementById('ouverturePop_'+partie).parentNode;
			var choix_enr=window.opener.document.createElement('input');
			var bouton_suppr=window.opener.document.createElement('span');
		}
 
		choix_enr.id=partie+'_entree_'+i;
		choix_enr.className='entree_liste';
		choix_enr.style.width="75%";
		choix_enr.readOnly=true;
		choix_enr.value=entree;
 
		bouton_suppr.innerHTML="supprimer";
		bouton_suppr.id='suppr_'+choix_enr.id;
		bouton_suppr.className='bouton petit';
	//	bouton_suppr.setAttribute("onclick","suppEntree(this)");
 
		conteneur.appendChild(choix_enr);
		conteneur.appendChild(bouton_suppr);
		bouton_suppr.attachEvent("onclick",suppEntree);
 
	}
}
 
// pour le moment, j'ai limité au maximum le callback...
function suppEntree()
{
	alert("test");
	//var src=window.event.srcElement.id;
	//alert("source "+src);
}
    </script>
  </head>
  <body>
 
    <div id="ouverturePop_partie1">Hello !</div>
    <button onclick="ajoutEntree('entree', 'partie1');">Go</button>
  </body>
</html>

Bon dev,

ERE

**emmanuel.remy** · 10/07/2009, 12h50

Re,

Après avoir repris le code de mon post précédent, je te propose de simplifier ainsi en créant une variable theDoc qui correspond selon le contexte à document ou window.opener.document:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
function ajoutEntree(entree, partie, destination)
// entree désigne la valeur prise par le "input"
// partie désigne une partie de l'id du input
// destination vaut soit "window.opener", soit "window" car l'ajout se fait soit via un popup, soit via la page mère
{
	var destination= destination || "window";
	var i=1;
	var theDoc = (destination=="window" ? document : window.opener.document);
 
	var unique=true;
	while(theDoc.getElementById(partie+'_entree_'+i)!=null)
	{
		if((theDoc.getElementById(partie+'_entree_'+i).value==entree)||(theDoc.getElementById(partie+'_entree_'+i).value.toLowerCase()==entree.toLowerCase()))
		{
			alert("Vous avez d"+String.fromCharCode(233)+"j"+String.fromCharCode(224)+" entr"+String.fromCharCode(233)+" un champs ayant cette valeur : "+entree);
			unique=false;
			break;
		}
		i++;
	}
 
	if(unique)
	{
		var choix_enr=theDoc.createElement('input');
		var bouton_suppr=theDoc.createElement('span');
 
		choix_enr.id=partie+'_entree_'+i;
		choix_enr.className='entree_liste';
		choix_enr.style.width="75%";
		choix_enr.readOnly=true;
		choix_enr.value=entree;
 
		bouton_suppr.innerHTML="supprimer";
		bouton_suppr.id='suppr_'+choix_enr.id;
		bouton_suppr.className='bouton petit';
	//	bouton_suppr.setAttribute("onclick","suppEntree(this)");
 
		theDoc.getElementById('ouverturePop_'+partie).parentNode.appendChild(choix_enr);
		theDoc.getElementById('ouverturePop_'+partie).parentNode.appendChild(bouton_suppr);
		bouton_suppr.attachEvent("onclick",suppEntree);
 
	}
}
 
// pour le moment, j'ai limité au maximum le callback...
function suppEntree()
{
	alert("test");
	//var src=window.event.srcElement.id;
	//alert("source "+src);
}
    </script>
  </head>
  <body>
 
    <div id="ouverturePop_partie1">Hello !</div>
    <button onclick="ajoutEntree('entree', 'partie1');">Go</button>
  </body>
</html>

Du coup tu peux garder ta boucle while qui posait souci et simplifier le reste de l'écriture. Certainement à adapter

selon tes règles "métiers".

ERE

**_jey_** · 10/07/2009, 13h49

Merci Emmanuel pour tes réponses.
Pour la boucle while, j'avais oublié de prendre en compte l'autre possibilité, mais en l'occurence je testais le cas de l'ajout via popup.

J'ai copié/collé ton code, et le document.srcElement marche nickel ! Je vais intégrer ça au reste de ma page, et je crois les doigts

**_jey_** · 10/07/2009, 13h56

J'ai bêtement copié/collé ta fonction js dans mon script, et ça ne donne rien... Pourtant ça marchait quand il n'y avait rien autour... Là le attachEvent ne semble pas fonctionner car rien ne se passe au clic.

**emmanuel.remy** · 10/07/2009, 14h17

Envoyé par _jey_

J'ai bêtement copié/collé ta fonction js dans mon script, et ça ne donne rien... Pourtant ça marchait quand il n'y avait rien autour... Là le attachEvent ne semble pas fonctionner car rien ne se passe au clic.

Passe ta page ou un zip de tes pages, on regardera ce qui peut ne pas fonctionner.

ERE

**_jey_** · 10/07/2009, 14h41

Voici ci-joint une version simplifiée de mes pages concernées.
J'ai fait des coupes dans le code, donc il y a un petit bug (on ne peut pas choisir plus d'un thème), mais ça n'est pas l'important.

Sur FF, il y a bien un message qui apparaît, et qui précise l'id de sa source.
Mais pas moyen d'avoir le même résultat sur IE.

Je te remercie d'avance !

**emmanuel.remy** · 10/07/2009, 16h59

Re,

Dans essaipopup.html:

Code :

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

1
2
3
4
5
6
 
if (window.event)
   bouton_suppr.attachEvent("onclick",window['suppEntreeIE'] || 
             window.opener['suppEntreeIE'] );
else
   bouton_suppr.setAttribute("onclick","suppEntreeFF(this)");

car selon le type d'appel (window ou popup) la fonction suppEntreeIE existe ou pas dans le document actif.

ERE

**_jey_** · 10/07/2009, 17h18

Merci Emmanuel de passer du temps sur mon problème.

Sur mon code simplifié, effectivement, ça règle le problème, mais sur mon vrai code, ça ne va toujours pas... Mais ça m'avance tout de même !
Ce satané IE n'ayant pas de débuggueur Javascript, je vais m'enfuir en courant profiter d'un week-end de 4 jours sans attachEvent, getElementById, et autres appendChild...

Je posterais jeudi pour vous dire si je m'en sors ou pas !

Bon week end aux éventuels lecteurs de ce post !

**emmanuel.remy** · 10/07/2009, 19h13

Ce satané IE n'ayant pas de débuggueur Javascript, je vais m'enfuir en courant profiter d'un week-end de 4 jours sans attachEvent, getElementById, et autres appendChild...

Firebug existe aussi pour IE http://getfirebug.com/lite.html

ERE

**_jey_** · 16/07/2009, 09h43

Merci du tuyau !

Mais Firebug ne me sort qu'une erreur sous IE, et elle est très étrange :
"Argument non valide" pour une ligne de texte dans le code de ma popup... peut-être que la balise a (sans attribut href) qui l'englobe ne plait pas à IE... mais vu que ça n'empèche pas l'envoi des choix, je ne pense pas que ça soit important (me trompe-je ?).
Sinon, pas d'erreur au clic sur "supprimer", mais pas de suppression non plus !

Je continue à me prendre la tête là dessus...

**_jey_** · 16/07/2009, 10h00

Bon en fait l'erreur vient de Firebug, qui n'apprécie pas quand je redimensionne l'encart...

**_jey_** · 16/07/2009, 10h35

(Désolé pour le triple post)
Je commence à m'impatienter sur ce problème, donc je vais mettre un bête bouton pour tout supprimer d'un coup, ça au moins ça marchera ! Merci Emmanuel pour ton aide, j'aurais bien aimé régler ça juste pour que tu n'aies pas perdu ton temps... mais là c'est moi qui en perd trop !

**_jey_** · 16/07/2009, 14h28

Je viens de calculer un truc :

Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't create by itself.

Firebug (sous IE) plante les objets HTML créés ou modifiés dynamiquement... donc ça ne va pas du tout pour débugger mon code qui en est truffé.

Je hais IE !

**ANoki** · 16/07/2009, 14h37

Bonjour,
pourquoi ne pas rajouter un niveau d'abstraction, grâçe a ...(roulement de tambour)
Un framework comme Yahoo UI!
qui te fait ca simplement sans te prendre la tete

**_jey_** · 16/07/2009, 15h21

(pour les multiples posts je ne suis plus à ça près maintenant)
Je m'en suis sorti finalement !
J'ai séparé l'ajout via la popup et l'ajout depuis la fenêtre mère dans le javascript (ce qui répond mieux à ma problèmatique qui vient d'être un peu modifiée), et IE réagit enfin au clic sur "supprimer"... la suite ne devrait pas être un problème !

Merci à vous, et désolé pour le monologue

Envoyé par ANoki

Bonjour,
pourquoi ne pas rajouter un niveau d'abstraction, grâçe a ...(roulement de tambour)
Un framework comme Yahoo UI!
qui te fait ca simplement sans te prendre la tete

Que veux-tu dire par "niveau d'abstraction" ?
Et j'aime autant me passer de framework tant que je réussis à me débrouiller (c'était pas gagné sur ce coup mais bon !) et tant que je ne suis pas pris par le temps.

**ANoki** · 16/07/2009, 15h36

Salut,
je vais essayer de te réconcillier avec ie (je sais c'est pas gagné

)
En utilisant un framework JS tu utilises une nouvelle syntaxe, qui elle marche
pour le méchant IE, FF et compagnie. Tu ne te souci plus du navigateur.
Le seul inconvénient est le temps de prendre en main cette nouvelle syntaxe,
qui est tt de meme proche du JS classic.

Ajouter un évènement onclick avec un argument au callback

JavaScript

Discussions similaires

Partager

Partager