title: How to dynamically add new row to p:dataTable without validating the form?
body: <p>I'm developing a form for adding/editing product prices with JSF and PrimeFaces. A single product can have multiple prices depending on volume which is shown in a <code>&lt;p:dataTable&gt;</code>.</p>
  
  <p>The backing bean:</p>
  
  <pre><code>@ManagedBean
  @ViewScoped
  public class ProductBean {
  
    protected Product product;
    protected List&lt;ProductPrice&gt; productPrices;
  
    public void addNewPrice() {
      ProductPrice productPrice = new ProductPrice();
      productPrice.setPrice(new BigDecimal(0));
      this.productPrices.add(productPrice);
    }
  
    // ...
  }
  </code></pre>
  
  <p>The Facelet page:</p>
  
  <pre><code>&lt;h:form id="productForm"&gt;
    &lt;p:inputText value="#{productBean.product.name}" required="true"&gt;
      &lt;f:ajax event="blur" render="nameMessage" /&gt;
    &lt;/p:inputText&gt;
    &lt;p:message id="nameMessage" for="name" /&gt;
  
    &lt;p:dataTable id="pricesList" ...&gt;
    &lt;/p:dataTable&gt;
    &lt;p:commandButton value="Add another price" update="pricesList" action="#{productBean.addNewPrice()}" /&gt;
    &lt;p:commandButton value="Submit" action="#{productBean.submit}" /&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>The first button "Add another price" does, what it is supposed to do: Adding a new row to "pricesList". But only if form is valid (form is invalid, if product-name is not set). </p>
  
  <p>My problem is, that I am having two commandButtons for the form, but I don't know how to get my wished functionallity without a commandButton. I tried a lot of ways: Changing the "Add another price" to a standard <code>&lt;p:button&gt;</code> with ajax-functionality; doesn't work because of buttons' outcome. I tried "type=button" for this button, but in this case simply nothing happens.</p>
  
  <p>Are there any suggestions have to achieve my wished functionality? It is not necessary to have a button solving my problem.</p>