Modal edit dialog on Primefaces with JSF

Question

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).

Here is a code of button which is used to show the dialog

<h:form id="dataForm">
        <div class="ui-g">    
            <div class="ui-g-12 ui-md-9">
                <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">

                    <f:event type="preRenderView" listener="#{products.preloadProductList}" />

                    <f:facet name="header">
                        Products
                    </f:facet>

                    <p:panel header="#{product.name}" style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%">

                            <h:outputText value="#{product.name}"/>

                            <h:outputText value="#{product.price}"/>

                            <%-- Here new/edit dialog window is opened --%>
                            <p:commandLink update=":dataForm:productDetail" oncomplete="PF('productDialog').show()">
                                Edit
                                <f:setPropertyActionListener value="#{product}" target="#{products.product}"/>
                            </p:commandLink>

                            <p:commandLink update=":dataForm" action="#{products.deleteAction(product)}" ajax="true">
                                Delete
                            </p:commandLink>
                        </h:panelGrid>
                    </p:panel>

                </p:dataGrid>

                <ui:include src="WEB-INF/dialogs/edit_product.xhtml"/>
            </div>
        </div>
    </h:form>

Here is dialog window which is moved to separete file edit_product.xhtml

<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">

    <p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
              hideEffect="fade"
              resizable="false">
        <p:outputPanel id="productDetail" style="text-align:center;">
            <p:panelGrid columns="2" rendered="#{not empty products.product}"
                         columnClasses="label,value">

                <h:outputText value="Id:"/>
                <h:outputText value="#{products.id}"/>

                <h:outputText value="Name"/>
                <h:inputText value="#{products.name}"/>

                <h:outputText value="Price"/>
                <h:inputText value="#{products.price}"/>
            </p:panelGrid>

            <h:commandButton value="Save" action="#{products.saveProduct}"/>
        </p:outputPanel>
    </p:dialog>
</ui:composition>

Here is Managed bean which is used by the Product dataGrid and dialog window.

@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<Product> 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<Product> 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);
    }
}

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.S. If you need more code to answer you can find it here:

• Main page with Product table https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/index.xhtml
• Edit/New dialog https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/WEB-INF/dialogs/edit_product.xhtml