Discussion :

[libuma]

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 !

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

Code :

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

1
2
 
<input type="submit" name="validation" value="valider"/>

Pouvez-vous m'en dire plus ?

Merci.

[Matthieu2000]

la fonction boule de cristal est en panne. Veuillez laisser un peu plus de code après le beep sonore...

[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"

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 )

[libuma]

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 :

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

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

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 :

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
 
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

[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... ^^

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...

[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?

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...

Quelle prédiction impressionnante !!

Je n'ai pas de bol

Merci pour tes réponses.

[Matthieu2000]

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

Code :

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

var eltSource=document.getElementById('lstSource' )

[libuma]

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

Code :

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

var eltSource=document.getElementById('lstSource' )

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

Code :

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

1
2
 
  if (document.all('lstSource' ).options[(i-moved)].selected)  {

mais plutôt..

Code :

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

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

[libuma]

ohh et RomainVALERI :

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

Avoir par exemple à la place de

Code :

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

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

ce genre :

Code :

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

1
2
 
var elOptNew = document.createElement('option');

?

[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 ) autre(s) problème(s) "en dessous"...

En tout cas, oui, je te conseille de commencer par là pour voir ce que ça donne...

[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

[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 :

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

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 :

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

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

[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

[libuma]

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 :

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

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 :

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

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

[RomainVALERI]

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

[libuma]

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.

[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 :

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

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

ou :

Code :

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

1
2
3
 
toUpdateRightsElmt.options[nbAjout] = new Option(valDroit,valDroit);	
toUpdateRightsElmt.options[nbAjout].selected='selected';

[libuma]

ps: Le bouton submit ne répond pas, mais lorsque je mets

Code :

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

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:

[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

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