装载PrimeFaces安排通过AJAX JSF页面到另一个JSF页面 [英] Loading PrimeFaces Schedule JSF page through ajax into another JSF page
本文介绍了装载PrimeFaces安排通过AJAX JSF页面到另一个JSF页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我运行主要面临着计划组件作为一个正常的XHTML页面，一切都很好，但是当我尝试加载schedule.xhtml页面，通过AJAX到另一个XHTML页面，然后我我越来越喜欢意外的行为：
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 :
- 在schedule.xhtml页面没有加载附有它的Java类的默认事件（这些事件是样本的）。
- 在没有事件被触发像（的addEvent，onEventSelect，onDateSelect，onEventMove，onEventResize）
我正在运行JSF 2.2 Mojarra 2.2.0 素面5.0
I am running JSF 2.2 Mojarra 2.2.0 Prime Faces 5.0
下面是我的主要XHTML页面
Below is my main xhtml page
<!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页面：
The scheduler xhtml page as below :
<!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.
推荐答案
问题解决了。
在schedule.xhtml，我已经取代了 H：头和体与＆LT; UI：组合物＆gt;，如下所示标签：
In the "schedule.xhtml", I have replaced the h:head and body with the "<ui:composition>" tag as shown below :
<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.
这篇关于装载PrimeFaces安排通过AJAX JSF页面到另一个JSF页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
