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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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 !

10/07/2009, 11h40
franculo_caoulene

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.
10/07/2009, 12h00
_jey_

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.

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

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
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);
}

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:

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:

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

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:

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 :roll: selon tes r�gles "m�tiers".

ERE

10/07/2009, 13h49
_jey_

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 :D
10/07/2009, 13h56
_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.
10/07/2009, 14h17
emmanuel.remy

Citation:

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
10/07/2009, 14h41
_jey_

2 pi�ce(s) jointe(s)

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 !

Re,

Dans essaipopup.html:
Code:

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

10/07/2009, 17h18
_jey_

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 !
10/07/2009, 19h13
emmanuel.remy

Citation:

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
16/07/2009, 09h43
_jey_

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...
16/07/2009, 10h00
_jey_

Bon en fait l'erreur vient de Firebug, qui n'appr�cie pas quand je redimensionne l'encart...
16/07/2009, 10h35
_jey_

(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 !
16/07/2009, 14h28
_jey_

Je viens de calculer un truc :

Citation:

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 !
16/07/2009, 14h37
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 :)
16/07/2009, 15h21
_jey_

(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 :D

Citation:

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.
16/07/2009, 15h36
ANoki

Salut,
je vais essayer de te r�concillier avec ie (je sais c'est pas gagn� :D )
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.

Voir 40 message(s) de cette discussion en une page