Events are not firing in pe:timeLine component

Community Driven Extensions Project
sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

30 Jul 2013, 11:00

Hi all,


select, add..... events are not firing in pe:timeLine component.
my managedbean method is not calling...

My xhtml code:

Code: Select all

<pe:timeline id="timeline" value="#{examPlanner.model}" height="250px"
var="exam" selectable="true" zoomable="true" moveable="true"
stackEvents="true" axisOnTop="true" eventStyle="box"
showCurrentTime="true" zoomMax="#{examPlanner.zoomMax}"
showNavigation="true" showButtonNew="true" editable="true">
<p:ajax event="select" listener="#{examPlanner.onSelect}" />
<p:ajax event="add" update=":homeform:detailsExaminationInner"
listener="#{examPlanner.onAdd}"
oncomplete="detailsBookingWdgt.show()" />
<p:ajax event="edit" update=":homeform:detailsExaminationInner"
listener="#{examPlanner.onEdit}"
oncomplete="detailsBookingWdgt.show()" />
<h:panelGrid columns="2">
<h:outputText value="Institution Type :" />
<h:outputText value="#{exam.instTypeName}" />
<h:outputText value="Institution :" />
<h:outputText value="#{exam.instName}" />
<h:outputText value="Start Date :" />
<h:outputText value="#{exam.examinationstartdate}"
converter="DateConverter" />
</h:panelGrid>
</pe:timeline>




And My Methods in Bean:

Code: Select all

public void onSelect(TimelineSelectEvent e) {
TimelineEvent timelineEvent = e.getTimelineEvent();

FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Selected event:", timelineEvent.getData().toString());
FacesContext.getCurrentInstance().addMessage(null, msg);
System.out.println("New Event>>>>>>>>>>>"
+ timelineEvent.getStartDate());
}

public void onAdd(TimelineAddEvent e) {
// get TimelineEvent to be added
exam = new Examination();
event = new TimelineEvent("Exam New", startDate, endDate);

// add the new event to the model in case if user will close or cancel
// the "Add dialog"
// without to update details of the new event. Note: the event is
// already added in UI.
model.add(event);
}
i am using the following primefaces versions:

primefaces-3.5
primafeces-extensions-0.70


please assist me.
Last edited by sreenivasulu.n on 30 Jul 2013, 13:48, edited 2 times in total.
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

30 Jul 2013, 12:44

please somebody help me....

what should i do?
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

30 Jul 2013, 14:02

Hi,

now ajax events are firing. i have done some changes in my xhtml and working fine.

but if i use delete ajax event in my pe:timeLine component, my pe:timeLine component istself not being visible means it is not rendering.
i am not getting what is the wrong in my xhtml?
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

30 Jul 2013, 18:57

i have done some changes in my xhtml and working fine.
Since none of us is clairvoyant, it would help if you post the changes, both in words and xhtml. And format the xhtml in a nicer way please...

And remember, patience is a virtue

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

31 Jul 2013, 06:24

i have added 'process' attribute in my select, add ajax component then those events are working fine.

and my Xhtml code is:

Code: Select all

<p:ajax event="select" listener="#{examPlanner.onSelect}"
             process="@form" />
and i have done same for even delete ajax event also but in this case my timeline component is not rendering.

what should i do? please assist me.
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

31 Jul 2013, 13:07

Hello Mr.kukeltje

i have posted my changes with nice format as you told.
please assist me. why i am getting that problm?
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

31 Jul 2013, 19:07

sreenivasulu.n wrote:Hi,

now ajax events are firing. i have done some changes in my xhtml and working fine.

but if i use delete ajax event in my pe:timeLine component, my pe:timeLine component istself not being visible means it is not rendering.
i am not getting what is the wrong in my xhtml?
Next time onwards Please be more specific about your problem.I cann't see delete ajax event in your code at all.Showcase examples described about client side and server side API events very clearly.If the component is not at all rendering then check with your firebug console for JS errors.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

06 Aug 2013, 07:13

thank you Sudheer,

please go through my xhtml code and bean code and my code is given below:

examPlanner.xhtml

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/pages/templates/common/baseType.xhtml">
	<ui:define name="body">
		<h:panelGrid columns="1"
			style="margin-top:-3px;background:transparent;margin-left:-3px"
			headerClass="pageheader" width="100%">
			<f:facet name="header">
				<h:outputText value="View Planned Examinations"
					styleClass="ui-panel-header" />
			</f:facet>
		</h:panelGrid>

		<p:panel id="topPanel" 
			style="height:45px;margin-top:-14px;border:0;background:none;margin-left:-25px;margin-bottom:-10px;">
			<h:panelGrid style="margin-top:-12px; height : 19px;" rendered="#{examPlanner.msgRender}">
				<p:messages globalOnly="true" id="messages" />
			</h:panelGrid>
		</p:panel>

		<pe:timeline id="timeline" value="#{examPlanner.model}" height="350px"
			var="exam" zoomable="true" moveable="true" selectable="true"
			stackEvents="true" axisOnTop="false" eventStyle="box"
			showCurrentTime="true" zoomMax="#{examPlanner.zoomMax}"
			showNavigation="true" showButtonNew="true" editable="true" start="#{examPlanner.min}" end="#{examPlanner.max}">
			<p:ajax event="add" update="@form" listener="#{examPlanner.onAdd}"
				oncomplete="detailsBookingWdgt.show()" process="@form" />
			<p:ajax event="select" listener="#{examPlanner.onSelect}"
				process="@form" partialSubmit="true" />
			
			<p:ajax event="delete" listener="#{examPlanner.onDelete}"
				process="@form" partialSubmit="true" />
				
			<h:panelGrid columns="2">
				<h:outputText value="Institution Type :" />
				<h:outputText value="#{exam.instTypeName}" />
				<h:outputText value="Institution :"/>
				<h:outputText value="#{exam.instName}" />
				<h:outputText value="Start Date :" />
				<h:outputText value="#{exam.examinationstartdate}"
					converter="DateConverter" />
			</h:panelGrid>
		</pe:timeline>


		<p:dialog id="detailsExaminationDlg" header="Create Exam"
			widgetVar="detailsBookingWdgt" showEffect="clip" hideEffect="clip">
			<h:panelGroup id="detailsExaminationInner" layout="block">

				<p:panel id="dlgPanel"
					style="height:45px;margin-top:-14px;border:0;background:none;margin-left:-25px;margin-bottom:-10px;">
					<h:panelGrid style="margin-top:-12px; height : 19px;">
						<p:messages globalOnly="true" id="dlg_messages" />
					</h:panelGrid>
				</p:panel>

				<h:panelGrid columns="2">
					<h:outputText value="Institution Type" />
					<p:selectOneMenu value="#{examPlanner.exam.instTypeCode}">
						<f:selectItems value="#{examPlanner.instTypeList}" var="instType"
							itemLabel="#{instType.institutionTypeName}"
							itemValue="#{instType.institutionTypeCode}" />
						<p:ajax event="change" update="institution" process="@this"
							listener="#{examPlanner.instTypeChange}"></p:ajax>
					</p:selectOneMenu>

					<h:outputText value="Institution" />
					<p:selectOneMenu id="institution"
						value="#{examPlanner.exam.instCode}">
						<f:selectItems value="#{examPlanner.instList}" var="inst"
							itemLabel="#{inst.institutionName}"
							itemValue="#{inst.institutionCode}" />
					</p:selectOneMenu>

					<h:outputText value="Exam Start Date" />
					<p:calendar value="#{examPlanner.exam.examinationstartdate}"
						timeZone="#{editServerTimelineController.timeZone}"
						pattern="dd/MM/yyyy" />

					<h:outputText value="Exam End Date" />
					<p:calendar value="#{examPlanner.exam.examinationenddate}"
						pattern="dd/MM/yyyy" />

					<h:outputLabel value="#{msgs.examDt_type}"
						styleClass="labelWithBackground" />
					<p:selectOneMenu value="#{examPlanner.exam.examTypeCode}">
						<f:selectItems value="#{examPlanner.examTypeList}" var="exmType"
							itemLabel="#{exmType.examTypeName}"
							itemValue="#{exmType.examTypeCode}" />
					</p:selectOneMenu>
				</h:panelGrid>
			</h:panelGroup>

			<f:facet name="footer">
				<h:panelGroup layout="block"
					style="text-align:right; padding:2px; white-space:nowrap;">
					<p:commandButton value="Save" process="detailsExaminationDlg"
						update="timeline,dlgPanel,topPanel" action="#{examPlanner.saveDetails}" />
					<p:commandButton type="button" value="Close"
						onclick="detailsBookingWdgt.hide()" />
				</h:panelGroup>
			</f:facet>
		</p:dialog>

		<p:dialog id="deleteExamDlg" header="Exam Deletion"
			widgetVar="deleteExamWdgt" showEffect="clip" hideEffect="clip"
			dynamic="true" width="200px">
			<h:panelGroup id="deleteExamInner" layout="block"
				style="margin:10px;">
				<h:outputText value="#{examPlanner.deleteMessage}" />
			</h:panelGroup>

			<f:facet name="footer">
				<h:panelGroup layout="block"
					style="text-align:right; padding:2px; white-space:nowrap;">
					<p:commandButton value="Delete" process="deleteExamDlg"
						update="@none" action="#{examPlanner.delete}"
						oncomplete="deleteExamWdgt.hide()" />
					<p:commandButton type="button" value="Close"
						onclick="deleteExamWdgt.hide()" />
				</h:panelGroup>
			</f:facet>
		</p:dialog>

		<div style="float: right;">
			<h:panelGrid columns="2">
				<p:commandButton value="Save"
					action="#{examPlanner.doSavePlannedExaminations}" update="topPanel"></p:commandButton>
				<p:commandButton value="Cancel"
					action="#{examPlanner.doCancelFromPlanner}" ajax="false"></p:commandButton>
			</h:panelGrid>
		</div>
	</ui:define>
