Primefaces commandButton onClick Javascript call

Question

I have a datatable like this:

<p:dataTable id="tablealltx" var="transaction" widgetVar="tablealltx"
                        value="#{pastTxModel.txList}" >
<p:column filterBy="#{transaction.session}"
                            filterMatchMode="contains">

   <f:facet name="filter">
   <p:inputText id="myFilter" value="#{transactionXmlController.currentFilter}"                                     onchange="PF('alltxform').filter()" />
   </f:facet>

   <p:outputLabel value="#{transaction.session}" ondblclick="document.getElementById('alltxform:tablealltx:myFilter').value = this.innerText;PF('tablealltx').filter()" />

</p:column>
</p:dataTable>

I want to change this working double click function:

<p:outputLabel value="#{transaction.session}" ondblclick="document.getElementById('alltxform:tablealltx:myFilter').value = this.innerText;PF('tablealltx').filter()" />

To a commandButton with a single click. I tried the following, but the value

<p:commandButton value="Filter" onclick="document.getElementById('alltxform:tablealltx:myFilter').value = #{transaction.session};PF('tablealltx').filter()" />

The value from transaction.session is not written to the filter like it should be. What did I do wrong ?

Try replacing `#{transaction.session}` with `'#{transaction.session}'` — Jasper de Vries, Oct 12 '16 at 13:03
You might also want to add `process="@none"` to your `commandButton`. See http://stackoverflow.com/questions/25339056/understanding-primefaces-process-update-and-jsf-fajax-execute-render-attributes — Jasper de Vries, Oct 12 '16 at 13:33
and you might want to add the `type="button"` to the commandButton if you do not want to fire a server side action... — Kukeltje, Oct 12 '16 at 19:23
Thanks - @JasperdeVries the quotes did the trick. If you want to post an answer.. I'll consider the other advice too, thanks. — Tim, Oct 13 '16 at 07:00

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

The onclick in your button contains this statement:

document.getElementById(...).value = #{transaction.session};

This will be rendered in the resulting HTML as:

document.getElementById(...).value = sessionValue;

In your previous question it was notable that the session value was a string which does not need escaping, so you can just put quotes around the value. So, simply change it into:

document.getElementById(...).value = '#{transaction.session}';

edited May 23 '17 at 10:32

Community

1
1

answered Oct 13 '16 at 07:24

Jasper de Vries

13,693
6
54
86

Bonus question: I tried to add a second button that clears the filter value. This works fine when the button is in the p:column, but when I move it into the filter facet, the filtering does not work anymore. Any ideas off the top of your head ? :) – Tim Oct 14 '16 at 08:59
Not sure if the `filter` facet just "allows" one component (can't find it in the documentation). You could try moving the button a `header` facet (did not try this myself). This is guesswork.. I would have to look into it.. – Jasper de Vries Oct 14 '16 at 09:24
1

It seems `filter` is limited. Related: http://blog.primefaces.org/?p=3084 and http://stackoverflow.com/questions/23791039/primefaces-datatable-date-range-filter-with-filterfunction – Jasper de Vries Oct 14 '16 at 09:35

Primefaces commandButton onClick Javascript call

1 Answers1