How can I pass a javascript value/parameter to Java?

[OriGrammer]

Hello everyone,

I am relatively new in using Primefaces and I am stack with an issue that normally is easy for an
experienced Primeface user, but seems to me impossible to achieve.

I created a flow intro-flow.xml and a page intro.xhtml.

I use JPA and I managed to bring some data (Articles) from the database on my UI. I present you
the UI code here:

Code: Select all

      <h:form id="resultsForm">

					<p:panel id="resultsPanel" header="Results"
						style="margin-bottom:10px;">

						<ui:repeat value="#{listOfArticles}" var="prd">

							<h:panelGroup layout="block"   >

								<div id="#{prd.ean}|#{prd.shortDescription}" class="itemStyle"
									onclick="#{MyArticlesService.getSelectedProduct(this.id)}" <!-- "this.id" is javascript -->
									style="hover { background-color: #D3D3D3;}">
									<img style="width:100px;height:75px;" src="#{prd.pictureUrl}" />

									<h:outputText value="#{prd.shortDescription}"
										style="padding-bottom:2cm;font-weight:bold;" />
								</div>
								
							</h:panelGroup>

							<hr />
							
						</ui:repeat>
						
					</p:panel>
					
				</h:form>

What I try to achieve is to pass the id of the div which is clicked, to the getSelectedProduct method of my service
which is called MyArticlesService in my flow.

The problem is that the piece of code this.id is not recognized as javascript and I get the following error:

Code: Select all

Jul 07, 2016 2:41:02 PM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [dispatcher] in context with path [/eshopWebApp] threw exception [Request processing failed; nested exception is org.springframework.webflow.execution.FlowExecutionException: Exception thrown in state 'intro' of flow 'intro'] with root cause
javax.el.ELException: The identifier [this] is not a valid Java identifier as required by section 1.19 of the EL specification (Identifier ::= Java language identifier). This check can be disabled by setting the system property org.apache.el.parser.SKIP_IDENTIFIER_CHECK to true.

I changed the onclick event as such:

Code: Select all

onclick="#{MyArticlesService.getSelectedProduct('this.id')}"

but Java does not understand this.id as javascript, but it converts it into String.

So my question is:

How can I pass a javascript value/parameter to Java?

In case you have any idea or an answer, I will really appreciate your feedback.

[tandraschko]

have a look at remoteCommand, especially pe:remoteCommand with pe:methodParam

[OriGrammer]

have a look at remoteCommand, especially pe:remoteCommand with pe:methodParam

Hello tandraschko,

First o f all, thank you very much for your answer. I took a look at the link and I found out that it can be really handy
for that, that I need.

I found out that pe:remoteCommand exists in primefaces, but pe:methodParam does not, because I
guess this is an extension.

I have two more questions:

1. Where can I download this extension from?
2. Is this extension for free?

Thank you in advance
- Origamer

[tandraschko]

both pe:remoteCommand and pe:methodParam exists in "PrimeFaces Extensions" - there the prefix is "pe".

see: http://primefaces-extensions.github.io/

[OriGrammer]

Hello tandraschko,

thank you very much for your help. I really appreciate it. Everything works perfectly.

I added

Code: Select all

xmlns:pe="http://primefaces.org/ui/extensions"

in my

Code: Select all

<ui:composition>

element, so that I can use the

Code: Select all

<pe:remoteCommand>

I have found a very good example in this URL: http://www.primefaces.org/showcase-ext/ ... az2s2nbifd
and I changed the code so that the onclick event happens on the div and I did not use the <p:commandButton>, which is used in the example I found in
link above.

The final code looks like this:

Code: Select all

<h:form id="resultsForm">

					<pe:remoteCommand id="applyDataToGetSelectedProductRemoteCommand"
						name="applyData" process="@this"
						update="ProductForm:SelectedProductPanel"
						actionListener="#{MyArticlesService.getSelectedProduct}">
						<pe:methodSignature parameters="java.lang.String" />
						<pe:methodParam name="divId" />
					</pe:remoteCommand>

					<p:panel id="resultsPanel" header="Results"
						style="margin-bottom:10px;">

						<ui:repeat value="#{listOfArticles}" var="prd">

							<h:panelGroup layout="block">

								<div id="#{prd.ean}|#{prd.shortDescription}" class="itemStyle"
									onclick="applyData(this.id)"
									style="hover { background-color: #D3D3D3;}">
									<img style="width:100px;height:75px;" src="#{prd.pictureUrl}" />

									<h:outputText value="#{prd.shortDescription}"
										style="padding-bottom:2cm;font-weight:bold;" />
								</div>

							</h:panelGroup>

							<hr />
						</ui:repeat>
					</p:panel>
				</h:form>