[Performance] attacher un onchange sur un grand nombre de champs

**erox44** · 02/02/2012, 10h16

Hello,
voici le contexte:

Via xsl/xml je génère ma page html, celle-ci une fois générée contient:
- X blocs
- chaque bloc contient un tableau qui lui contient Y llignes ( 1 ligne contient 1 input (select/text/radio ...)).
- il y a environ 10 bloc pour un total de 300 inputs.

Entre certains input, il y a des lignes de separations (juste une ligne blanche en fait) .

Mon soucis à l'heure actuelle c'est que dynamiquement les input sont cachés sous certains conditions (tel champ vaut cette valeur etc..).

Le but est donc de cacher la ligne de separation s'il n'y a plus d'input apres celle-ci.

Pour le moment j'avais mis en place un setInterval toutes les 1000ms qui fait appel à ma fonction de vérification des separations, mais comme il y a pas mal de traitements dont ajax derriere, ca freeze la page toutes les 1s et pour 1/2s donc pas top

Pour contrer ça j'ai essayé d'attribuer à chaque input, sur l'évènement onclick ou keypress ma fonction de vérif des séparations; résultat, au chargement de ma page, j'ai un freeze de 5s environ, le temps qu'il attache mon event à chaque input on dirait.

Même chose si je tente de le faire directement dans le xsl.

Du coup là je bloque, je vois pas comment je peux optimiser ce truc :/

Ma fonction :

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
function visi_separations(id){
 
		var nb = 0;
		if(id != undefined ){
			$("#"+id).next().find(".separation").each( function(){
				nb = 0;
				nb = $(this).nextAll(":visible").not(".indication").length;
				if(nb == 0)
					$(this).hide();
				else
					$(this).show();
			});	
		}
		else{
			$("form > div table:visible").each( function(){
				if($(this).find(".separation").length > 1){
					nb = 0;
					nb = $(this).find(".separation:last").nextAll(":visible").not(".indication").length;
					if(nb == 0)
						$(this).find(".separation:last").hide();
					else
						$(this).find(".separation:last").show();
				}
				else if($(this).find(".separation").length == 1){
					nb = 0;
					nb = $(this).find(".separation").nextAll(":visible").not(".indication").length;
					if(nb == 0)
						$(this).find(".separation").hide();
					else
						$(this).find(".separation").show();
				}
			});
		}
}

**danielhagnoul** · 02/02/2012, 10h36

Bonjour

Il y a en effet des codes gourmand à l'oeuvre : des nextAll(":visible"), un sélecteur pas optimiser $("form > div table:visible"), des each(). Mais sans le reste de la page pour faire des tests réalistes... Il faudrait au minimum disposer de données vraies ou fausses, mais vraisemblables et du code HTML et CSS pour deux tables identiques à votre problème.

[Edit]

J'ai retrouvé la discussion précédente : http://www.developpez.net/forums/d11...ion-show-hide/

Avec un intervalle de 1s, si (vu le nombre de tables) le travail prend 500 millisecondes (0.5s), un délai de 1.5s est tout à fait normal.

**erox44** · 02/02/2012, 10h56

