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

Question

When I run the prime faces "Scheduler" component as a normal "xhtml" page, everything is going fine, but when I try to load the "schedule.xhtml" page through AJAX into another "xhtml" page, then I am getting unexpected behavior like : 当我将普通面孔“ Scheduler”组件作为普通的“ xhtml”页面运行时，一切都很好，但是当我尝试通过AJAX将“ schedule.xhtml”页面加载到另一个“ xhtml”页面中时，却变得出乎意料行为类似：

The "schedule.xhtml" page is not loading the default events attached with its Java class (those events are sample ones). “ schedule.xhtml”页面未加载其Java类附带的默认事件（这些事件是示例事件）。
No events are fired like ("addEvent", "onEventSelect", "onDateSelect", "onEventMove", "onEventResize") 没有触发任何事件（例如“ addEvent”，“ onEventSelect”，“ onDateSelect”，“ onEventMove”，“ onEventResize”）

I am running JSF 2.2 Mojarra 2.2.0 Prime Faces 5.0 我正在运行JSF 2.2 Mojarra 2.2.0 Prime Faces 5.0

Below is my main xhtml page 以下是我的主要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>

The scheduler xhtml page as below : Scheduler 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>

Any suggestions ? 有什么建议么？ Thank you. 谢谢。

Answer 1

Problem solved. 问题解决了。

In the "schedule.xhtml", I have replaced the h:head and body with the "<ui:composition>" tag as shown below : 在“ schedule.xhtml”中，我用"<ui:composition>"标签替换了h:head和body ，如下所示：

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

That solved my problem and it is loading as expected and all events are being fired. 那解决了我的问题，并且按预期加载并且所有事件都被触发。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-02-20 13:51:16

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-02-20 13:51:16

解决方案1
0 已采纳 2015-02-20 13:51:16