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>

ajax jsf jsf-2 facelets
person markzzz    schedule 29.11.2010    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Для этого можно использовать встроенную в JSF 2 поддержку ajax. Для этого вставьте тег 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
Да, это должно работать. Но мне нужно сделать это, когда я изменяю сфокусированный элемент. Как сделать это на onchange :) - person markzzz; 30.11.2010
comment
Добавьте event="change". Однако это уже событие по умолчанию для h:selectOneMenu. Вы хоть пробовали? Именно этой линии, предложенной Брайаном, должно быть уже достаточно. - person BalusC; 30.11.2010
comment
Как указал BalusC, вы можете указать атрибут события, при котором срабатывает событие ajax, где событие является событием DOM. Событием по умолчанию для списка является изменение. Дополнительные сведения см. в API JSF2: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