<p:commandlink> javascript error

UI Components for JSF
Post Reply
Narayan
Posts: 46
Joined: 23 Mar 2011, 08:35

29 Mar 2011, 08:12

Hi,

We are trying to place commandlink inside datatable, it is giving a javascript error: Unexpected call to method or property access.

Trying to achieve:

a link inside datatable column, which will have ajax call and the same will be updated in a form's particular section.

At the same time whenever we tried using <h:commandlink> we are getting 'component ID not found' - which is nothing but our form and its div id.

Please assist ASAP.

Thanks,
Narayan
TechMahindra.
Top
User avatar
ydarcin
Posts: 258
Joined: 04 Jan 2009, 19:02
Location: Turkey

29 Mar 2011, 10:24

Hi,

can you please paste your code here so that we can look at it?

thanks,

Yigit
Top
Narayan
Posts: 46
Joined: 23 Mar 2011, 08:35

29 Mar 2011, 12:32

code:

<h:commandLink style="text-align:right;"
class="parentLink" actionListener="#{classBean.beanmethod}"><h:outputText value="#{item.columnid}" />

<f:ajax execute="@this"
render="leftPanelForm:leftPanelAccordionTab"></f:ajax>
</h:commandLink>

for leftpanel form:

<h:form id="leftPanelForm">
<ui:include src="left_panel_accordion.xhtml" />
</h:form>

<p:accordionPanel id="leftPanelAccordionTab" widgetVar="leftPanelAccordion" collapsible="true" activeIndex="#{bean.leftPanelActiveIndex}" autoHeight="false" style="text-align:left;border:1px solid #eee8b4;left:0px; top:0px;" styleClass="accordianL">


when doing the above we are getting below exception:

javax.servlet.ServletException: <f:ajax> contains an unknown id 'leftPanelForm:leftPanelAccordionTab' - cannot locate it in the context of the component j_idt322
javax.faces.webapp.FacesServlet.service(FacesServlet.java:321)


root cause

javax.faces.FacesException: <f:ajax> contains an unknown id 'leftPanelForm:leftPanelAccordionTab' - cannot locate it in the context of the component j_idt322
com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.getResolvedId(AjaxBehaviorRenderer.java:278)
com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.appendIds(AjaxBehaviorRenderer.java:265)
com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.buildAjaxCommand(AjaxBehaviorRenderer.java:210)
com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.getScript(AjaxBehaviorRenderer.java:82)
javax.faces.component.behavior.ClientBehaviorBase.getScript(ClientBehaviorBase.java:99)
com.sun.faces.renderkit.RenderKitUtils.getSingleBehaviorHandler(RenderKitUtils.java:1586)
com.sun.faces.renderkit.RenderKitUtils.renderHandler(RenderKitUtils.java:1686)
com.sun.faces.renderkit.RenderKitUtils.renderOnclick(RenderKitUtils.java:429)
com.sun.faces.renderkit.html_basic.CommandLinkRenderer.renderAsActive(CommandLinkRenderer.java:227)
com.sun.faces.renderkit.html_basic.CommandLinkRenderer.encodeBegin(CommandLinkRenderer.java:121)
javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:824)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1641)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
org.primefaces.component.datatable.DataTableRenderer.encodeRegularCell(DataTableRenderer.java:571)
org.primefaces.component.datatable.DataTableRenderer.encodeRow(DataTableRenderer.java:531)
org.primefaces.component.datatable.DataTableRenderer.encodeTbody(DataTableRenderer.java:472)
org.primefaces.component.datatable.DataTableRenderer.encodeRegularTable(DataTableRenderer.java:201)
org.primefaces.component.datatable.DataTableRenderer.encodeMarkup(DataTableRenderer.java:180)
org.primefaces.component.datatable.DataTableRenderer.encodeEnd(DataTableRenderer.java:85)
javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:879)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1650)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
javax.faces.render.Renderer.encodeChildren(Renderer.java:164)
javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:849)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1643)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
org.primefaces.component.tabview.TabViewRenderer.encodeContents(TabViewRenderer.java:180)
org.primefaces.component.tabview.TabViewRenderer.encodeMarkup(TabViewRenderer.java:120)
org.primefaces.component.tabview.TabViewRenderer.encodeEnd(TabViewRenderer.java:61)
javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:879)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1650)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:389)
com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:127)
com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:117)
com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97)
com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:135)
javax.faces.webapp.FacesServlet.service(FacesServlet.java:309)
Top
User avatar
ydarcin
Posts: 258
Joined: 04 Jan 2009, 19:02
Location: Turkey

