JSF - Създаване на динамично меню с помощта на AJAX & selectOneListbox

Това, което бих искал да направя, е просто за обяснение:

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>

Когато променя стойността на списъка, менюто трябва да се промени динамично (чрез извикване на някаква функция на сървъра). Мисля, че кодът по-горе изразява това, което търся.

Трябва да знам как да го извикам с помощта на опцията onchange. Възможно ли е?

наздраве

АКТУАЛИЗАЦИЯ

<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>     

person markzzz    schedule 29.11.2010    source източник


Отговори (1)


Можете да използвате поддръжката на ajax, вградена в JSF 2, за да постигнете това. За да направите това, вмъкнете таг f:ajax във вашия таг h:selectOneListbox. Тагът f:ajax трябва да изглежда така:

<f:ajax render="loadMenu" execute="@this" />

Това трябва да обработи променената стойност във вашето списъчно поле и да изобрази отново panelGroup.

за повече подробности вижте: http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/

person Brian Leathem    schedule 29.11.2010
comment
Да, това трябва да работи. Но трябва да направя това, когато променям фокусирания елемент. Харесайте го направете при промяна :) - person markzzz; 30.11.2010
comment
Добавете event="change". Въпреки това вече е събитието по подразбиране за h:selectOneMenu. Все пак пробва ли го? Точно този ред, както е предложен от Brian, вече трябва да е достатъчен. - person BalusC; 30.11.2010
comment
Както посочи BalusC, можете да посочите атрибута на събитието, на който се задейства ajax събитието, където събитието е DOM събитието. Събитието по подразбиране за списъчно поле е промяна. Вижте JSF2 API за повече подробности:download.oracle.com/docs/cd/E17802_01/j2ee/javaee/ - person Brian Leathem; 30.11.2010
comment
Добре, промених списъка (можете да видите кода по-горе), но нищо не се случва, когато променя стойност от този списък. Да, прави извикването на ajax :) Не намира рендера! - person markzzz; 30.11.2010
comment
Забравихте да свържете value от h:selectOneMenu към #{articles.selectedMenu}. - person BalusC; 30.11.2010
comment
О, да, правилно, по дяволите :) Всъщност намирам JSF логиката за по-сложна от другите рамки, които опитах (GWT например). Благодаря и на двамата!! - person markzzz; 30.11.2010