Discussion :

[arN34]

Hello !

J'aimerais faire ceci :

- un div "menu" qui s'affiche d'abord en minimisé en haut à gauche de ma web app.
- puis quand je clique sur une icône "triangle bas", le menu se déroule tout en restant au dessus des éléments de la page situés dessous
- et si je clique sur une icône "pin", le menu vient s'accrocher sur la page et pousse les éléments dessous lui pour qu'ils s'ajustent à sa droite

Je conçois très bien comment faire le tout avec 3 div d'id différentes et des règles css (z-indes et display notamment) pour gérer le tout avec rechargement de ma page pour afficher le bon div.

Cependant, je souhaiterais savoir si on peut directement changer l'id d'un div donné avec AJAX et ne réafficher que ce div. En effet, ma page contient de nombreuses données tirées d'une base de données distante sous-jacente et le rechargement à chaud d'une seule portion de la page (non liée à la partie base de données qui plus est) m'apparaît beaucoup plus efficace.

Merci pour vos conseils,

Arnaud

[FremyCompany]

Pas compris

[arN34]

Résolu (désolé pour l'entête [AJAX], ça avait en fait bien peu de rapport avec AJAX, mais comme je travaille sur ça en ce moment, je me suis un peu mélangé les pinceaux !).

En fait, ce que je voulais faire, c'est éviter d'écrire 3 fois le div "menu" en HTML dans ma page sous 3 id différents (chaque id ayant ses règles css pour avoir l'affichage voulu) et d'afficher ensuite le bon avec des effets type Effect.Appear("le bon div") de la bibliothèque script.aculo.us.

En faisant un lien :
<a href="#" onClick="this.parentNode.id='nouvel_id'; return false;" >pin</a>
par exemple, ça marche très bien et je n'ai besoin que d'écrire une seule fois le html du menu car je ne change que l'id du div qui prend alors les règles css définies pour cet id.

Désolé pour ce message pas très clair !

--
Arnaud

[arN34]

Juste une précision que j'aimerais savoir :

si je fais ce que j'ai dit (à savoir onClick="..."), est-ce TOUTE la page qui est rechargée ou simplement le div concerné par le javascript ?

--
Arnaud

[FremyCompany]

Le div n'est pas rechagé, tu change juste son ID... je pige pas trop

[arN34]

Je rappelle le but de la manoeuvre :

- un div "menu" qui s'affiche d'abord en minimisé en haut à gauche de ma web app.
- puis quand je clique sur une icône "triangle bas", le menu se déroule tout en restant au dessus des éléments de la page situés dessous
- et si je clique sur une icône "pin", le menu vient s'accrocher sur la page et pousse les éléments dessous lui pour qu'ils s'ajustent à sa droite

Donc j'écris mon menu en html :

Code :

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

1
2
3
4
 
<div id="menu_minimized">
...
</div>

Puis je définis trois règles css adéquates sous les 3 id suivantes :
#menu_minimized { ... } : ne montre qu'une barre d'icônes, chaque icône étant un item du menu
#menu_maximized { ... } : montre le menu complet en "survol" au dessus de la page
#menu_pinned { ... } : "fixe" le menu dans la page

Enfin, j'ai 3 liens en tête de mon menu pour passer d'un état à un autre :

Code :

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

1
2
3
4
 
<a href="#" onClick="this.parentNode.id='menu_minimized';return false;">Minimiser</a>
<a href="#" onClick="this.parentNode.id='menu_maximized';return false;">Maximiser</a>
<a href="#" onClick="this.parentNode.id='menu_pinned';return false;">Fixer</a>

En test simpliste, ça marche bien, mais avant de le passer en production dans ma web app, je me demandais si toute la page était rechargée quand on passe d'un état à l'autre ou seulement le div menu.

En effet, la page affichée est bourrée de contenu issu d'une base de données distantes et avec un petit nombre d'utilisateurs traffiquant en même temps le menu, je risque de surcharger un peu le serveur et le réseau à recharger à chaque fois toute la page (appel à la couche [service] et retour de toutes les données jusqu'au client).

--
Arnaud