29 Mar 2011, 13:39

Hi,

can you try the following code:

<f:ajax execute="@this"
render=":leftPanelForm:leftPanelAccordionTab"></f:ajax>
</h:commandLink>

so there is a : before the leftPanelForm,

Yigit
Top
Narayan
Posts: 46
Joined: 23 Mar 2011, 08:35

29 Mar 2011, 13:48

Hi,

Tried with no improvements.

javax.servlet.ServletException: <f:ajax> contains an unknown id ':leftPanelForm:leftPanelAccordionTab' - cannot locate it in the context of the component j_idt155
javax.faces.webapp.FacesServlet.service(FacesServlet.java:321)


root cause

javax.faces.FacesException: <f:ajax> contains an unknown id ':leftPanelForm:leftPanelAccordionTab' - cannot locate it in the context of the component j_idt155

almost same error with ":" added.

Is it anything to do with datatable/form, etc.

This is really not giving any clues to where is the mistake!!!

Please help us to resolve this ASAP.

Thanks,
Narayan.
Top
User avatar
ydarcin
Posts: 258
Joined: 04 Jan 2009, 19:02
Location: Turkey

29 Mar 2011, 14:24

Hi,

it is actually a JSF2 issue as f:ajax is a little picky on id's.

can you try
<p:ajax process="@this" update="leftPanelForm:leftPanelAccordionTab">
or
<p:ajax process="@this" update="leftPanelAccordionTab">

instead of f:ajax?

also if this does not work, can you post your whole xhtml code here?

Yigit
Top
Narayan
Posts: 46
Joined: 23 Mar 2011, 08:35

29 Mar 2011, 15:19

Hi,

Tried the options, but nothing helped. Please find below my xhtml file.

Code: Select all

<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:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/templates/sampling.xhtml">

	<ui:define name="title">
  		#{message['price.capture.title']}
	</ui:define>

	<ui:define name="header">
		<ui:include src="/common/includes/header.xhtml" />
	</ui:define>

	<ui:define name="body">

		<table width="100%" cellspacing="0" border="0" cellpadding="0">
			<tr height="100%" valign="top">
				<td width="100%" align="left" valign="top">
				<div id="tabHelp1"><h:outputLink id="link3" value="#"
					style="color:#ffffff;text-align:right;font-size:0.9em;text-decoration:none;">
					<img
						src="${facesContext.externalContext.requestContextPath}/resources/styles/smoothness/images/help_icon.gif"
						style="margin-right: 3px; vertical-align: top; *vertical-align: middle;" />
					<h:outputText value="Help" />
				</h:outputLink></div>
				<p:tabView widgetVar="tabViewVar"
					style="text-align:left !important;" styleClass="tabHeader">
					
					<p:tab title="#{message['buildsample.tab.title']}" id="tab3"
						widgetVar="tab3" styleClass="summaryTab">
						<div class="hspaceFix"><h:form id="summaryForm">
							<div class="summaryClass">
							<div class="hSpace"></div>
							<div style="padding: 0px !important; text-align: left;">
							<div class="breadCrumbsPriceEntry">
							<div style="float: left; width: 400px;"><strong><h:outputText
								value="Build New Sample" /> 
							| <h:outputText value="PC Peripheral" /></strong></div>
							<span class="contentRight" width="100%"> <h:outputLabel
								for="subscriptions" value="Collection Month" /> <strong><h:outputLabel
								id="subscriptions" value="February 2011" /></strong> | 
								<h:commandLink style="text-align:right;"
								class="parentLink" actionListener="#{sampleBean.retreiveSampleNotes}">Note
						<f:ajax execute="@this"
									render="summaryForm:leftPanelAccordionTab"></f:ajax>
							</h:commandLink> </span></div>
							<div style="clear: both;"></div>
							<p:layout
								style="width:1002px;height:600px;position:relative;padding:0px !important;margin:0px;">
								<p:layoutUnit position="left" width="400" resizable="true"
									styleClass="2_col_layout;"
									style="background-color:#e8e8e8;height:100%; padding:4px 0px 0px 0px; margin:0px;">

									<ui:include src="/sampling/UC43_left_panel_accordion.xhtml" />

								</p:layoutUnit>
					<p:layoutUnit position="center" styleClass="centerPanel_2c">
	