</ui:composition>


Managed Bean Code: examPlanner

Code: Select all

public void onSelect(TimelineSelectEvent e) {
		TimelineEvent timelineEvent = e.getTimelineEvent();
		FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
				"Selected event:", timelineEvent.getData().toString());
		FacesContext.getCurrentInstance().addMessage(null, msg);
	}

	public void onAdd(TimelineAddEvent e) {
		// get TimelineEvent to be added
		exam = new Examination();
		updateString = "";
		msgRender = false;
		// event = new TimelineEvent("Exam New", startDate, endDate);
		// add the new event to the model in case if user will close or cancel
		// the "Add dialog"
		// without to update details of the new event. Note: the event is
		// already added in UI.
		// model.add(event);
	}

             public void onDelete(TimelineModificationEvent e) {
		// get clone of the TimelineEvent to be deleted
		event = e.getTimelineEvent();
	}

i am getting the following java script error from my xhtml,
details
Webpage error
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; BTRS100127; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.3)
Timestamp: Tue, 6 Aug 2013 05:09:56 UTC


Message: Expected identifier, string or number
Line: 288
Char: 2858
Code: 0
URI: http://localhost:8080/main/pages/examin ... nner.xhtml

as well as my timeLine Component is not rendering due to this java script error. What should i do?


please assist me..
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

06 Aug 2013, 08:07

Normally this type of issues can occur in IE browser.Do you have the same issue with FF and Chrome browsers.For example When you misplace comma at the end of JSON objects declaration or missing semi colon at the end etc..Just search on internet for the same issue and you will find more details for the issue
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

sreenivasulu.n
Posts: 36
Joined: 19 Jul 2013, 11:01

06 Aug 2013, 08:14

Yes, you are right sudheer.
This issue is raising only for IE browsers not for FF and Chrome browsers.
And i have searched on google also i got the same info.

please could you assist me how to resolve these type of issues in IE?
Sreenivasulu N
Primefaces-5.0
primefaces-extensions-2.0
JSF2.1.7
JBoss 7.1.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 25 guests