Pass parameter to p:remoteCommand from JavaScript - not working?

Question

although this question has been asked multiple times, somehow the solutions suggested did not work for me.

therefore i try to ask again. I'm using primefaces in version 6.2 and tested using primefaces extensions in 6.2.10

My current code is: What i don't understand is how the remoteCommand and javaScript interact and sent the "result" (resultx) value to the bean methods... i tried even other constelations, but everytime the log was null, whilist the java script printed always the expected result.

XHTML:

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:H="http://java.sun.com/jsf/html"
xmlns:pe="http://primefaces.org/ui/extensions"
>

<p:panel header="Quest Panel" id="questEditPanel">
<p:diagram id="diagram" value="#{questChart.model}" style="height:1200px" styleClass="ui-widget-content" var="el">
<f:facet name="element">

    <h:outputText id="questName" value="#{el.questName}" style="display:block; margin-top:1em;"/>
    <p:commandLink onclick="setClickedSpanElement(this)" >
        <p:graphicImage name="woodenui/gear.png" width="20" height="20"/>
    </p:commandLink>


</f:facet>


<pe:remoteCommand name="execAssignment" action="#{questChart.setResult}">
    <pe:methodSignature parameters="java.lang.String" />
    <pe:methodParam name="resultx" />
</pe:remoteCommand>

<p:remoteCommand name="execAssignment2" actionListener="#{questChart.setResult2}" />


<p:ajax event="connect" listener="#{questChart.onConnect}" />
<p:ajax event="disconnect" listener="#{questChart.onDisconnect}" />
<p:ajax event="connectionChange" listener="#{questChart.onConnectionChange}" />
</p:diagram>
</p:panel>

<script type="text/javascript">

function setClickedSpanElement(parentElement) {
var resultx = parentElement.parentNode.innerHTML;
console.log(result)
execAssignment([{resultx:result}]);
execAssignment2([{resultx:result}]);
}

</script>

</ui:composition>

bean:

public void setResult() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> map = context.getExternalContext().getRequestParameterMap();
    log.info("done... : " + map.get("resultx"));
}

public void setResult2(String resultx) {

    log.info("done...2 : " + resultx);
}

LOG:

01:32:47.986 [http-nio-8080-exec-3] INFO  com.wolfo.beans.QuestChart - done... : null
01:32:48.047 [http-nio-8080-exec-6] INFO  com.wolfo.beans.QuestChart - done...2 : javax.faces.event.ActionEvent[source=org.primefaces.component.remotecommand.RemoteCommand@3b30fbb2]

browser console:

<span id="quest-editor-form:questName" style="display:block; margin-top:1em;">Quest Element 0</span><a id="quest-editor-form:j_idt13" href="#" class="ui-commandlink ui-widget" onclick="setClickedSpanElement(this);PrimeFaces.ab({s:&quot;quest-editor-form:j_idt13&quot;});return false;"><img id="quest-editor-form:j_idt14" src="/javax.faces.resource/woodenui/gear.png.xhtml" alt="" width="20" height="20"></a>

Next time please post the links to what you tried (like requested in [ask]) Saves us time. — Kukeltje, Oct 10 '19 at 07:06
@Kukeltje imo this is a duplicate of [Pass parameter to p:remoteCommand from JavaScript](https://stackoverflow.com/questions/7221495/pass-parameter-to-premotecommand-from-javascript#18510102) but due to PE and P it somehow looks like two questions. — Selaron, Oct 10 '19 at 07:17
well, i did not manage to use p:remoteCommand to make it work - and now, after a while it looks like a duplicate. — Tony B, Oct 10 '19 at 14:36

Tony B · Accepted Answer · 2019-10-10T00:08:38.317

Okay. This was not so obvious, but I've managed to fix it. Instead of using pe:remoteCommand action="".... the change to actionListener="" gave the solution.

<pe:remoteCommand name="execAssignment" actionListener="#{questChart.setResult2}">
    <pe:methodSignature parameters="java.lang.String" />
    <pe:methodParam name="resultx" />
</pe:remoteCommand>

worked.

full answer: xhtml part with panel:

<p:panel header="Quest Panel" id="questEditPanel">
<p:diagram id="diagram" value="#{questChart.model}" style="height:1200px" styleClass="ui-widget-content" var="el">
<f:facet name="element">

<h:outputText id="questName" value="#{el.questName}" style="display:block; margin-top:1em;"/>
<p:commandLink onclick="setClickedSpanElement(this)" >
<p:graphicImage name="woodenui/gear.png" width="20" height="20"/>
</p:commandLink>


</f:facet>

<pe:remoteCommand name="execAssignment" actionListener="#{questChart.setResult2}">
<pe:methodSignature parameters="java.lang.String" />
<pe:methodParam name="resultx" />
</pe:remoteCommand>


<p:ajax event="connect" listener="#{questChart.onConnect}" />
<p:ajax event="disconnect" listener="#{questChart.onDisconnect}" />
<p:ajax event="connectionChange" listener="#{questChart.onConnectionChange}" />
</p:diagram>
</p:panel>

<script type="text/javascript">

function setClickedSpanElement(parentElement) {
var resultx = parentElement.parentNode.innerHTML;
console.log(resultx)
execAssignment(resultx);
}

</script>

bean:

public void setResult2(String resultx) {
 log.info("done...2 : " + resultx);
}

Pass parameter to p:remoteCommand from JavaScript - not working?

1 Answers1