【问题标题】:Show form when item on selectOneMenu is selected选择 selectOneMenu 上的项目时显示表单
【发布时间】:2014-01-29 03:42:55
【问题描述】:

我正在开发 j2ee Web 应用程序(jsf2 和 primefaces),我想知道如何根据从选择一个菜单中选择的项目来显示表单。 我试过了,但是没有用。

<h:form id="global">
   <p:panel  header="Association">
         ...
     <p:outputLabel  value="Travel Class" />     
     <p:selectOneMenu id="associationType" style="width: 230px" value="#{associationMBean.travelClass}">
                                            <f:selectItem itemLabel="Select one" itemValue="" />  
                                            <f:selectItem itemLabel="Seminar" itemValue="Seminar" />   
                                            <f:selectItem itemLabel="Honeymoon" itemValue="Honeymoon" /> 
                                            <f:selectItem itemLabel="Organized Trip" itemValue="Organized Trip" />
                                            <p:ajax update=":hidePanel"/> 
                                        </p:selectOneMenu>     
   </p:panel>
</h:form>
<p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)"  rendered="#{associationMBean.travelClass eq Seminar}"> 
<h:form>            
<p:inputTextarea style="width: 100% ; height: 100px" value="#{associationMBean.description}" ></p:inputTextarea> 
</h:form>              
</p:panel>

更新

<html 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Visa Application-Thailand</title>

    </h:head>
    <h:body>
        <div align="center">
            <div>
                <img class="logo" src="images/banner.jpg"/>
            </div>
            <p:panel style="width: 61%;  border-color: indianred; border-width: 2px; margin-top: 10px"> 
                <h:form id="global">
                    <p:panel style="margin-top: 20px; font-size: 14px ; border: 0" header="Association">
                        <table border="0" >
                            <tbody > 
                                <tr>
                                    <td align="right">
                                        <p:outputLabel  value="Association Type" />
                                    </td >
                                    <td align="left">
                                        <p:selectOneMenu id="selectmenu" style="width: 230px" value="#{associationMBean.type}">
                                            <f:selectItem itemLabel="Select a Class" itemValue="" />  
                                            <f:selectItem itemLabel="Seminar" itemValue="Seminar" />
                                            <f:selectItem itemLabel="Organized Trip" itemValue="Organized Trip" />
                                            <f:selectItem itemLabel="Honeymoon" itemValue="Honeymoon" />
                                            <p:ajax update=":hidePanel"/>
                                        </p:selectOneMenu>   

                                    </td>
                                </tr>

                                <tr>
                                    <td align="right">
                                        <p:outputLabel value="Date of Departure" for="departure" />
                                    </td>
                                    <td align="left">
                                        <p:calendar  value="#{associationMBean.departure}" showOn="button" pattern="dd/MM/yy" style="width: 250px" id="departure"></p:calendar>
                                        <p:watermark value="01/01/2014" for="departure"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <p:outputLabel value="Date of Arrival" for="arrival" />
                                    </td>
                                    <td align="left">
                                        <p:calendar  value="#{associationMBean.arrival}" showOn="button" pattern="dd/MM/yy" style="width: 250px" id="arrival"></p:calendar>
                                        <p:watermark value="01/01/2014" for="arrival"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <p:outputLabel  value="Travel Agency " for="travelAgency"/>
                                    </td>
                                    <td align="left">
                                        <p:inputText id="travelAgency" value="#{associationMBean.travelAgency}" style="width: 220px"></p:inputText>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <p:outputLabel  value="Airline " for="airline"/>
                                    </td>
                                    <td align="left">
                                        <p:inputText id="airline" value="#{associationMBean.airline}" style="width: 220px"></p:inputText>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <p:outputLabel  value="Travel Class" />
                                    </td >
                                    <td align="left">        
                                        <p:selectOneMenu id="selectclass" style="width: 230px" value="#{associationMBean.travelClass}">
                                            <f:selectItem itemLabel="Select a Class" itemValue="" />  
                                            <f:selectItems value="#{associationMBean.allClasses}" />
                                            <!--  <p:ajax update=":hidePanel"/> !-->
                                        </p:selectOneMenu>                                   
                                    </td>
                                </tr> 

                                <tr >
                                    <td align="right">
                                        <p:outputLabel  value="Hotels " for="hotels" />
                                    </td>
                                    <td align="left">
                                        <p:inputTextarea id="hotels" value="#{associationMBean.hotels}" style="width: 220px"/>
                                    </td>
                                </tr>               
                            </tbody>
                        </table>
                    </p:panel>
                    <div align="right" style="margin-top: 20px ">
                        <p:commandButton type="reset" value="Reset" style="font-size: 14px;"/>
                        <p:commandButton value="Save"  ajax="false" styleClass="ui-priority-primary" style="font-size: 14px;" action="#{associationMBean.addAssociation()}" />
                    </div>
                </h:form>            
                <p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)" >
                    <h:form rendered="#{associationMBean.type == 'Seminar'}" >
                        <p:inputTextarea style="width: 100% ; height: 100px" value="#{visaMBean.description}" ></p:inputTextarea>
                    </h:form>
                </p:panel>         
            </p:panel>
        </div>
    </h:body>
</html>

上面的代码是添加一些更新后的整个html代码&lt;h:form rendered="#{associationMBean.type == 'Seminar'}" &gt;但是当我从selectOneMenu中选择Seminar时仍然无法显示hidePane。 你知道我错过了什么吗??

【问题讨论】:

  • 尝试用 outputPanel 包围 hidePanel 并更新此 outputPanel。
  • 同样的问题,当我选择研讨会时没有任何显示
  • Leo Zhao的建议是解决方案,原因是面板不存在html页面,因为rendered属性被评估为false,ajax请求只能更新html中存在的dom元素页面。

标签: jsf primefaces


【解决方案1】:

以下应该有效:

<p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)"> 
  <h:form rendered="#{associationMBean.travelClass eq 'Seminar'}">
    <p:inputTextarea style="width: 100% ; height: 100px" value="#{associationMBean.description}" ></p:inputTextarea> 
  </h:form>              
</p:panel>

你不能更新不在 DOM 中的组件,当一个组件没有被渲染时,它就不在那里了。所以你需要更新条件渲染组件的父级。 由于#{associationMBean.travelClass} 是一个字符串,您需要用单引号' 包裹'Seminar'

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-14
  • 2016-08-17
  • 2011-06-26
  • 1970-01-01
  • 2013-03-13
相关资源
最近更新 更多