title: PrimeFaces 3.0 - f:ajax Ajax Group not receiving events from p:commandButton or p:commandLink
body: <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>