Interfaces: Ajax Call Inside p dialog: doesn't work

I am trying to execute an ajax method from a dialog box, but its execution fails.

<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

}

Does this look like the p: dialog does not support AJAX calling?

0
source share
1 answer

Your dialog box moves out of the form after it is displayed on the page. This is a side effect of how client side widgets work for Primefaces dialogs.

Adding an attribute appendToBody="true"in a dialog box usually fixes this.

If this does not work, make sure that your dialog is not surrounded by the form, but instead place the form element inside the element inside .

+3
source

All Articles