title: JSF Primefaces ajax on p:datatable
body: <p>I am using JSF Primefaces for my UI. I have a specific requirement about ajax on p:datatable. This is a sample page of my project:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;ui:composition
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:comp="http://java.sun.com/jsf/composite/components/"&gt;
  
      &lt;ui:define name="content"&gt;
  
          &lt;h:form id="form1"&gt;
  
              &lt;p:growl id="messages" showDetail="false" /&gt;
  
              &lt;p:panel header="Available Rows" style="width: 15%;"&gt;
  
                  &lt;p:dataTable id="table" value="#{rowBean.rows}" var="row" 
                      widgetVar="50" style="width: 60px;" editable="true"&gt;
  
                      &lt;p:ajax event="rowEdit" listener="#{rowBean.onEdit}" 
                          update="form1:messages" /&gt;
                      &lt;p:ajax event="rowEditCancel" listener="#{rowBean.onCancel}" 
                          update=":form1:messages" /&gt;
  
                      &lt;p:column&gt;
                          &lt;f:facet name="header"&gt;  
                              &lt;h:outputText value="Row ID" /&gt;
                          &lt;/f:facet&gt;
                          &lt;p:cellEditor&gt;
                              &lt;f:facet name="output"&gt;
                                  &lt;h:outputText value="#{row.id}" /&gt;
                              &lt;/f:facet&gt;
                              &lt;f:facet name="input"&gt;
                                  &lt;p:inputText value="#{row.id}" 
                                      style="width:100%" label="Row ID"&gt;
                                  &lt;/p:inputText&gt;
                              &lt;/f:facet&gt;
                          &lt;/p:cellEditor&gt;
                      &lt;/p:column&gt;
  
                      &lt;p:column&gt;
                          &lt;f:facet name="header"&gt;  
                              &lt;h:outputText value="Row Value" /&gt;
                          &lt;/f:facet&gt;
                          &lt;p:cellEditor&gt;
                              &lt;f:facet name="output"&gt;
                                  &lt;h:outputText value="#{row.value}" /&gt;
                              &lt;/f:facet&gt;
                              &lt;f:facet name="input"&gt;
                                  &lt;p:inputText disabled="true" value="#{row.value}" 
                                      style="width:100%" label="Row Value"&gt;
                                  &lt;/p:inputText&gt;
                              &lt;/f:facet&gt;
                          &lt;/p:cellEditor&gt;
                      &lt;/p:column&gt;
  
                      &lt;p:column style="width:6%"&gt;
                          &lt;p:rowEditor /&gt;
                      &lt;/p:column&gt;
  
                  &lt;/p:dataTable&gt;
  
              &lt;/p:panel&gt;
  
              &lt;p:spacer height="5px;"/&gt;
  
              &lt;p:panel id="createPanel" header="Create Row" closable="false" toggleable="true" 
                  collapsed="true" style="width: 15%;"&gt;
                  &lt;p:panelGrid columns="6"&gt;
  
                      &lt;h:outputLabel for="rowBean" value="Row ID" /&gt;
                      &lt;p:inputText value="#{rowBean.row.id}" 
                          required="true" label="Row ID" style="width:125px" /&gt;
  
                      &lt;h:outputLabel for="rowBean" value="Row Value" /&gt;
                      &lt;p:inputText value="#{rowBean.row.value}" 
                          required="true" label="Row Value" style="width:125px" /&gt;
  
                      &lt;f:facet name="footer"&gt;
                          &lt;p:commandButton value="Create" action="#{rowBean.createRow}" 
                              update=":form1" /&gt;
                      &lt;/f:facet&gt;
                  &lt;/p:panelGrid&gt;
              &lt;/p:panel&gt;
  
          &lt;/h:form&gt;
  
      &lt;/ui:define&gt;
  
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>Here I have a data table which lists down all the rows created. Each row is having id and value. Value is editable. There is one more panel within the form which creates new rows. Backing bean is pre-populated with all the created rows with @PostConstruct. Backing bean is having other methods to edit, cancel and create. This page is working and given below is the new requirement.</p>
  
  <p>In some cases there can be an error associated with each row. If there is an error attached with a row, then the value text needs to be updated like a link. While clicking on the link, the row ID and a parameter needs to be passed to backing bean. With these params, backing bean fetches the error details and passes it to the page. Then the error message needs to be shown on a pop-up.</p>
  
  <p>Can you tell me how to do this?</p>