Question

I’m trying to execute JavaScript on button click and setting properties in the backing at the same time. Executing JS code works, but the property action listener does not get called. When I remove the onclick attribute, however, the properties are set in the backing when clicking the command button. I’ve also tried using an actionListener. But same issue. Here’s my JSF code:

<rich:dataTable value="#{bean.items}" var="item">
  <rich:column>
    <a4j:commandButton value="Upload" onclick="Richfaces.showModalPanel('p-id');return false;">
       <f:setPropertyActionListener target="#{bean.targetId}" value="#{item.id}" />   
   </a4j:commandButton>
 </rich:column>
 // more columns
</rich:dataTable>

Am I missing something here`?

Answer 1

The <a4j:commandButton> component generates a HTML <input type="submit"> element along with a bunch of JS code for the ajax magic which is not relevant to the current question.

The component’s onclick attribute get generated as the onclick attribute of the very same HTML element. The onclick attribute usually refers some JavaScript code which get executed when the HTML DOM click event is fired on the particular HTML element. This event is fired immediately when the enduser clicks the HTML element and this takes place before the HTML element’s default action (submitting the parent form) is invoked. Even more, the default action can be controlled by the boolean outcome of the JavaScript code. If it returns false, then the default action will not be performed. This is what is happening in your case.

If you want to invoke both the JavaScript code in the onclick attribute and the default action of the HTML <input type="submit"> element, then you have to return true, or just to remove the return false; piece altogether.