Changer le contenu d'une div par des clics sur boutons

Salut tout le monde

je suis entrain de développer une application web et dont j'ai besoin à un certain stade de changer le contenu d'une div en cliquant sur des bouttons d'une menu bar, j'utilise jsf 2.0 et primefaces 3.3.1
comment je peux faire ça?

merci d'avance

Pour répondre correctement à ta question, il nous faut plus de précisions, comme ce que doit contenir ton DIV en question par exemple.

RE

Bonsoir

mon cas est le suivant

j'ai une page qui est divisée en deux parties: la première est la gauche(un menu a gauche) qui contient une menu bar (menubar primefaces )
la deuxième est celle qui constitue le reste de la page qui contient au début une liste de données(une table d'une base de donnée par exemple)

la question maintenant est la suivante: comment je peux changer le contenu de la partie droite : celle qui contient la liste de données par une autre liste
au début le contenu est :

Code:

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
86
87
88
89
90
91
92
93
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pou="http://primefaces.org/ui">


    <body>

        <ui:composition template="./welcomeTemplate.xhtml" rendered="#{userBean.isLoggedIn}" >

            <ui:define name="left">
                <h:link value="Déconnecter" onclick="#{userBean.logout()}" outcome="./index.xhtml"  />
                <h:form id="menubar" >
                    

                    <pou:menubar >
                        <pou:submenu label="Annuaire" >
                            <pou:menuitem value="Annuaire"  />

                        </pou:submenu>

                        <pou:submenu label="Formations" >
                            <pou:menuitem value="liste des formations"  />
                            <pou:menuitem value="s'inscrire à une formation"  url="./inscrire.xhtml" />
                            <pou:menuitem value="consulter les supports de cours" />
                        </pou:submenu>


                        <pou:submenu label="Entités" >
                            <pou:menuitem value="Services" />
                        </pou:submenu>


                        <pou:submenu label="Projets" >
                            <pou:menuitem value="Projets"  />
                        </pou:submenu>

                    </pou:menubar>

                </h:form>
            </ui:define>



            <ui:define name="content">
 
             <ui:include src="./personnelPage.xhtml" />               

            </ui:define>


        </ui:composition>

    </body>
</html>


 

l'expression en gras est celle que je veux qu'elle change chaque fois je click sur l'un des boutons une nouvelle liste se charge et remplace la précédente

comme première solution j'ai créer une classe java 


@ManagedBean
MenuPageCourante{
private String pageCourante;

public void setPageCourante(String page){
     this.page = page;
  
}



public String getPageCourante(){

  return this.page;

}

}





et la partie en gras est remplacée par 

<ui:include src = "./#{menuPageCourante}.xhtml"  />

et chaque boutton utilise la méthode setPageCourante et passe le nom de la liste qui doit charger(les liste sont déjà préparer dans des pages ie le bouton change le nom de lapage à chargée chaque qu'on click dessus )
mais le problème c'est que rien ne se passe

Merci pour votre aide

Si tu utilises Primefaces, voici un composant tout fait qui répondra à tes besoins il me semble : Le TabView

Regarde au milieu de la page, l'orientation gauche.