加载PrimeFaces通过ajax将JSF页面安排到另一个JSF页面

时间:2015-02-19 08:13:41

标签: javascript ajax jsf jsf-2 primefaces

当我运行主要面孔"计划程序"组件作为正常" xhtml"页面,一切都很顺利,但当我尝试加载" schedule.xhtml"通过AJAX进入另一个" xhtml"页面,然后我得到意想不到的行为,如:

  1. " schedule.xhtml"页面未加载与其Java类附加的默认事件(这些事件是样本事件)。
  2. 没有像(" addEvent"," onEventSelect"," onDateSelect"," onEventMove"," onEventResize& #34)
  3. 我正在运行JSF 2.2 Mojarra 2.2.0 Prime Faces 5.0

    以下是我的主要xhtml页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui"> 
    
    <h:head>
    <h:outputStylesheet library="css" name="default.css"  />
    </h:head> 
        <body> 
    
    <p:layout fullPage="true" >
        <p:layoutUnit position="north" size="185"  resizable="false" closable="false" collapsible="false" >     
            <div align="center" id="header">
             <h:graphicImage url="images/layout/banner.png" ></h:graphicImage>
            </div>
        </p:layoutUnit>
    
        <p:layoutUnit position="west" size="210" header="Booking System" resizable="true" closable="false" collapsible="true" >
            <h:form>                
                <p:growl autoUpdate="false"/>
                <p:growl id="growl" life="2000" />
    
                <p:panelMenu  style="width:200px" >
                    <p:separator />
                    <p:submenu label="Navigations" ajax="false" >
    
                         <p:menuitem ajax="false" value="Book Meeting"  action="#{menuView.setMyPage}"  icon="ui-icon-calendar"  update=":formCenter:content">
                            <f:param name="page" value="scheduler" />
                         </p:menuitem>                                      
                     </p:submenu>
                </p:panelMenu>                                  
            </h:form>       
        </p:layoutUnit>
    
        <p:layoutUnit position="center" >   
            <h:form id="formCenter"  >
    
            <p:outputPanel autoUpdate="false">
                <h:panelGroup id="content" layout="block"  > 
                     <ui:include  src="#{menuView.page}.xhtml" />
                </h:panelGroup>
            </p:outputPanel>                   
             </h:form> 
        </p:layoutUnit>  
    </p:layout>
    
    </body> 
    </html>
    

    调度程序xhtml页面如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui"> 
    
    <h:head>
    
    <style type="text/css">
        .value {
            width: 1000px;
        }
    </style>
    
    </h:head> 
    <body> 
    
    <h:form>
        <p:growl id="messages" showDetail="true" />
    
        <h:panelGrid columnClasses="value">
            <h3 style="margin-top: 0">Editable Schedule</h3>
            <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2">
    
                <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
                <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />
    
            </p:schedule>
    
            <h3>Locale Support ( Example: Turkish )</h3>
            <p:schedule id="scheduleLocale" value="#{scheduleView.eventModel}" locale="tr" />
    
            <h3>Lazy Schedule</h3>
            <p:schedule value="#{scheduleView.lazyEventModel}" />
        </h:panelGrid>
    
        <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
            <h:panelGrid id="eventDetails" columns="2">
                <h:outputLabel for="title" value="Title:" />
                <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />
    
                <h:outputLabel for="from" value="From:" />
                <p:inputMask id="from" value="#{scheduleView.event.startDate}" mask="99/99/9999">
                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                </p:inputMask>
    
                <h:outputLabel for="to" value="To:" />
                <p:inputMask id="to" value="#{scheduleView.event.endDate}" mask="99/99/9999">
                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                </p:inputMask>
    
                <h:outputLabel for="allDay" value="All Day:" />
                <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />
    
                <p:commandButton type="reset" value="Reset" />
                <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
            </h:panelGrid>
        </p:dialog>    
    </h:form>
    
    <script type="text/javascript">
        PrimeFaces.locales['tr'] = {
            closeText: 'kapat',
            prevText: 'geri',
            nextText: 'ileri',
            currentText: 'bugün',
            monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran',
                'Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
            monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz',
                'Tem','Ağu','Eyl','Eki','Kas','Ara'],
            dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
            dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            weekHeader: 'Hf',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: '',
            month: 'Ay',
            week: 'Hafta',
            day: 'Gün',
            allDayText : 'Tüm Gün'
        };
    </script>
    
    
    </body> 
    </html>
    

    有什么建议吗? 谢谢。

1 个答案:

答案 0 :(得分:0)

问题解决了。

在“schedule.xhtml”中,我已将h:headbody替换为"<ui:composition>"标记,如下所示:

         <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                        xmlns:h="http://java.sun.com/jsf/html"
                        xmlns:f="http://java.sun.com/jsf/core"
                        xmlns:p="http://primefaces.org/ui"
                        xmlns:ui="http://java.sun.com/jsf/facelets">

   <h:form>
    <p:growl id="messages" showDetail="true" />

    <h:panelGrid columnClasses="value">
        <h3 style="margin-top: 0">Editable Schedule</h3>
        <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2">

            <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
            <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
            <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
            <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />

        </p:schedule>

        <h3>Locale Support ( Example: Turkish )</h3>
        <p:schedule id="scheduleLocale" value="#{scheduleView.eventModel}" locale="tr" />

        <h3>Lazy Schedule</h3>
        <p:schedule value="#{scheduleView.lazyEventModel}" />
    </h:panelGrid>

    <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
        <h:panelGrid id="eventDetails" columns="2">
            <h:outputLabel for="title" value="Title:" />
            <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />

            <h:outputLabel for="from" value="From:" />
            <p:inputMask id="from" value="#{scheduleView.event.startDate}" mask="99/99/9999">
                <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
            </p:inputMask>

            <h:outputLabel for="to" value="To:" />
            <p:inputMask id="to" value="#{scheduleView.event.endDate}" mask="99/99/9999">
                <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
            </p:inputMask>

            <h:outputLabel for="allDay" value="All Day:" />
            <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />

            <p:commandButton type="reset" value="Reset" />
            <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
        </h:panelGrid>
    </p:dialog>    
</h:form>


    </ui:composition>

这解决了我的问题,它按预期加载,所有事件都被解雇。