Un exemple d'html pour 1 bloc:

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
    <div class="bloc_mach">
      <div id="localisation_mach" class="titrebloc">
        <a name="localisation_mach" href="#" onClick="showHideBloc2('localisation_mach');">Machine : Localisation<img src="../images/down.gif" border="0"/></a>
      </div>
      <table style="display:'none'">
        <tr id="siteindication_TR" class="indication">
          <td class="indication" colspan="5"></td>
        </tr>
        <tr id="site_TR" style="display:block" onmouseover="inTR('site')" onmouseout="outTR('site')">
          <td class="libelle">Site</td>
          <td class="champ">
            <div id="site_div_text">
              <input name="site" type="text" value="PACY SUR EURE/PACY" readOnly="" id="site_text" class="text" onkeypress="return capture(this,event)"/>
              <img class="liste_deroul" src="../images/deroul2.gif" onclick="javascript:appel(this);"/>
            </div>
            <div id="site_div_select" style="display:none;">
              <select class="normal" name="site" id="site_select" onclick="javascript:appel(this);site_onchange(this);">
                <option class="normal" value="PACY SUR EURE/PACY" selected="">PACY SUR EURE/PACY</option>
              </select>
            </div>
            <input name="site_hidden" id="site_hidden" type="hidden" value="60"/>
          </td>
        </tr>
        <tr id="batiment_TR" style="display:block" onmouseover="inTR('batiment')" onmouseout="outTR('batiment')">
          <td class="libelle">B&#xE2;timent</td>
          <td class="champ">
            <div id="batiment_div_text">
              <input name="batiment" type="text" value="PACY" readOnly="" id="batiment_text" class="text" onkeypress="return capture(this,event)"/>
              <img class="liste_deroul" src="../images/deroul2.gif" onclick="javascript:appel(this);"/>
            </div>
            <div id="batiment_div_select" style="display:none;">
              <select class="normal" name="batiment" id="batiment_select" onclick="javascript:appel(this);batiment_onchange(this);">
                <option class="normal" value="PACY" selected="">PACY</option>
              </select>
            </div>
            <input name="batiment_hidden" id="batiment_hidden" type="hidden" value="130"/>
          </td>
        </tr>
        <tr class="separation">
        </tr>
        <tr id="salle_TR" style="display:block" onmouseover="inTR('salle')" onmouseout="outTR('salle')">
          <td class="libelle">Salle</td>
          <td class="champ">
            <div id="salle_div_text">
              <input name="salle" type="text" value="UC2 [protégée]" readOnly="" id="salle_text" class="text" onkeypress="return capture(this,event)"/>
              <img class="liste_deroul" src="../images/deroul2.gif" onclick="javascript:appel(this);"/>
            </div>
            <div id="salle_div_select" style="display:none;">
              <select class="normal" name="salle" id="salle_select" onchange="javascript:salle_onchange(this);">
                <option class="normal" value="UC2 [protégée]" selected="">UC2 [protégée]</option>
              </select>
            </div>
            <input name="salle_hidden" id="salle_hidden" type="hidden" value="714"/>
          </td>
        </tr>
        <tr id="complement_locindication_TR" class="indication">
          <td class="indication" colspan="5">
            <font size="1"></font>
          </td>
        </tr>
        <tr id="complement_loc_TR" style="display:block" onmouseover="inTR('complement_loc')" onmouseout="outTR('complement_loc')">
          <td class="libelle">Compl&#xE9;ments de localisation</td>
          <td class="champ">
            <input name="complement_loc" type="text" value="A1 Y6" class="text" />
            <input name="complement_loc_hidden" id="complement_loc_hidden" type="hidden" value="A1 Y6"/>
          </td>
        </tr>
		<tr class="separation"/>
        <tr id="rack_TR" style="display:block" onmouseover="inTR('rack')" onmouseout="outTR('rack')">
          <td class="libelle">Rack</td>
          <td class="champ">
            <input name="rack" type="text" value="" class="text" />
            <input name="rack_hidden" id="rack_hidden" type="hidden" value=""/>
          </td>
        </tr>
        <tr class="separation" />
        <tr id="autre_complement_loc_TR" style="display:block" onmouseover="inTR('autre_complement_loc')" onmouseout="outTR('autre_complement_loc')">
          <td class="libelle">Autres compl&#xE9;ments</td>
          <td class="champ">
            <input name="autre_complement_loc" type="text" value="" class="text" />
            <input name="autre_complement_loc_hidden" id="autre_complement_loc_hidden" type="hidden" value=""/>
          </td>
        </tr>
      </table>
    </div>

Là par exemple on voit qu'il y a une separation avant le dernier champ (autre complémente loc), sauf que si dynamiquement on cache cette ligne(autre_complement_loc_TR), la ligne va rester et ce sera pas super ergonomique quoi.

EDIT : bon du coup je vais essayer de creuser pour générer ça coté xsl quoi.

**danielhagnoul** · 02/02/2012, 11h25

J'ai l'impression que c'est aussi un problème de conception de la TABLE. Pourquoi une ligne de séparation par un TR inutile au lieu d'un espace d'une ligne intégrer aux TR de class "champ".

Par exemple : span.separation { height:1.5em; } et

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
<form id="formID">
	<div class='A'>
		<div>
			<a id="toto" href="#">TOTO</a>
		</div>
		<table class="dvjhTable">
			<tbody>
				<tr>
					<td class="champ">
						<input name="autre3_complement_loc" type="text" value="" class="text" />
						<input name="autre3_complement_loc_hidden" id="autre3_complement_loc_hidden" type="hidden" value=""/>
						<br/><span class="separation">&nbsp;</span>
					</td>
				</tr>
				<tr>
					<td class="champ">
						<input name="autre2_complement_loc" type="text" value="" class="text" />
						<input name="autre2_complement_loc_hidden" id="autre2_complement_loc_hidden" type="hidden" value=""/>
					</td>
				</tr>
			</tbody>
		</table>	
	</div>
	<div class='B'>
		<div>
			<a id="tata" href="#">TATA</a>
		</div>
		<table class="dvjhTable">
			<tbody>
				<tr>
					<td class="champ">
						<input name="autre4_complement_loc" type="text" value="" class="text" />
						<input name="autre4_complement_loc_hidden" id="autre4_complement_loc_hidden" type="hidden" value=""/>
						<br/><span class="separation">&nbsp;</span>
					</td>
				</tr>
				<tr>
					<td class="champ">
						<input name="autre1_complement_loc" type="text" value="" class="text" />
						<input name="autre1_complement_loc_hidden" id="autre1_complement_loc_hidden" type="hidden" value=""/>
					</td>
				</tr>
			</tbody>
		</table>	
	</div>
</form>

**erox44** · 02/02/2012, 13h58

En fait, si je fais avec un span comme tu dis, le problème c'est que ma ligne blanche ne prendra qu'1/3 de mon TR (1 td ) alors qu'il faut que ce soit une ligne continue qui prenne toute la largeur du tr.

Bref au final j'ai lancé le déclenchement de ma fonction separations sur le click de mes blocs, ca suffira :b

[Performance] attacher un onchange sur un grand nombre de champs

jQuery

Discussions similaires

Partager

Partager