Recalcul du DOM

Salut,

Je dispose de deux panelgroup cote à cote (dans un panelgrid avec 2 colonnes), j'ai besoin de cacher le premier panel group au cas ou l'utilisateur le demande.

J'ai donc un bouton qui contrôle le rendered du 1er panelgroup.

Le problème c'est que cette petite opération prend pas mal de temps (plus 4 secondes) pour faire disparaitre le panelgroup et élargir le panel group d'à côté.

Au fait, le deuxième panelgroup se compose d'une dataTable qui contient pas mal de champs, du coup le recalcule du DOM prend pas mal de temps.

Je voudrais savoir si c'est possible de dire au serveur de ne pas recalculer tout le DOM (surtout la datatable) et se contenter de mettre a jour le width du deuxième panelgroup et cacher le premier ! bien sur seulement au cas ou l'utilisateur clique sur le bouton dédié à cette opération.

J'espère que j'étais clair dans l'explication de mon problème !!!

Merci pour votre aide

non pas trop. Une chose est sure, le calcul de la largeur de ton deuxième panel group, à priori, c'est pas fait coté serveur mais coté client. Je serais toi je véfifierais si c'est bien le serveur qui est lent et pas plutot ton navigateur. Il ne faut pas perdre de vue que, quand tu clique sur le bouton

1) le client envoie tout le formulaire
2) jsf traite au moins sur la partie decode, tout le formulaire
3) jsf fait le nouveau rendu d'un truc peut etre très complexe
4) ton browser doit appliquer ses règles css sur tout ça


Pour voir si le serveur est vraiment lent, utilise des outils comme facestrace, qui permettent d'avoir des info sur ton cycle jsf (très utile pour debugger du jsf :D)

Si c'est le serveur, il va falloir envisager de regarder qu'est-ce qui est lent. As-tu des bean qui font beaucoup d'accès base de donnée lors du rendu? trop de composants? Une validation complexe?

Eventuellement, il est possible de faire tout ceci (simplement) en Javascript !

Code:

---

1 2	$("ID-panel-a-cacher").display = "none"; $("ID-panel-a-aggrandir").style.width = "200px";

---

($("xxx") est un raccourci, proposé par la librairie prototype de document.getElementById("xxx"))

Merci beaucoup pour vos réponses.

@tchize_
Au fait quand la datatable du deuxième panelgroup est vide, l'affichage est super rapide. Mais comme généralement cette datatable est assez conséquente, ce que je fais n'est pas trop pratique.

Concernant mes beans, c'est des bean request et il contiennent effectivement pas mal de données, qui servent essentiellement à la gestion de ma datatable.

Maintenant dans les deux cas, si ça vient du serveur ou bien du navigateur. Qu'est ce que je pourrais faire pour éviter cela ?

@romaintaz
Je vais essayer ta méthode. Je voudrais juste avoir une petite précision :
- Pour le width je le calcule depuis le bean car j'ai deux cas de figures.

Code:

---

1 2 3

width : expression(document.body.clientWidth > 950 ? document.body.clientWidth-350+'px' : '950px' ); et width : expression(document.body.clientWidth > 950 ? document.body.clientWidth-600+'px' : '950px' );

---

Comment pourrais je gérer cela ?

je suis trop nul en Javascript :oops:

EDIT :

Même avec la deuxième méthode il y aura un appelle au serveur normalement, donc je me dis qu'il y aura peut être le même problème !

Merci encore à vous