<p:growl id="growl" showDetail="true" style="font-size: 8px;" width="50" height="50"/>
								



											<div class="floatContainer">
											<div class="leftBox"><strong><h:outputText
												value="Sample Details" /></strong></div>
											<div class="rightBox">
											<h:outputLink id="linkWebsite"
												value="#" class="textLink">
												<h:outputText value="Website" />
											</h:outputLink> <h:outputText value=" | " />
											<h:commandLink style="text-align:right;"
								class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}">History
								
								<f:ajax execute="@this"
									render="summaryForm:leftPanelAccordionTab"></f:ajax>
							</h:commandLink>
  				</div>
											</div>

											<div class="summaryTbeSubheading"><h:outputText
												value="PC Peripheral Periodicity : " /> <h:outputText
												value="monthly" /> <h:outputText value=" | " /> <h:outputLink
												id="linkHMethod" value="#" class="textLink">
												<h:outputText value="Method : " />
												<h:outputText value="weight driven" />
											</h:outputLink></div>
											<div class="clear:both"></div>
									
	<p:dataTable var="item" value="#{sampleBean.beanSampleList}"   
	selectionMode="single"
		paginator="true" rows="5" 
							 	paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"	
					rowStyleClass="summaryFix summaryTable">
										<p:column>
											<f:facet name="header">
												<h:outputText value="Quote No." />
											</f:facet>
											<h:outputText value="#{item.prodSampleId}" />
										</p:column>
										<p:column>
											<f:facet name="header">
												<h:outputText value="Peripheral Type" />
											</f:facet>
											<h:outputText value="#{item.templateName}" />
										</p:column>
										<p:column>
											<f:facet name="header">
												<h:outputText value="Retailer" />
											</f:facet>
											<h:commandLink style="text-align:right;"
								class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}" value="#{item.segmentId}" >
								<f:param name="prodsampleid"
											value="#{item.prodSampleId}" />
								<p:ajax process="@this"
									update="leftPanelAccordionTab">
									</p:ajax>

							</h:commandLink>
											
									</p:column>
										<p:column>
											<f:facet name="header">
												<h:outputText value="Brand" />
											</f:facet>
											<h:commandLink style="text-align:right;"
								class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}" value="#{item.dimensionInstance}" >
																<f:param name="prodsampleid"
											value="#{item.prodSampleId}" />
								<p:ajax process="@this"
									update="leftPanelForm:leftPanelAccordionTab">
									</p:ajax>

							</h:commandLink>
										</p:column>
										<p:column>
											<f:facet name="header">
												<h:outputText value="Start Date" />
											</f:facet>
											<h:outputText value="#{item.startdate}" />
										</p:column>

									</p:dataTable>

									<div class="buttonRow">
									<div class="buttonsLeft"><h:commandButton
										id="viewSuggestion" value="" styleClass="commonButton"
										image="/resources/styles/smoothness/img/viewSuggestion_btn.gif" actionListener="#{sampleBean.onClickSuggestionList}">
										<f:ajax execute="@this" render="summaryForm:leftPanelAccordionTab"></f:ajax></h:commandButton>
									<h:commandButton id="reset" value="" styleClass="commonButton"
										style="margin-right:30px;"
										image="../resources/styles/smoothness/img/reset_btn.gif" /> <h:commandButton
										id="addNew" value="" styleClass="commonButton"
										image="/resources/styles/smoothness/img/addNew_btn.gif" actionListener="#{sampleBean.onClickSuggestionList}">
										<f:ajax execute="@this" render="summaryForm:leftPanelAccordionTab"></f:ajax></h:commandButton> <h:commandButton
										id="modify" value="" styleClass="commonButton"
										image="/resources/styles/smoothness/img/modify_btn.gif" /> <h:commandButton
										id="remove" value="" styleClass="commonButton"
										image="/resources/styles/smoothness/img/remove_btn.gif" action="#{sampleBean.modifiedSampleList}"/></div>
									<div class="buttonsRight"><h:commandButton id="save2"
										value="" image="/resources/styles/smoothness/img/save_btn.gif"
										style="margin-top:2px;" /></div>
										<div class="buttonsRight"><h:commandButton id="save3"
										value="" image="/resources/styles/smoothness/img/submit_btn.gif"
										style="margin-top:2px;" /></div>
									</div>

								</p:layoutUnit>
							</p:layout></div>
							</div>
						</h:form></div>
					</p:tab>

				</p:tabView></td>

			</tr>

		</table>

	</ui:define>
