Databases
StackOverflow2013
Postsdbo
POPrimeFaces 3.0 - f:ajax Ajax Group not receiving events from p:commandButton or p:commandLink
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrimeFaces 3.0 - f:ajax Ajax Group not receiving events from p:commandButton or p:commandLink
    text
    copied!<p>I am trying to integrate PrimeFaces 3.0 into my JSF 2.0 project. I've created some example code to try and get a PrimeFaces <code>&lt;p:dataTable&gt;</code> with a delete button/link in a column for each row. I want the delete action to trigger an Ajax refresh of the table (my current code triggers a render of the enclosing form using @form).</p> <p><strong>My problem is that the PrimeFaces components do not appear to be firing events that can be handled by the core JSF <code>&lt;f:ajax&gt;</code> tag. I am using <code>&lt;f:ajax&gt;</code> as an Ajax Group that encloses the <code>&lt;p:dataTable&gt;</code> as well as another command button.</strong></p> <p>If I implement this purely using core JSF elements (<code>&lt;h:dataTable&gt;</code>, <code>&lt;h:commandButton&gt;</code>, etc.) everything works as expected. Pardon the ugly output, but I'm not going to waste time on CSS styling for my example code.</p> <p><img src="https://i.stack.imgur.com/PyjzR.jpg" alt="Ugly but properly functioning core JSF implementation"></p> <p>Here is the code for the core JSF implementation page:</p> <pre><code>&lt;h:form id="dataTableForm"&gt; &lt;f:ajax listener="#{dataTableTestBean.processAjaxBehavior}" event="action" render="@form :messages :ajaxRenderTargetsInTemplate"&gt; &lt;h:panelGroup id="dataTablePanelGroup"&gt; &lt;h:commandLink id="commandLinkAddRow" value="Add Sample Row" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;h:commandButton id="commandButtonAddRow" value="Add Sample Row" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;sandbox:dataTableCC id="dataTableCC" valueList="#{dataTableTestBean.dataTableList}" /&gt; &lt;/h:panelGroup&gt; &lt;/f:ajax&gt; &lt;h:panelGroup rendered="#{empty dataTableTestBean.dataTableList}"&gt; &lt;h3&gt;No Records To Display&lt;/h3&gt; &lt;/h:panelGroup&gt; &lt;h:commandButton id="commandButtonBackToStartPage" value="#{bundle.backToStartPage}" action="start" immediate="true" /&gt; &lt;/h:form&gt; </code></pre> <p>Here is the code for the core JSF implementation CC:</p> <pre><code>&lt;composite:implementation&gt; &lt;h:dataTable id="theDataTable" rendered="#{not empty cc.attrs.valueList}" value="#{cc.attrs.valueList}" var="row" emptyMessage="#{bundle.dataTableEmptyMessage}"&gt; &lt;f:facet name="header"&gt;#{bundle.dataTableHeader}&lt;/f:facet&gt; &lt;h:column id="columnDeleteButton"&gt; &lt;h:commandLink id="commandLinkDelete" value="Delete" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;h:commandButton alt="#{bundle.delete}" image="#{resource['images/onebit_33_24x24.gif']}" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/h:column&gt; &lt;h:column sortBy="#{row.name}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderName} &lt;/f:facet&gt; &lt;h:outputText value="#{row.name}" /&gt; &lt;/h:column&gt; &lt;h:column sortBy="#{row.rank}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderRank} &lt;/f:facet&gt; &lt;h:outputText value="#{row.rank}" /&gt; &lt;f:facet name="footer"&gt; #{bundle.columnFooterRank} &lt;/f:facet&gt; &lt;/h:column&gt; &lt;h:column sortBy="#{row.serialNumber}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderSerialNumber} &lt;/f:facet&gt; &lt;h:outputText value="#{row.serialNumber}" /&gt; &lt;f:facet name="footer"&gt; #{bundle.columnFooterSerialNumber} &lt;/f:facet&gt; &lt;/h:column&gt; &lt;f:facet name="footer"&gt;#{bundle.dataTableFooter}&lt;/f:facet&gt; &lt;/h:dataTable&gt; &lt;/composite:implementation&gt; </code></pre> <p>The core JSF implementation will nicely fire the Ajax events and do the Partial Page Rendering, part of which is the render of an <code>&lt;h:messages&gt;</code> that confirms the event was processed successfully.</p> <p>When I replace the <code>&lt;h:dataTable&gt;</code> with a <code>&lt;p:dataTable&gt;</code>, no problem. However, if I replace the <code>&lt;h:commandButton&gt;</code> and <code>&lt;h:commandLink&gt;</code> with <code>&lt;p:commandButton&gt;</code> and <code>&lt;p:commandLink&gt;</code>, the Ajax events are not making it to the <code>&lt;f:ajax&gt;</code> Ajax Group element. The record delete and insert operations do actually happen on the server, but the page is never refreshed. I will appear to the user that nothing happened. If you click the browser Refresh button, you will see that the operation did indeed happen. If you click the core JSF command button or command link, everything works. The PrimesFaces table renders and even the PrimeFaces "growl" popups are displayed as expected.</p> <p>Here is a screenshot of the PrimeFaces implementation that has the problem. Again, pardon the ugliness of the buttons and links.</p> <p><img src="https://i.stack.imgur.com/uapY7.jpg" alt="PrimeFaces implementation that has Ajax event problems"></p> <p>First, the page:</p> <pre><code>&lt;p:growl id="growl" showSummary="false" showDetail="true" /&gt; &lt;h:form id="dataTableForm" styleClass="ui-widget"&gt; &lt;f:ajax listener="#{dataTableTestBean.processAjaxBehavior}" event="action" render="@form :growl :ajaxRenderTargetsInTemplate"&gt; &lt;h:panelGroup id="dataTablePanelGroup"&gt; &lt;p:commandLink id="pfCommandLinkAddRow" value="Add Sample Row (pf)" ajax="true" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;p:commandButton id="pfCommandButtonAddRow" value="Add Sample Row (pf)" ajax="true" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;h:commandLink id="hCommandLinkAddRow" value="Add Sample Row (h)" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;h:commandButton id="hCommandButtonAddRow" value="Add Sample Row (h)" actionListener="#{dataTableTestBean.handleAddDataTableRow}" /&gt; &lt;sandbox:primeFacesDataTableCC id="dataTableCC" valueList="#{dataTableTestBean.dataTableList}" /&gt; &lt;/h:panelGroup&gt; &lt;/f:ajax&gt; &lt;h:panelGroup rendered="#{empty dataTableTestBean.dataTableList}"&gt; &lt;h3&gt;No Records To Display&lt;/h3&gt; &lt;/h:panelGroup&gt; &lt;h:commandButton id="commandButtonBackToStartPage" value="#{bundle.backToStartPage}" action="start" immediate="true" /&gt; &lt;/h:form&gt; </code></pre> <p>and the CC:</p> <pre><code>&lt;composite:implementation&gt; &lt;p:dataTable id="theDataTable" rendered="#{not empty cc.attrs.valueList}" value="#{cc.attrs.valueList}" var="row" emptyMessage="#{bundle.dataTableEmptyMessage}"&gt; &lt;f:facet name="header"&gt;#{bundle.dataTableHeader}&lt;/f:facet&gt; &lt;p:column id="columnpclDelete"&gt; &lt;p:commandLink id="pclDelete" value="Delete (pf)" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/p:column&gt; &lt;p:column id="columnpcbDeleteIconOnly"&gt; &lt;p:commandButton id="pcbDeleteIconOnly" ajax="true" global="true" alt="#{bundle.delete}" image="ui-icon ui-icon-trash" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/p:column&gt; &lt;p:column id="columnhclDelete"&gt; &lt;h:commandLink id="hclDelete" value="Delete (h)" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/p:column&gt; &lt;p:column id="columnhcbDeleteWithImage"&gt; &lt;h:commandButton id="hcbDeleteWithImage" alt="#{bundle.delete}" image="#{resource['images/onebit_33_24x24.gif']}" action="#{dataTableTestBean.actionDeleteDataTableRow(row)}" /&gt; &lt;/p:column&gt; &lt;p:column id="columnName" sortBy="#{row.name}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderName} &lt;/f:facet&gt; &lt;h:outputText value="#{row.name}" /&gt; &lt;/p:column&gt; &lt;p:column id="columnRank" sortBy="#{row.rank}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderRank} &lt;/f:facet&gt; &lt;h:outputText value="#{row.rank}" /&gt; &lt;f:facet name="footer"&gt; #{bundle.columnFooterRank} &lt;/f:facet&gt; &lt;/p:column&gt; &lt;p:column id="serialNumber" sortBy="#{row.serialNumber}"&gt; &lt;f:facet name="header"&gt; #{bundle.columnHeaderSerialNumber} &lt;/f:facet&gt; &lt;h:outputText value="#{row.serialNumber}" /&gt; &lt;f:facet name="footer"&gt; #{bundle.columnFooterSerialNumber} &lt;/f:facet&gt; &lt;/p:column&gt; &lt;f:facet name="footer"&gt;#{bundle.dataTableFooter}&lt;/f:facet&gt; &lt;/p:dataTable&gt; &lt;/composite:implementation&gt; </code></pre> <p><strong>Where have I gone wrong? Everything works correctly except for the Ajax events from the PrimeFaces components.</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload