0

ウェブページを作成しています。コンテンツは、ユーザーの選択に応じて変更する必要があります。

1 日を選択したページに日付を選択するための 1 つのカレンダーを表示する必要がある場合は、1 日と複数の日 (開始日と終了日) を選択するオプションを提供する 2 つのラジオ ボタンが必要です。 ajax を使用することはできますが、カレンダーを表示できません。

私のxhtml

<h:form id="f1">
                    <p:growl id="createmsg"/>  
                    <h:panelGrid columns="2" cellpadding="10">
                        <p:panel id="add_visitor_details_pnl" style="width:100%"> 
                            <h:panelGrid id="grid" columns="2" cellpadding="10">
                                <h:outputText value="Organization :" />
                                <p:selectOneMenu  editable="true" value="#{visitorBean.organization}"  style="width:160px"  filter="true" filterMatchMode="startsWith">
                                    <f:selectItems value="#{visitorBean.organizations}" />
                                </p:selectOneMenu>
                                <h:outputText value="Visitor Name :" />
                                <p:selectOneMenu value="#{visitorBean.name}"  style="width:160px"  filter="true" filterMatchMode="startsWith">
                                    <f:selectItems value="#{visitorBean.names}" />
                                </p:selectOneMenu>
                                <h:outputText value="Visitor ID :" />
                                <p:selectOneMenu value="#{visitorBean.id}"  style="width:160px"  filter="true" filterMatchMode="startsWith">
                                    <f:selectItems value="#{visitorBean.ids}" />
                                </p:selectOneMenu>                                                         
                                <h:outputText value="Purpose :" />
                                <p:inputTextarea id="purpose_it" value="#{visitorBean.purpose}" required="true" autoResize="false"
                                             requiredMessage="Enter Purpose" rows="10" cols="50"/>
                            </h:panelGrid>
                            <h:panelGrid columns="1" cellpadding="10">
                                <p:selectOneRadio id="customRadio" value="#{visitorBean.option}" >  
                                    <f:selectItem itemLabel="Create a one day appointment" itemValue="1" />  
                                    <f:selectItem itemLabel="create a day period appointment" itemValue="2" />
                                    <p:ajax event="change" listener="#{visitorBean.selectDayType()}" 
                                            update=":f1:add_visitor_details_pnl"     />
                                </p:selectOneRadio>
                            </h:panelGrid>
                            <h:panelGrid id="date" columns="3" cellpadding="10">
                                <h:outputText id="date1" value="Date" rendered="#{visitorBean.cal1}"/> 
                                <p:calendar id="calender_Cal1" value="#{visitorBean.date_time}" 
                                            pattern="yyyy-MM-dd"  rendered="#{visitorBean.cal1}" 
                                            required="true" requiredMessage="Enter Date Time"/>
                                <p:calendar id="calender_Cal2" value="#{visitorBean.date_time}" 
                                            pattern="yyyy-MM-dd"  rendered="#{visitorBean.cal2}" 
                                            required="true" requiredMessage="Enter Date Time"/>
                            </h:panelGrid>
                            <h:panelGrid columns="2" cellpadding="10">
                                <p:commandButton id="submit_visitor_Btn" value="Create"                                                         
                                                 action="#{visitorBean.submitVisitorData()}"
                                                 update=":f1:visitor_dataTable,:f1:grid,:f1:createmsg"/>



                            </h:panelGrid> 

私のajaxメソッド

public void selectDayType(){
    if(option =="1")
        cal1 = "true";
    else if(option =="2"){
        cal1="true";
        cal2="true";            
    }
4

1 に答える 1

0

カレンダーを次のように囲んでみてください。

<p:outputPanel  id="someId" >
...
</p:outputPanel>

Primefaces - 出力パネル

于 2013-07-02T07:39:06.610 に答える