[DOM] Récup. d'index dans document.form.elements

Version imprimable

29/09/2008, 09h57
Heretic

[DOM] Récup. d'index dans document.form.elements

Bonjour,
Après recherche infructueuse, je me demande s'il existe une fonction qui me permettrait de récupérer (directement sans balayer toute la table) l'index d'un control dans la table document.form.elements à partir de son id ou name !
Je suis en train d'essayer d'optimiser un javascript monstrueux qui balaye une JSP (non moins monstrueuse) contenant 660 controls 8O
Bon c'est une page extraite d'une appli pro, contenant une liste de 8 occurrences de 60 colonnes, ce qui explique en partie la taille de la page.
Merci de votre aide.
29/09/2008, 10h21
SpaceFrog

non.
Quel est le but de la recupération de l'index ?
ne peux tu pas t'en passer en passant this en paramètre ?
29/09/2008, 10h35
le_chomeur

document.getElementById("tonid") :)
29/09/2008, 10h35
Heretic

La récup d'index me permettrait de commençait le balayage des controls (ce balayage sert à locker ou non les champs du bas de la page en fonction d'un paramétrage) à partir de celui qui m'intéresse. C'est environ le 120ème de la page, mais susceptible d'évoluer dans le temps, je ne peux donc pas me contenter d'une valeur en dur... L'idée c'est qu'au lieu de lancer une boucle à partir de l'index 0, je la démarre à partir du champ qui m'intéresse, ce sera déjà ça de gagné en temps.
Je vois pas bien le coup du "this" ?!
a+
29/09/2008, 10h38
Heretic

Citation:

Envoyé par le_chomeur

document.getElementById("tonid") :)

Hum, désolé mais je ne pense pas pouvoir récupérer l'index dans document.form.elements avec cette fonction... Si c'est possible, merci de me dire comment:)
29/09/2008, 10h46
SpaceFrog

sous IE ce serait possible avec l'id porpre attribué par IE dans son DOM ...

sinon il faudrait un nommage ou une identification rationnels des elements ...

sinon si tes elements ont tous le même name c'est jouable

on peut voir un bout du html avec quelques éléments ?
29/09/2008, 10h47
le_chomeur

hups autant pour moi effectivement ... mal compris la question je pensais que tu souhaitais juste accéder a ton élément.

de plus pour locker 600 éléments , j'avais fait la démo d'un test avec boucle optimisé sur 10000 élements , j'arrivais a a peine 500ms ( donc 0,5 secondes ... )
je pense que le balayage est envisageable dans ton cas ...
29/09/2008, 11h28
Heretic

Citation:

Envoyé par SpaceFrog

sous IE ce serait possible avec l'id porpre attribué par IE dans son DOM ...

:king:ca m'intéresse car l'appli n'est prévue que pour IE (oui je sais...:oops:). tu peux détailler un peu la manip, je ne connais pas trop ce concept de DOM RE-:oops:

--> le_chomeur : chapeau parce que dans mon cas, pour 660 éléments le temps est d'environ 3.5 secondes (sur un P4 2Ghz avec 2Go de RAM) !!! Ceci dit, ce n'est pas une simple boucle, il y a pas mal de code dedans...
29/09/2008, 11h39
le_chomeur

montre nous ton code , on pourra surement l'améliorer :)
petit conseil => stock tes objets dans un array plutôt que de les parcourirs gain de temps => x10 :)
29/09/2008, 11h43
SpaceFrog

essaye avec sourceIndex

Code:

<input type='text' onclick="alert(this.sourceIndex)" />

à à l'air de donner un bon resultat sous IE
29/09/2008, 11h52
SpaceFrog

Code:

<input type='text' onclick="this.form.elements[this.sourceIndex-142].style.backgroundColor='red'" />

142 etant le sourceIndex du premier element du formulaire

et pour firefox on peut faire ceci :

Code:

1
2
3
4
5
6
window.onload=function() {
//récupération de tous les éléments de la pages
  var MesElements=document.getElementsByTagName('*');
  //Ajout de la propriété sourceIndex
  for (var i=0,l=MesElements.length;i<l;i++) e[i].sourceIndex=i;
}

29/09/2008, 12h01
SpaceFrog

lol fillot ...
mais inutile puisque c'est prévu uniquement pour IE ... ;)

Code:

1
2
3
4
5
6
7
8
9
function getIndex(nomchamp,formulaire){
index=0;
for(i=0;i<formulaire.elements.length;i++){
if(formulaire.elements[i].name==nomchamp)
{index=i;
}
}
return index;
}

un truc de ce genre?

29/09/2008, 12h20
Heretic

Merci à tous :D
SpaceFrog, j'essaie ton truc après le repas, ça m'a l'air pas mal du tout :mouarf:
Matthieu2000 et le_chomeur, merci mais l'idée est d'avoir un ordre propre qui ne nécessite pas de balayer la boucle, sinon l'opti sera minime :mrgreen:
29/09/2008, 13h31
le_chomeur

Citation:

Envoyé par SpaceFrog

lol fillot ...
mais inutile puisque c'est prévu uniquement pour IE ... ;)

oui mais quand même je suis pour la paix des navigateurs :yaisse2:
30/09/2008, 10h30
Heretic

Hello,
Me revoilou avec mon problème :aie:
sourceIndex est une bonne solution, sauf que visiblement il ne compte pas les éléments de la même manière que form.elements :cry:
Exemple :
Admettons que mon form débute au sourceIndex = 100.
En balayant document.form.elements je récupère pour le control qui m'intéresse l'"index" 137, mais sourceIndex de cet élément renvoie 447 (soit 210 de trop en absolu par rapport au début du form...)
Argh, ça me gave bien... :(
30/09/2008, 10h35
SpaceFrog

j'ai pourtant bien précisé en relatif par rapport au premier element du form, tu dois pouvoir l'automatiser

Code:

var firstElement=document.forms[0].elements[0].sourceIndex

Je vais essayer de donner le cas concret :D

J'exécute le code suivant :
Code:

1 2 3 4 5 iform = document.ps57Form.elements[0].sourceIndex; ilibref = document.getElementById("libRefPrestation").sourceIndex; ilf = document.getElementById("lastFocus").sourceIndex; ics = document.getElementById("codeSite").sourceIndex; iligne = document.getElementById("ligneActive[0]").sourceIndex;
Ca me restitue :
iform = 201
libRefPrestation = 207
lastFocus = 208
codeSite = 209
ligneActive[0] = 447

Si je fais un vidage de document.form.elements (tout bête en balayant de 1 en 1 puis en faisant un alert sur chaque occurrence), je récupère :
1 - libRefPrestation
2 - lastFocus
3 - codeSite
...
137 - ligneActive[0]

Si je compte avec le sourceIndex index de ligneActive[0] = 447 - 201 = 236, alors que la position dans doucment.form.elements = 137 !!!!!!

Donc je pense que sourceIndex compte des éléments qui n'apparaissent pas dans document.form.elements :?

30/09/2008, 10h55
le_chomeur

le but final de récupérer les index ???
30/09/2008, 10h55
SpaceFrog

Code:

document.forms[0].childNodes[0].sourceIndex
30/09/2008, 11h26
Heretic

Citation:

Envoyé par le_chomeur

le but final de récupérer les index ???

Optimiser une boucle qui part de 0 sur document.form.elements alors que partir du 137ème suffit.

--> Spacefrog, je comprends pas ton code:oops:
30/09/2008, 11h29
le_chomeur

... veux tu faire qqs test, tu verras comme je te l'ai dis même 600 ou 1000 élément la différence est plus qu'infime ...
après a voir les test que tu effectues dessus :)
si ça prend du temps => affiche une div pendant el traitement , et masque la après :)
je pense que tu te prends la tete pour pas grand chose sur le coup
30/09/2008, 11h32
SpaceFrog

