Bug si trop de javascript ?

Version imprimable

27/10/2009, 10h51
libuma

Bug si trop de javascript ?
Bonjour à tous,

La question peut semblée étrange mais je vous explique :

J'ai deux listes (select multiple) contenant +- 150 lignes.
Je permets de passer les éléments d'une liste à une autre.
Lorsqu'un élément passe d'une liste à une autre, certaines choses sont générées encore en background.

Tout fonctionne à merveille, seulement, si je déplace les 150 par exemple, ils sont bels et biens déplacés mais le bouton submit de mon formulaire ne fonctionne alors plus ! 8O

C'est un simple bouton qui appelle une servlet java (<form action=".." ..)
Code:

1 2 <input type="submit" name="validation" value="valider"/>
Pouvez-vous m'en dire plus ?

Merci.
27/10/2009, 11h22
Matthieu2000

la fonction boule de cristal est en panne. Veuillez laisser un peu plus de code après le beep sonore...
27/10/2009, 13h28
RomainVALERI

Comme dit Mathieu, il nous manque des éléments* pour en juger...

Par contre, pour répondre à ton titre... dans le cas que tu décris, ne t'inquiete pas, aucune chance que 150 lignes dans un select soit considéré comme "trop de javascript" :aie:

Montre-nous plus de code pour un meilleur diagnostic, ou bien un lien si c'est en ligne... :)

* tiens ça me rappelle un vieux jeu cette phrase... (megalomania pour les connaisseurs ;))

Voici ce qu'il se passe lorsque j'ajoute déplace des lignes :

