Question

I have a JSF page that is basically a create form. The form consists of a variety of input fields and also a list of sub-elements.

To add a sub-element, you click the “add element” link which pops up a dialog box using the PrimeFaces p:dialog tag. It’s similar to the login panel demo on the prime faces page here, complete with the p:growl validation messages:

http://www.primefaces.org/showcase/ui/dialogLogin.jsf

My problem is, when I click “add” in the dialog box I see growl validation messages for the fields in the dialog box and also the fields on the main form. I only want to see the messages for the dialog box.

Is there a way to do this? I tried embedding a form within a form, but it didn’t work. That is, I tried …

<h:form>

  <p:messages /> <!-- show validation messages for create form contents -->

  <h:inputText value .../>

  <h:dataTable value .../> <!-- list of sub elements -->

  <h:commandLink "shows the add element dialog" ... />

  <p:growl /> <!-- shows the validation messages for dialog contents -->

  <p:dialog>

     <h:form>

       <h:inputText value .../>

       <p:commandButton "validate dialog box fields then add the item to the list" .../>

     </h:form>

  </p:dialog>

</h:form>

… but that didn’t work. Any help is greatly appreciated!

Answer 1

First of all is that you cannot embed one form in another. I think it is not valid html.

p:growl behaves like h:messages. It shows messages for all elements of the page (not limited to one form). You can limit it to global messages only (messages with no id) by setting the globalOnly="true" attribute.

Change your commandButton to update only the p:growl and make sure that it is an ajax request that is fired by your commandButton (ajax=true). The p:commandButton has ajax=true as default behaviour. So if you didn’t change it explicitly, then it is an ajax request.