a priori même le premier element au niveau sourceIndex est égal si je ne m'abuse à

Code:

var firstElement=document.forms[0].sourceIndex+1

c'est encore plus simple
30/09/2008, 11h41
Heretic

Citation:

Envoyé par le_chomeur

... veux tu faire qqs test, tu verras comme je te l'ai dis même 600 ou 1000 élément la différence est plus qu'infime ...
après a voir les test que tu effectues dessus :)
si ça prend du temps => affiche une div pendant el traitement , et masque la après :)
je pense que tu te prends la tete pour pas grand chose sur le coup

Désolé de me répéter mais c'est une appli pro de saisie en masse, donc les temps de réponse doivent être au poil... Même si je ne gagne que 2/10 de seconde, c'est toujours ça de pris !
Les utilisateurs sont mécontents auj'hui car le navigateur perd environ (sur un PIV à 2Ghz) 3.5s dans un javascript qui boucle sur les 660 éléments de la page (j'ai tracé les temps de réponse).
Je suis OK que 0.2s c'est peu au regard des 3.5s, mais c'est déjà ça de gagné si je peux le faire simplement en récupérant l'index de départ optimal plutôt que de partir de 0...
Pour le reste j'ai d'autres pistes d'opti, mais ça me gave de ne pas trouver de solution à ce petit problème :mouarf:

--> SpaceFrog, navré, mais peux-tu me donner un exemple concret avec le code que j'ai fourni plus haut ?

En tout cas merci de votre aide les gars :D
30/09/2008, 11h51
le_chomeur

Citation:

Envoyé par Heretic

Désolé de me répéter mais c'est une appli pro de saisie en masse, donc les temps de réponse doivent être au poil... Même si je ne gagne que 2/10 de seconde, c'est toujours ça de pris !
Les utilisateurs sont mécontents auj'hui car le navigateur perd environ (sur un PIV à 2Ghz) 3.5s dans un javascript qui boucle sur les 660 éléments de la page (j'ai tracé les temps de réponse).
Je suis OK que 0.2s c'est peu au regard des 3.5s, mais c'est déjà ça de gagné si je peux le faire simplement en récupérant l'index de départ optimal plutôt que de partir de 0...
Pour le reste j'ai d'autres pistes d'opti, mais ça me gave de ne pas trouver de solution à ce petit problème :mouarf:

--> SpaceFrog, navré, mais peux-tu me donner un exemple concret avec le code que j'ai fourni plus haut ?

En tout cas merci de votre aide les gars :D

tu me laisse essayer ?
envois ta page en pièce jointe avec ton code actuel ... :) on va relever le défit ^^

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
<script type='text/javascript'>
function foo(Obj){
var firstOfForm=document.forms[0].sourceIndex+1;
var FormCollection=document.forms[0].all
alert("sourceIndex direct : "+Obj.sourceIndex +"\nSourceIndex relatif :" +FormCollection[Obj.sourceIndex-firstOfForm].sourceIndex);
}
</script>
</head>
 
<body>
<form>
<fieldset>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
</fieldset>
<fieldset>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
<input type='text' onclick="foo(this)"/>
</fieldset>
</form>
 
 
 
</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var tabIndex=new Array();
formulaire=document.forms[0]; //le premier?
 
for(i=0;i<formulaire.elements.length;i++){
tabIndex[formulaire.elements[i].name]=i;
}
 
function getIndex(nomchamp){
 
return tabIndex[nomchamp];
}

...

30/09/2008, 13h12
Heretic

Citation:

Envoyé par le_chomeur

tu me laisse essayer ?
envois ta page en pièce jointe avec ton code actuel ... :) on va relever le défit ^^

