Primefaces : Ajax Call Inside p:dialog is not working

Question

I am trying to execute ajax method from Dialog, but its not getting executed.

<p:dialog header="Add Product" widgetVar="addProductDialog" modal="true" height="300" width="700" dynamic="true">

   <p:toolbar styleClass="toolBar">
      <p:toolbarGroup align="left">
         <p:commandButton styleClass="grn_actbttn" value="Cancel" onclick="addProductDialog.hide();" />
      </p:toolbarGroup>
      <p:toolbarGroup align="right">
         <p:commandButton styleClass="grn_actbttn" id="addproduct" value="Add Products" actionListener="#{customerProductsBean.saveCustomerProducts}"  oncomplete="addProductDialog.hide();" />
      </p:toolbarGroup>
   </p:toolbar>

</p:dialog>

Java Code

/**
 * Method used to save selected Customer Product from Add Product Dialog 
 * @param actionEvent
 */
public void saveCustomerProducts(ActionEvent actionEvent) {

// DB call to save to database

}

Is it like that p:dialog doesn't support AJAX call ?

Do you have a `` tag around your dialog? – Matt Handy Apr 05 '12 at 11:39 — Matt Handy, Apr 05 '12 at 11:39
Yes it is there... i forgot to mention here.... – Chirag Loliyana Apr 05 '12 at 12:20 — Chirag Loliyana, Apr 05 '12 at 12:20

score 3 · Accepted Answer · answered Apr 05 '12 at 12:42

Your dialog is being moved out of the form after it is rendered on the page. This is a side-effect of the way the client side widgets work for Primefaces dialogs.

Adding appendToBody="true" attribute to dialog will generally fix this.

If this doesn't work then make sure that your dialog is not surrounded by a form, but instead put a form element inside the dialog.

Primefaces : Ajax Call Inside p:dialog is not working

1 Answers1

Linked