Appel de la fonction ajout qui détermine entre autre quelles sont les lignes consernées et les déplacent, ensuite appel de addOption qui est en fait, une liste multiple cachée.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function Ajouter(){ 	
 var NbEle = -1;  var moved = 0;	var TxtEle = ''; var valueEle='';
 var longu = document.all('lstSource').length;
        for(i = 0; i < longu; i++){
 	  if (document.all('lstSource' ).options[(i-moved)].selected)  {
                    NbEle = (i - moved); TxtEle = document.all('lstSource' ).options[(i - moved)].text; valueEle = document.all('lstSource' ).options[(i - moved)].value;
	if (NbSource != 0 && NbEle != -1){     
                    addOption(document.all('lstSource' ).options[NbEle].value);   	       document.all('lstSource' ).options[NbEle] = null; 	                document.all('lstCible' ).options[NbCible] = new Option(TxtEle,valueEle);  
 if(document.all('userType').selectedIndex==0){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#f4f6e3';} 
 if(document.all('userType').selectedIndex==1){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#75c1d1';} 
 if(document.all('userType').selectedIndex==2){ 
 document.all('lstCible' ).options[NbCible].style.backgroundColor='#89d8b5';} 
 if(document.all('userType').selectedIndex==3){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#33869c';}	  NbCible = NbCible + 1; 	  NbSource = NbSource - 1;     moved = moved +1;	} 	  } 	} 	 }

Ensuite donc, appel de addZones

Code:

1
2
3
4
 
function addOption(valeur){ 
 document.myForm.toUpdate.options[nbAjout]= new Option(valeur,valeur);document.myForm.toUpdate.options[nbAjout].selected='selected';addZones(valeur);nbAjout=nbAjout+1;
}

addZones:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function addZones(valeur){
  var elmt = document.myForm.zones; var myZones = '';
for(var i=0; i< elmt.options.length; i++)	
{ 		
 if(elmt.options[i].selected == true)     	
 {			
     myZones += elmt.options[i].value; myZones += ':';	
 }
}	
document.myForm.toUpdateZones.options[nbAjout] 
      = new Option(myZones,myZones);
document.myForm.toUpdateZones.options[nbAjout].selected='selected';var valDroit=document.all('userType').options[document.all('userType').selectedIndex].value;
document.myForm.toUpdateRights.options[nbAjout] = new Option(valDroit,valDroit);	
document.myForm.toUpdateRights.options[nbAjout].selected='selected';
}

Voilà le processus, avec ça, même sans sa boule de cristal madame irma pourrait s'en sortir ;)

27/10/2009, 14h58
RomainVALERI

Il y a déjà eu dans ce forum de très nombreux thread à propos de form qui ne fonctionnent plus après ajout "dynamique" d'inputs sans passer par le DOM.

Ici, même pas la peine de parler de DOM, c'est vraisemblablement du code écrit pour IE uniquement, et qui date beaucoup...

Le code javascript du site est-il trop volumineux dans ton projet pour envisager une réécriture complète sur des bases saines ? Si oui, je te conseille une recherche dans ce forum à partir des termes clefs, tu devrais faire une grosse récolte... ^^

Citation:

Envoyé par libuma

avec ça, même sans sa boule de cristal madame irma pourrait s'en sortir

je ne connais pas cette développeuse appelée "irma", mais je connais un/une "libuma" qui va faire beaucoup de javascript dans les prochains jours/semaines... :roll: ;)
27/10/2009, 15h07
libuma

Effectivement, ça doit tourner sur IE et qui plus est, sur une vieille version d'IE !

Sinon, base saine, un exemple concret de changement sain envisageable?

Citation:

Envoyé par RomainVALERI

je ne connais pas cette développeuse appelée "irma", mais je connais un/une "libuma" qui va faire beaucoup de javascript dans les prochains jours/semaines... :roll: ;)

Quelle prédiction impressionnante !! :D

Je n'ai pas de bol :cry:

Merci pour tes réponses.
27/10/2009, 15h11
Matthieu2000

Evite de lancer la même fontion 150 fois exemple :

Code:

var eltSource=document.getElementById('lstSource' )
27/10/2009, 15h33
libuma
Citation:

Envoyé par Matthieu2000

Evite de lancer la même fontion 150 fois exemple :

Code:

var eltSource=document.getElementById('lstSource' )

tu veux dire afin d'éviter d'avoir un peu partout dans la fonction
Code:

1 2 if (document.all('lstSource' ).options[(i-moved)].selected) {
mais plutôt..
Code:

1 2 if(eltSource.options[(i-moved)].selected) {
Si oui, je ne savais pas que ça prenait beaucoup moins de ressources de cette façon
27/10/2009, 16h02
libuma
ohh et RomainVALERI :

Tu penses qu'utiliser le DOM résoudrait mon problème ?

Avoir par exemple à la place de
Code:

1 2 monElement.options[lastIndex] = new Option(val,val);
ce genre :
Code:

1 2 var elOptNew = document.createElement('option');
?
27/10/2009, 16h36
RomainVALERI

Oui, c'est susceptible de résoudre ton problème. ^^

Je veux dire que ça me semble être une des voies d'investigation les plus crédibles. En revanche, une fois que cette piste sera assainie, difficile de savoir s'il n'y a pas un (ou plusieurs :aie:) autre(s) problème(s) "en dessous"... :aie:

En tout cas, oui, je te conseille de commencer par là pour voir ce que ça donne... :)
28/10/2009, 13h29
libuma

J'ai modifié un peu tout ça, sauf pour l'ajout d'options dans un select "caché" (hidden) car apparemment ça ne fonctionne pas pour ceux-ci !!

Mais ça ne résous pas mon problème :(

Je vais me rabattre sur les problèmes déjà parus si je les trouve, car google ne m'a pas été d'une grande aide à ce niveau ^^
Un mot clé qui pourrait m'aider à trouver ces threads?

Merci

Jsute pour rajouter qu'en JS on a les tableaux comme dans tout autre langage, et il est plus simple de transformer ce paté :

Code:

1
2
3
4
5
6
7
8
 if(document.all('userType').selectedIndex==0){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#f4f6e3';} 
 if(document.all('userType').selectedIndex==1){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#75c1d1';} 
 if(document.all('userType').selectedIndex==2){ 
 document.all('lstCible' ).options[NbCible].style.backgroundColor='#89d8b5';} 
 if(document.all('userType').selectedIndex==3){  
document.all('lstCible' ).options[NbCible].style.backgroundColor='#33869c';}

en :

Code:

1
2
var colors = ['#f4f6e3','#75c1d1','#89d8b5','#33869c'];
document.getElementById('lstCible').options[NbCible].style.backgroundColor = colors[document.getElementById('userType').selectedIndex];

Tu nous montrerais ton HTML ET JS complets et je suis sur qu'il y a mega moyen d'optimiser ton code de tous les cotés

28/10/2009, 13h52
SpaceFrog

de même faire des boucles for ayant pour limite un length l'element est gourmande et périlleux
mieux vaut recupérer le length avant ou faire une boucle while

Citation:
Envoyé par Gatsu35
Jsute pour rajouter qu'en JS on a les tableaux comme dans tout autre langage, et il est plus simple de transformer ce paté :
Code:

1 2 3 4 5 6 7 8 if(document.all('userType').selectedIndex==0){ document.all('lstCible' ).options[NbCible].style.backgroundColor='#f4f6e3';} if(document.all('userType').selectedIndex==1){ document.all('lstCible' ).options[NbCible].style.backgroundColor='#75c1d1';} if(document.all('userType').selectedIndex==2){ document.all('lstCible' ).options[NbCible].style.backgroundColor='#89d8b5';} if(document.all('userType').selectedIndex==3){ document.all('lstCible' ).options[NbCible].style.backgroundColor='#33869c';}
en :
Code:

1 2 var colors = ['#f4f6e3','#75c1d1','#89d8b5','#33869c']; document.getElementById('lstCible').options[NbCible].style.backgroundColor = colors[document.getElementById('userType').selectedIndex];
Tu nous montrerais ton HTML ET JS complets et je suis sur qu'il y a mega moyen d'optimiser ton code de tous les cotés
Ces informations ne resteront pas en claire dans le code, d'où le travail assez laborieux.
Ceci dit, je suis sûr qu'effectivement il y aurait moyen que j'en apprenne pas mal oui, je ne suis pas balèse en js.
Je ne sais pas si je peux poster mon fichier js ici

28/10/2009, 15h24
RomainVALERI

Citation:

Envoyé par libuma

Je ne sais pas si je peux poster mon fichier js ici

S'il est en ligne, ne t'embete pas avec des pieces jointes, donne nous un lien ;)
28/10/2009, 15h35
libuma

1 pièce(s) jointe(s)

Non, il n'est pas en ligne, je l'attache ci-joint : scriptt.js

Tout fonctionne sauf le problème que je vous ai evoqué..

Si j'ajoute trop de champs, le bouton submit de mon form ne répond plus.

Le principe est donc, j'ajoute dans des listes cachées les infos qui ont été déplacées d'une liste à l'autre pour pouvoir enregistrer les modifs par la suite.
29/10/2009, 12h19
libuma
Pour ceux à qui ça dit quelque chose..
J'ai localisé plus précisémment le problème...

Il survient lorsque j'ajoute donc massivement des données de la liste gauche vers la droite (pas nouveau) mais le problème survient plus particulièrement, quand j'ajoute les données dans une des deux autres listes invisibles..(sachant que j'en remplis une première auparavant)

Donc dès que je fais :
Code:

1 2 3 4 toUpdateZonesElmt.options[nbAjout] = new Option(myZones,myZones); toUpdateZonesElmt.options[nbAjout].selected='selected';
ou :
Code:

1 2 3 toUpdateRightsElmt.options[nbAjout] = new Option(valDroit,valDroit); toUpdateRightsElmt.options[nbAjout].selected='selected';
29/10/2009, 14h51
libuma
ps: Le bouton submit ne répond pas, mais lorsque je mets
Code:

1 2 <form ... onSubmit='alert(123);'..>
l'alerte se produit bien !
Par contre si j'essaye même de faire un "document.myForm.submit()" ça ne fonctinne pas non plus :s

aie:
30/10/2009, 12h39
libuma

Ok c'est résolu...

L'astuce en fait, est tout le monde le sait(ou presque) mais il faut y penser !
C'est que.. je passe mes valeurs à l'aide d'un formulaire methode GET.
Hors, get, possède une limite quant à la taille des paramètres passés !

C'est donc ça le problème et rien à voir avec le javascript !

Merci quand même à ceux qui ont essayé.

Bonne journée :ccool:

ps: je suis toujours partant pour l'optimisation si quelqu'un a regardé :mrgreen: