title: Modal edit dialog on Primefaces with JSF
body: <p>I'm trying to create some CRUD JSF application with edit/new screen implemented as a modal dialog. The problem is that I can't find a way how to make new and edit operation done by this dialog performed with ajax. With delete all was very simple (just ajax="true" option).</p>
  
  <p>Here is a code of button which is used to show the dialog</p>
  
  <pre><code>&lt;h:form id="dataForm"&gt;
          &lt;div class="ui-g"&gt;    
              &lt;div class="ui-g-12 ui-md-9"&gt;
                  &lt;p:dataGrid var="product" value="#{products.productList}" columns="3" layout="grid"
                              rows="12" paginator="true" id="products"
                              paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                              rowsPerPageTemplate="6,12,16"&gt;
  
                      &lt;f:event type="preRenderView" listener="#{products.preloadProductList}" /&gt;
  
                      &lt;f:facet name="header"&gt;
                          Products
                      &lt;/f:facet&gt;
  
                      &lt;p:panel header="#{product.name}" style="text-align:center"&gt;
                          &lt;h:panelGrid columns="1" style="width:100%"&gt;
  
                              &lt;h:outputText value="#{product.name}"/&gt;
  
                              &lt;h:outputText value="#{product.price}"/&gt;
  
                              &lt;%-- Here new/edit dialog window is opened --%&gt;
                              &lt;p:commandLink update=":dataForm:productDetail" oncomplete="PF('productDialog').show()"&gt;
                                  Edit
                                  &lt;f:setPropertyActionListener value="#{product}" target="#{products.product}"/&gt;
                              &lt;/p:commandLink&gt;
  
                              &lt;p:commandLink update=":dataForm" action="#{products.deleteAction(product)}" ajax="true"&gt;
                                  Delete
                              &lt;/p:commandLink&gt;
                          &lt;/h:panelGrid&gt;
                      &lt;/p:panel&gt;
  
                  &lt;/p:dataGrid&gt;
  
                  &lt;ui:include src="WEB-INF/dialogs/edit_product.xhtml"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/h:form&gt;
  </code></pre>
  
  <p>Here is dialog window which is moved to separete file edit_product.xhtml</p>
  
  <pre><code>&lt;ui:composition
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:f="http://xmlns.jcp.org/jsf/core"
          xmlns:h="http://xmlns.jcp.org/jsf/html"
          xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
          xmlns:p="http://primefaces.org/ui"&gt;
  
      &lt;p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
                hideEffect="fade"
                resizable="false"&gt;
          &lt;p:outputPanel id="productDetail" style="text-align:center;"&gt;
              &lt;p:panelGrid columns="2" rendered="#{not empty products.product}"
                           columnClasses="label,value"&gt;
  
                  &lt;h:outputText value="Id:"/&gt;
                  &lt;h:outputText value="#{products.id}"/&gt;
  
                  &lt;h:outputText value="Name"/&gt;
                  &lt;h:inputText value="#{products.name}"/&gt;
  
                  &lt;h:outputText value="Price"/&gt;
                  &lt;h:inputText value="#{products.price}"/&gt;
              &lt;/p:panelGrid&gt;
  
              &lt;h:commandButton value="Save" action="#{products.saveProduct}"/&gt;
          &lt;/p:outputPanel&gt;
      &lt;/p:dialog&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>Here is Managed bean which is used by the Product dataGrid and dialog window.</p>
  
  <pre><code>@ManagedBean(name = "products")
  @SessionScoped
  public class ProductsBean {
  
      private static final Logger logger = LoggerFactory.getLogger(ProductsBean.class);
  
      @Inject
      private ProductRepository productRepository;
  
      private Product product;
  
      private Collection&lt;Product&gt; productList;
  
      public void preloadProductList(ComponentSystemEvent event) throws AbortProcessingException {
          productList = productRepository.getAll();
      }
  
      public String getId() {
          return String.valueOf(product.getId());
      }
  
      public void setId(String id) {
          product.setId(Long.valueOf(id));
      }
  
      public String getName() {
          return product.getName();
      }
  
      public void setName(String name) {
          product.setName(name);
      }
  
      public int getPrice() {
          return product.getPrice();
      }
  
      public void setPrice(int price) {
          product.setPrice(price);
      }
  
      public Product getProduct() {
          return this.product;
      }
  
      public void setProduct(Product product) {
          this.product = product;
      }
  
      public Collection&lt;Product&gt; getProductList() {
          logger.info("Get product list");
          return productList;
      }
  
      public void newProductAction() {
          this.product = new Product();
      }
  
      public void deleteAction(Product product) {
          logger.info("Delete product");
          productRepository.remove(product);
      }
  
      public void saveProduct() {
          productRepository.merge(product);
      }
  }
  </code></pre>
  
  <p>No matter if I add ajax option or not the whole window is reloaded after Save button is pressed. Could you show me the right direction for the implementation, please?</p>
  
  <p>P.S. If you need more code to answer you can find it here:</p>
  
  <ul>
  <li>Main page with Product table <a href="https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/index.xhtml" rel="nofollow noreferrer">https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/index.xhtml</a> </li>
  <li>Edit/New dialog <a href="https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/WEB-INF/dialogs/edit_product.xhtml" rel="nofollow noreferrer">https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/WEB-INF/dialogs/edit_product.xhtml</a></li>
  </ul>