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 !

**emmanuel.remy** · 16/07/2009, 16h37

@_jey_: si tu as un peu de temps

regarde du c�t� du plus utilis�: JQuery. Tu comprendras vite l'int�r�t. Ceci �tant il en existe plein d'autres.

ERE

Ajouter un �v�nement onclick avec un argument au callback

JavaScript

Vue hybride

Discussions similaires

Partager

Partager