JSF - Créer un Menu Dynamique en utilisant AJAX & selectOneListbox
Ce que j'aime faire, c'est simple à expliquer :
bean
@ManagedBean
@ViewScoped
public class Articles {
private String selectedMenu;
@PostConstruct
public void init() {
if(selectedMenu==null || selectedMenu.trim().isEmpty()) {
this.selectedMenu="0";
}
}
public String getSelectedMenu() { return selectedMenu; }
public void setSelectedMenu(String selectedMenu) { this.selectedMenu = selectedMenu; }
}
page
<h:selectOneListbox onchange="..?? ajax call that render on loadMenu and pass the value of the focused listbox to Articles Bean" id="category" size="0" >
<f:selectItem itemLabel="first" itemValue="0" />
<f:selectItem itemLabel="second" itemValue="1" />
<f:selectItem itemLabel="third" itemValue="2" />
</h:selectOneListbox>
<h:panelGroup layout="block" id="loadMenu">
<h:panelGroup rendered="#{articles.selectedMenu=='0'}">
MENU 0
</h:panelGroup>
<h:panelGroup rendered="#{articles.selectedMenu=='1'}">
MENU 1
</h:panelGroup>
<h:panelGroup rendered="#{articles.selectedMenu=='2'}">
MENU 2
</h:panelGroup>
</h:panelGroup>
Lorsque je change la valeur de la zone de liste, le menu doit changer dinamically (en appelant une fonction sur le serveur). Je pense que le code ci-dessus exprime ce que je suis à la recherche d'.
Je dois savoir comment faire appel à l'aide de la onchange option. Est-il possible?
Acclamations
Mise à JOUR
<h:panelGroup layout="block">
<h:selectOneListbox styleClass="article_combo" size="0" id="selectedMenu" >
<f:selectItem itemLabel="first" itemValue="0" />
<f:selectItem itemLabel="second" itemValue="1" />
<f:selectItem itemLabel="third" itemValue="2" />
<f:ajax event="change" execute="@this" render="loadMenu" />
</h:selectOneListbox>
</h:panelGroup>
<h:panelGroup layout="block" id="loadMenu">
<h:panelGroup rendered="#{articles.selectedMenu=='0'}">
MENU 0
</h:panelGroup>
<h:panelGroup rendered="#{articles.selectedMenu=='1'}">
MENU 1
</h:panelGroup>
<h:panelGroup rendered="#{articles.selectedMenu=='2'}">
MENU 2
</h:panelGroup>
</h:panelGroup>
OriginalL'auteur markzzz | 2010-11-29
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser de l'ajax prise en charge intégrée de JSF 2 pour atteindre cet objectif. Pour ce faire, nid f:ajax balise dans votre h:selectOneListbox tag. Le f:ajax balise devrait ressembler à:
Ce doit traiter la variation de la valeur dans votre zone de liste, et re-rendre la panelGroup.
pour plus de détails, voir:
http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/
Ajouter
event="change"
. Cependant, est déjà la valeur par défaut de l'événement pourh:selectOneMenu
. Avez-vous essayer quand même? Juste exactement cette ligne comme suggéré par Brian doit être déjà assez.Comme BalusC souligné, vous pouvez spécifier l'attribut event sur lequel l'ajax événement se déclenche, où l'événement est le DOM de l'événement. L'événement par défaut d'un contrôle listbox est "changement". Voir la JSF2 API pour plus de détails:download.oracle.com/docs/cd/E17802_01/j2ee/javaee/...
Ok, changé la zone de liste (vous pouvez voir le code ci-dessus), mais rien ne se passe lorsque je modifier une valeur de la liste. Ouais, il ne l'appel ajax 🙂 Il ne marche pas trouver le rendu!
Vous avez oublié de lier la
value
deh:selectOneMenu
à#{articles.selectedMenu}
.OriginalL'auteur Brian Leathem