</ui:composition>
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

30 Mar 2011, 11:53

I can't see where the leftPanelForm is. I only see the summaryForm in your code.
Top
Narayan
Posts: 46
Joined: 23 Mar 2011, 08:35

30 Mar 2011, 14:11

<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/templates/sampling.xhtml">

<ui:define name="title">
#{message['price.capture.title']}
</ui:define>

<ui:define name="header">
<ui:include src="/common/includes/header.xhtml" />
</ui:define>

<ui:define name="body">

<table width="100%" cellspacing="0" border="0" cellpadding="0">
<tr height="100%" valign="top">
<td width="100%" align="left" valign="top">
<div id="tabHelp1"><h:outputLink id="link3" value="#"
style="color:#ffffff;text-align:right;font-size:0.9em;text-decoration:none;">
<img
src="${facesContext.externalContext.requestContextPath}/resources/styles/smoothness/images/help_icon.gif"
style="margin-right: 3px; vertical-align: top; *vertical-align: middle;" />
<h:outputText value="Help" />
</h:outputLink></div>
<p:tabView widgetVar="tabViewVar"
style="text-align:left !important;" styleClass="tabHeader">

<p:tab title="#{message['buildsample.tab.title']}" id="tab3"
widgetVar="tab3" styleClass="summaryTab">
<div class="hspaceFix"><h:form id="summaryForm">
<div class="summaryClass">
<div class="hSpace"></div>
<div style="padding: 0px !important; text-align: left;">
<div class="breadCrumbsPriceEntry">
<div style="float: left; width: 400px;"><strong><h:outputText
value="Build New Sample" />
| <h:outputText value="PC Peripheral" /></strong></div>
<span class="contentRight" width="100%"> <h:outputLabel
for="subscriptions" value="Collection Month" /> <strong><h:outputLabel
id="subscriptions" value="February 2011" /></strong> |
<h:commandLink style="text-align:right;"
class="parentLink" actionListener="#{sampleBean.retreiveSampleNotes}">Note
<f:ajax execute="@this"
render="leftPanelForm:leftPanelAccordionTab"></f:ajax>
</h:commandLink> </span></div>
<div style="clear: both;"></div>
<p:layout
style="width:1002px;height:600px;position:relative;padding:0px !important;margin:0px;">
<p:layoutUnit position="left" width="400" resizable="true"
styleClass="2_col_layout;"
style="background-color:#e8e8e8;height:100%; padding:4px 0px 0px 0px; margin:0px;">
<h:form id="leftPanelForm">
<ui:include src="/sampling/UC43_left_panel_accordion.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="centerPanel_2c">

<p:growl id="growl" showDetail="true" style="font-size: 8px;" width="50" height="50"/>




<div class="floatContainer">
<div class="leftBox"><strong><h:outputText
value="Sample Details" /></strong></div>
<div class="rightBox">
<h:outputLink id="linkWebsite"
value="#" class="textLink">
<h:outputText value="Website" />
</h:outputLink> <h:outputText value=" | " />
<h:commandLink style="text-align:right;"
class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}">History

