[POO] Problème de paramètre passé par référence

**dug** · 31/08/2005, 17h53

Bonjour,

j'ai un problème lorsque j'affecte une fonction avec paramètre à un évènement.
J'ai l'impression que les paramètres sont passés par référence, au lieu d'être passé par valeur. (Les paramètres sont tous des types simples).

Le code est assez long, mais fonctionne et le problème est sur n'importe qu'elle navigateur. De plus le code peut être une source d'aide pour certain....

Dans l'exemple, le clic sur les cellules du l'entête du tableau devrait afficher dans l'alert le numéro de la colonne, au lieu de 3...
Pour tester, suffit de copier le code dans un fichier .htm
Une piste, une solution ?
Merci d'avance...

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="HandheldFriendly" content="true">
 
<script language="JavaScript">
 
function getCleanObject( sElementId ) {
	var obj = document.getElementById(sElementId);
	while (obj.childNodes.length > 0) {
		obj.removeChild(obj.childNodes[0]);
	}
	return obj;
}
 
/*********************************************************************************
 * Nom:			dispArray
 * Description: affichage dans un tableau des donn?es charger
 * Param?tre:	sElementId, nom de la balise ou sera ins?r? le tableau
 * Utilise:		aLabel, tableau contenant le nom des champs ? charger
 * 				aData, un tableau ? 2 dimension, par ligne de donn?e, puis par champs
 *				bSortActive, activation des tries des colonnes (1 ou 0)
 *				iSort, 1 pour trie alphabétique, -1 pour l'inverse, ou 0 sans trie
 *				iColumn, numéro de la colonne triée
 *********************************************************************************/
function dispArray( sElementId, aLabel, aData, aIndex, sLinkPage, sUrlParam, bSortActive, iSort, iColumn ) {
	var i;
	var j;
	var parentObj;
	var objTABLE;
    var eleTR;
    var eleTD;
    var eleAnchor;
    var fChangeColor;
    var intTableCols;
    var iSortTmp;
    var eleImage;
 
	alert('_dispArray_ bSortActive:'+bSortActive+' iSort:'+iSort+' iColumn: '+iColumn);
 
	var parentObj = getCleanObject(sElementId);
 
	// ajout de la balise <TABLE>
	objTABLE = document.createElement("table");
	objTABLE.width = "100%";
	objTABLE.border = "1";
	objTABLE.cellpadding = "1";
	objTABLE.cellspacing = "1";
	parentObj.appendChild(objTABLE);
 
	// ajout de la balise <TR>, pour l'ent?te du tableau
	eleTR = objTABLE.insertRow(0);
	eleTR.style.color = "white";
	eleTR.align = "center";
	eleTR.valign = "top";
 
	// ajout des <TD>, pour l'ent?te du tableau
	intTableCols = aLabel.length;
 
	for (j = 0; j < intTableCols; j++) {
	    eleTD = eleTR.insertCell(j);
	    eleTD.border = 1;
	    eleTD.width = (1/intTableCols)*100 + "%";
 
		//	*** affichage avec la cellule cliquable ***
		eleTD.style.backgroundColor = "navy";
		if (bSortActive) {
			if (iColumn == j && iSort != 0) {
				iSortTmp = iSort * -1;
			} else {
				iSortTmp = 1;
			}
			alert('_onclick_ j(column):'+j+' iSortTmp:'+iSortTmp);
			eleTD.onclick = function(){ return dispArray( sElementId, aLabel, aData, aIndex, sLinkPage, sUrlParam, true, iSortTmp, j ) };
		}
	    eleTD.appendChild(document.createTextNode(aLabel[j]));
 
		if (bSortActive && iColumn == j) {
			if (iSort == 1) {
				eleImage = document.createElement("img");
				eleImage.src='./img/sort_down.gif';
				eleTD.appendChild(eleImage);
		    }
		    if (iSort == -1) {
				eleImage = document.createElement("img");
				eleImage.src='./img/sort_up.gif';
				eleTD.appendChild(eleImage);
		    }
		}
	}
 
	// chargement du contenu du tableau
	fChangeColor = 0;
    for (i = 0; i < aData.length; i++) 
    {
		// ajout de la balise <TR>
		eleTR = objTABLE.insertRow(i+1);
	    eleTR.style.color = "black";
 
		// parcours les champs ? afficher dans le tableau
		intTableCols = aData[i].length;
		for (j = 0; j < intTableCols; j++) {
			// ajout de la balise <TD>
		    eleTD = eleTR.insertCell(j);
		    eleTD.border = 1;
		    eleTD.style.backgroundColor = (fChangeColor == 1) ? "#E0E0F0" : "white";
		    eleTD.width= (1/intTableCols)*100 + "%";
		    eleAnchor = document.createElement("a");
		    if (sLinkPage!=null && sUrlParam!=null) {
		    	if (sLinkPage.indexOf('#')==-1) {
		    		eleAnchor.href=sLinkPage+"#"+sUrlParam+"="+aIndex[i];
		    	} else {
		    		eleAnchor.href=sLinkPage+"&"+sUrlParam+"="+aIndex[i];
		    	}
		    	eleAnchor.appendChild(document.createTextNode(aData[i][j]));
		    } else {
		    	eleTD.appendChild(document.createTextNode(aData[i][j]));
		    }
		    eleTD.appendChild(eleAnchor);
		}
		// changement de couleur une ligne sur deux
		if( fChangeColor == 1 )
			fChangeColor = 0;
		else
			fChangeColor = 1;
	}
 
	return;
}
 
