如何在 Richfaces 中使用 ajax 调用从 DropDown(<h:selectOneMenu>) 加载 a4j:outputPanel？答案

【问题标题】：How to load a4j:outputPanel from DropDown(<h:selectOneMenu>) using ajax call in Richfaces?如何在 Richfaces 中使用 ajax 调用从 DropDown(<h:selectOneMenu>) 加载 a4j:outputPanel？
【发布时间】：2013-03-22 06:14:47
【问题描述】：

这与richfaces 4.0有关

我的网页中有两个下拉菜单。在第一个 DropDown 上选择项目时，第二个 DropDown（以前不可见）很容易在网页上呈现。

在第二个下拉菜单中选择项目时，我想呈现一个单独的面板（无法做到这一点）。

问题是从第一个下拉菜单中选择项目后，我可以在网页上成功呈现第二个 DropDown ，但是当我选择第二个 dropDown 项目时没有呈现面板。

我的代码如下：

 <rich:panel header="Select Operation" style="margin-top: 20px;  height: 110px">
            <h:panelGrid columns="1">
                <h:form>
                    <h:panelGrid columns="4">
                        <h:outputLabel value="Operation: " style="font-size: small; font-weight: 900"/>
                        <h:selectOneMenu style="margin-left: 10px; width: 150px" value="#{adminBean.currentType}">                                
                            <f:selectItem itemValue="0" itemLabel="" />
                            <f:selectItem itemValue="1" itemLabel="Add New User" />
                            <f:selectItem itemValue="2" itemLabel="Manage Balance" />
                            <f:selectItem itemValue="3" itemLabel="Manage Account" />
                            <a4j:ajax event="valueChange" render="second" execute="@this" />                                
                        </h:selectOneMenu>

                        <h:form>
                            <a4j:outputPanel id="second" layout="block">
                                <h:outputLabel value="Type : " style="margin-left: 130px; font-size: small; font-weight: bold;" rendered="#{not empty adminBean.currentType}"/>
                                <h:selectOneMenu style="margin-left: 10px; width: 150px" value="#{adminBean.currentItem}" rendered="#{not empty adminBean.currentType}">
                                    <f:selectItem itemValue="0" itemLabel="" />
                                    <f:selectItem itemValue="1" itemLabel="Participant" />
                                    <f:selectItem itemValue="2" itemLabel="Administrator" />
                                    <a4j:ajax event="valueChange"  render="rep"  execute="@this" />   
                                </h:selectOneMenu>

                            </a4j:outputPanel>                            
                        </h:form>
                    </h:panelGrid>
                </h:form>

            </h:panelGrid>

        </rich:panel>                

        <rich:panel style="margin-top: 20px; min-height: 500px">

            <a4j:outputPanel id="rep">

                <rich:panel rendered="#{not empty adminBean.currentItem}" header="Add Customer">

                    <h:panelGrid columns="2">
                        <a4j:commandButton value="Add New" style="width: 70px"></a4j:commandButton>
                        <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
                    </h:panelGrid>

                    </rich:panel>
                   </a4j:outputPanel>
            </rich:panel>

如上所述，我希望在从 second 选择项目时呈现 id="rep" 。

【问题讨论】：

标签： jsf richfaces

【解决方案1】：

你有两个问题：

您的嵌套表单导致 HTML 无效。
您应该为您的组件提供 ID。

这应该是固定的代码（请注意，我删除了所有不必要的属性以使页面作为样式工作）：

<rich:panel id="pnlContainer">
    <h:panelGrid columns="1" id="grdSingleCol">
        <h:form id="frmData">
            <h:panelGrid columns="4" id="grdData">
                <h:selectOneMenu value="#{adminBean.currentType}">
                    <f:selectItem itemValue="0" itemLabel="" />
                    <f:selectItem itemValue="1" itemLabel="Add New User" />
                    <f:selectItem itemValue="2" itemLabel="Manage Balance" />
                    <f:selectItem itemValue="3" itemLabel="Manage Account" />
                    <a4j:ajax render="second" execute="@this" />
                </h:selectOneMenu>

                <a4j:outputPanel id="second" layout="block">
                    <h:selectOneMenu value="#{adminBean.currentItem}">
                        <f:selectItem itemValue="0" itemLabel="" />
                        <f:selectItem itemValue="1" itemLabel="Participant" />
                        <f:selectItem itemValue="2" itemLabel="Administrator" />
                        <!-- check how to render components outside the form -->
                        <a4j:ajax render=":pnlRepContainer:rep" execute="@this" />
                    </h:selectOneMenu>
                </a4j:outputPanel>
            </h:panelGrid>
        </h:form>
    </h:panelGrid>
</rich:panel>

<rich:panel id="pnlRepContainer">
    <a4j:outputPanel id="rep">
        <rich:panel rendered="#{not empty adminBean.currentItem}"
            header="Add Customer">
            <h:panelGrid columns="2">
                <a4j:commandButton value="Add New" />
                <a4j:commandButton value="Delete" />
            </h:panelGrid>
        </rich:panel>
    </a4j:outputPanel>
</rich:panel>

【讨论】：

我实现了您在上述答案中给出的更改。但它仍然无法正常工作。我发现，在第二个下拉列表中选择项目时不会调用 #{adminBean.currentItem} setter 方法。看起来 execute="@this" 不起作用。但是在#{adminBean.currentType}的第一个下拉setter方法被成功调用。
@KshitijJain 确保您的托管 bean 至少为 @ViewScoped 或更宽。在您的 getter/setter 方法中没有任何业务逻辑。如果您编辑您的问题并添加一些托管 bean 代码以获得更好的帮助，那会更好。
这是此页面的本地服务器链接：172.22.36.66:8080/Bank-war/faces/adminhome.xhtml 请查看它的外观。
@KshitijJain 看起来服务器已关闭。不过，最好根据问题信息提供帮助，而不是提供问题部分的外部链接。请记住，未来的读者会研究这个问题，并希望了解问题和解决方案。
你是对的。我通过将 BeanScope 更改为 ViewScoped 解决了这个问题。以前我使用的是 CDI bean 的 RequestScoped 。