<f:ajax execute="@this"
render="leftPanelForm:leftPanelAccordionTab"></f:ajax>
</h:commandLink>
</div>
</div>

<div class="summaryTbeSubheading"><h:outputText
value="PC Peripheral Periodicity : " /> <h:outputText
value="monthly" /> <h:outputText value=" | " /> <h:outputLink
id="linkHMethod" value="#" class="textLink">
<h:outputText value="Method : " />
<h:outputText value="weight driven" />
</h:outputLink></div>
<div class="clear:both"></div>

<p:dataTable var="item" value="#{sampleBean.beanSampleList}"
selectionMode="single"
paginator="true" rows="5"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
rowStyleClass="summaryFix summaryTable">
<p:column>
<f:facet name="header">
<h:outputText value="Quote No." />
</f:facet>
<h:outputText value="#{item.quoteId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Peripheral Type" />
</f:facet>
<h:outputText value="#{item.dimensionLevel}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Retailer" />
</f:facet>
<h:commandLink style="text-align:right;"
class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}" value="#{item.dimensionInstance}" >
<f:param name="prodsampleid"
value="#{item.prodSampleId}" />
<p:ajax process="@this"
update="leftPanelAccordionTab">
</p:ajax>

</h:commandLink>

</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Brand" />
</f:facet>
<h:commandLink style="text-align:right;"
class="parentLink" actionListener="#{sampleBean.onClickQuoteHistory}" value="#{item.segmentInstanceId}" >
<f:param name="prodsampleid"
value="#{item.prodSampleId}" />
<p:ajax process="@this"
update="leftPanelForm:leftPanelAccordionTab">
</p:ajax>

</h:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Start Date" />
</f:facet>
<h:outputText value="#{item.startdate}" />
</p:column>

</p:dataTable>

<div class="buttonRow">
<div class="buttonsLeft"><h:commandButton
id="viewSuggestion" value="" styleClass="commonButton"
image="/resources/styles/smoothness/img/viewSuggestion_btn.gif" actionListener="#{sampleBean.onClickSuggestionList}">
<f:ajax execute="@this" render="leftPanelForm:leftPanelAccordionTab"></f:ajax></h:commandButton>
<h:commandButton id="reset" value="" styleClass="commonButton"
style="margin-right:30px;"
image="/resources/styles/smoothness/img/reset_btn.gif" /> <h:commandButton
id="addNew" value="" styleClass="commonButton"
image="/resources/styles/smoothness/img/addNew_btn.gif" actionListener="#{sampleBean.onClickSuggestionList}">
<f:ajax execute="@this" render="leftPanelForm:leftPanelAccordionTab"></f:ajax></h:commandButton> <h:commandButton
id="modify" value="" styleClass="commonButton"
image="/resources/styles/smoothness/img/modify_btn.gif" /> <h:commandButton
id="remove" value="" styleClass="commonButton"
image="/resources/styles/smoothness/img/remove_btn.gif" action="#{sampleBean.modifiedSampleList}"/></div>
<div class="buttonsRight"><h:commandButton id="save2"
value="" image="/resources/styles/smoothness/img/save_btn.gif"
style="margin-top:2px;" /></div>
<div class="buttonsRight"><h:commandButton id="save3"
value="" image="/resources/styles/smoothness/img/submit_btn.gif"
style="margin-top:2px;" /></div>
</div>

</p:layoutUnit>
</p:layout></div>
</div>
</h:form></div>
</p:tab>

</p:tabView></td>

</tr>

</table>

</ui:define>
</ui:composition>


From the above one we are getting javascript error: "Unexpected call to method or property access."
Top
User avatar
ydarcin
Posts: 258
Joined: 04 Jan 2009, 19:02
Location: Turkey

30 Mar 2011, 15:43

Hi,

I think you are using nested rows which causes problem, can you remove the nested h:form ( <h:form id="leftPanelForm"> ) like

<ui:include src="/sampling/UC43_left_panel_accordion.xhtml" />

instead of

<h:form id="leftPanelForm">
<ui:include src="/sampling/UC43_left_panel_accordion.xhtml" />
</h:form>

Yigit
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 78 guests