function init() {
	var aDataLabel = new Array("Mission", "Priority", "State");
	var G_aResult = new Array();
	G_aResult[0] = new Array("Mission 1","high","ok");
	G_aResult[1] = new Array("Mission 2","low","ko");
	G_aResult[2] = new Array("Mission 3","high","ok");
	var G_aResultIndex = new Array();
	G_aResultIndex[0] = 4;
	G_aResultIndex[1] = 5;
	G_aResultIndex[2] = 6;
	dispArray( "id_missions", aDataLabel, G_aResult, G_aResultIndex, "missiondetail.jsp", "mId", true, 0, 0 );
}
 
</script>
</head>
 
<body style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px" onload="init()">
<h2>Liste des missions</h2>
<span id="id_missions"></span>
<br/><hr/>
</body></html>

**Celelibi** · 31/08/2005, 20h29

Bonjour,

Envoyé par dug

(Les paramètres sont tous des types simples).

Sauf G_aResult (qui est reçu comme aData), c'est un tableau de tableau : trop complexe -> référence. Mais je crois pas que ton problème vienne de là.
En fait il se produit quelque chose de "particulier" (qui est finalement tout à fait logique) quand tu crée une fonction dynamiquement.

Imaginons le bout de code suivant :

Code :

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

1
2
3
4
5
6
function foo(nodeAuHasard, bar) {
  var mySpan = document.createElement('span');
  mySpan.onclick = function () { alert(bar); };
  nodeAuHasard.appendChild(mySpan);
  bar++;
}

Et on l'appel avec foo(0).
Lorsque l'on va cliquer sur ce span, on va avoir un "1" et non un "0".
Première chose : pourquoi ne voit-on pas un "undefined" ? La variable bar est locale à ma fonction foo, or, lorsque va être appellé le onclick, on ne se trouve plus du tout dans cette fonction bar.
Ce qui se passe c'est que l'interpréteur crée une référence vers la variable bar pour que l'appel de cette variable dans la fonction associé au onclick pointe vers la "vrai" variable bar. Et comme dans mon exemple je modifie bar avant l'appel de ce onclick (on suppose que le visiteur n'est pas superman ^^), on va bien avoir la nouvelle valeur de bar qui va s'afficher.

Une solution que je trouve pas très propre, mais c'est première qui me vient, serait d'utiliser le constructeur Function pour créer des fonctions différentes avec la variable "qui bug" comme constante.
Dans mon exemple ça donnerait : mySpan.onclick = Function("alert("+bar+");");
Si pour certaines variables le passage de paramètre par référence ne te gène pas tu peux laisser ces variables à l'interieur de la chaine de caractère envoyé au constructeur.
exemple : Function("alert(bar + ':' + "+bar+"); "); -> ça affiche "1:0" car en fait la fonction créé contient le code alert(bar+':'+0);
Voilà, à toi d'implémenter cette solution à ta sauce.

J'aimerais quand même souligner que cette création de référence automatique est très utile quand il s'agit de travailler avec un this en poo.

Complètement à part : d'après ton code, tu crée un élément table à l'interieur d'un span. Je sais bien que les éléments table sont à mi-chemin entre les éléments de type bloc et les éléments de type inline, mais bon, je suis pas sûr qu'un span soit des plus adapté.

[POO] Problème de paramètre passé par référence

JavaScript

Discussions similaires

Partager

Partager