Je veux pas te faire pleurer, le code est une vrai cata :
3 JSP imbriquées (expression language + java + HTML + javascript inside :aie:), avec un javascript externalisé de 5000 lignes, très honnêtement j'aurais honte de te filer un tel code :oops:
Puis tout ça hors contexte (MVC struts) ça te causera pas trop.
30/09/2008, 13h20
SpaceFrog

et mon usine à gaz elle ne te plait pas ... ???

pourtant je recupère bine le sourceIndex par rapport au form
30/09/2008, 13h28
Heretic

Citation:

Envoyé par SpaceFrog

et mon usine à gaz elle ne te plait pas ... ???

pourtant je recupère bine le sourceIndex par rapport au form

J'ai pas encore essayé... :oops:
Par contre j'ai transformé la table des objets control (document.form.elements) en table de string (juste le nom du control), ça booste bien et je récup l'index facilement du coup (indexOf()).
Du coup, je me demande si ça va pas suffire à mon bonheur :mrgreen:

Merci à tous ;)
30/09/2008, 15h51
Heretic

:oops:
Décidément quand ça veut pas : indexOf() opérationnel sur données Array seulement en Jscript >= 1.6... Et devinez quoi ?
Bien vu on tourne en 1.5 :yaisse2:

Bon c'est pas grave, je me démerde autrement !

a+
30/09/2008, 16h04
SpaceFrog

ma solution fonctionne ... :roll:

et moi je maintiens que tu t'embètes pour pas grand chose exemple ==>

http://www.developpez.net/forums/d61...mance-sous-ie/

puis test simple =>

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
73
74
75
76
77
78
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	var rdv = new Array()
	var Debut =null;
	var Fin = null;
	var test = 999999;
	function initTableau(){
		for(var i = 0; i < 1000000 ; i++){
			rdv[i] = i;
		}
	}
	function testTableau(){
		Debut = new Date();
		var len = rdv.length;
		var i = 0;
 
		while (i < len && rdv[i] != test)
		{
			++i;
		} 
		Fin = new Date();
		alert(Fin-Debut+ "et i : " + i);
	}
 
	function testTableau2(){
		Debut = new Date();
		var len = rdv.length;
		for(var i = 0 ; i < len;i++)
		{
			if(rdv[i] == test){
				break;
			}
		} 
		Fin = new Date();
		alert(Fin-Debut+ "et i : " + i);
	}
 
	function testTableau3(){
		Debut = new Date();
		var len = rdv.length;
		var i = 0;
		while (i < len && rdv[i] != 500000)
		{
			++i;
		} 
		Fin = new Date();
		alert(Fin-Debut+ "et i : " + i);
	}
 
	function testTableau4(){
		Debut = new Date();
		var len = rdv.length;
		while (len)
		{
			len--
		} 
		Fin = new Date();
		alert(Fin-Debut+ "et i : " + len);
	}
</script>
</head>
 
<body>
<script type="text/javascript">
	initTableau();
	testTableau();
	testTableau2();
	testTableau3();
	testTableau4();
 
</script>
</body>
</html>

regarde le nombre d'occurrence ;) donc avec 600 ... même avec des traitements dessus tu serais gagnant , enfin moi j'dis ça je n'ai rien dit hein

30/09/2008, 16h56
Heretic

Citation:

Envoyé par SpaceFrog

ma solution fonctionne ... :roll:

J'avoue honteusement que je ne l'ai pas encore essayée...:oops:
Faut pas m'en vouloir hein, juste que comme c'est pour le taf, j'ai pas trop le temps de tout expérimenter, et j'ai trouvé une solution satisfaisante (balayage de la table juste pour récup des index, mais comme ça boucle à vide quasiment sans trt, ça booste !) pas trop coûteuse et qui me permet finalement de gagner 45/100s., ce qui peut paraître ridicule à l'échelle humaine, mais diablement important pour les utilisateurs finaux :lol:

Mille merci pour votre aide ;)