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

Version imprimable

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.
16/07/2009, 16h37
emmanuel.remy

@_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
16/07/2009, 16h39
_jey_

Citation:

Envoyé par ANoki

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.

J'ai déjà jeté un œil sur jQuery, donc je vois ce que c'est...
Pour le projet sur lequel je bosse, je pense que je n'aurais pas besoin de framework. Mais quand je ferais un truc perso, j'étudierais tout ça, surtout pour la présentation (genre super menus coulissants !).

Et pour me réconcilier avec IE, il ne faut pas grand chose finalement... juste qu'ils sortent une nouvelle version façon copié/collé de FF, avec juste le logo IE de si de là... ça au moins ça marchera !
17/07/2009, 15h24
_jey_

Mes deux façons de faire marchent à présent !
Merci encore, et désolé pour le "résolu" qui aura tardé, j'étais sur autre chose...