JSF - 通过使用AJAX和selectOneListbox创建动态菜单

Question

What I'd like to do is simple to explain :

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

页面

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

- markzzz

Answer 1

您可以使用JSF 2内置的ajax支持来实现此功能。要做到这一点，请在您的h:selectOneListbox标记中嵌套一个f:ajax标记。f:ajax标记应该如下所示：

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

这应该处理您列表框中的更改值，并重新呈现面板组。

更多细节请参见： http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/

- Brian Leathem

---

是的，这应该可以工作。但我需要在更改焦点元素时执行此操作。就像“在onchange上执行它” :) - markzzz

添加 event="change"。然而，h:selectOneMenu 的默认事件已经是 change。你尝试过了吗？正如 Brian 建议的那样，这一行应该已经足够了。 - BalusC

正如BalusC所指出的那样，您可以指定触发ajax事件的事件属性，其中事件是DOM事件。列表框的默认事件为“change”。有关详细信息，请参见JSF2 API：http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/f/ajax.html - Brian Leathem

好的，我已经更改了列表框（您可以在上面看到代码），但是当我更改该列表中的值时，什么也没有发生。是的，它执行了Ajax调用 :) 它找不到渲染！ - markzzz

你忘记将 h:selectOneMenu 的 value 绑定到 #{articles.selectedMenu}。 - BalusC

没错，真是的 :) 实际上，我发现JSF逻辑比我尝试过的其他框架（例如GWT）更复杂。感谢你们两个!! - markzzz