CODEWITHSUNDEEP
jqueryajaxjsf-2primefacesdialog
sreekarN
sreekarN

Reputation: 15

PrimeFaces ajax update of form inside p:dialog is not working

I am not able to do an ajax update of h:form inside p:dialog. Here is how my xhtml's are designed. I don't have nested forms.

MainPage.xhtml has corresponding managedBean -> MainPageBean.

SearchView.xhtml has coresponding managedBean -> searchViewBean.

MainPage.xhtml

<ui:composition template='/templates/Layout.xhtml'>
   <ui:define name='content'>
      <h:form prependId='false' id='dataForm'>
      ...
         <h:outputText value="#{mainPageBean.name}" />
         <p:commandButton value="Search" onclick="dialogSearchView.show();" />
      ...
      </h:form>

      <p:dialog id="dialogSearchViewId" widgetVar="dialogSearchView" modal="true" appendToBody="true" dynamic="true">
         <ui:include src="searchView.xhtml" />
      </p:dialog>
   </ui:define>
</ui:composition>

searchView.xhtml

<h:form prependId='false' id='sv_dataForm'>
...
   <p:messages id="sv_messagesId" for="errorMessages" closeable="true" />
   <p:inputText value="#{searchViewBean.lastName}" id="lastName" required="true" />
   <p:commandButton value="Search" action="#{searchViewBean.search}" update=":sv_dataForm" ajax="true" />
   <h:outputText value='#{searchViewBean.numberOfCustomers}' />
...
</h:form>

When a button on MainPage.xhtml is clicked it displays a p:dialog. p:dialog includes SearchView.xhtml. SearchView.xhtml contains a form. When a simple search on lastname is made, numberOfCustomers is determined. When I debug the code I can see value in numberOfCustomers in searchViewBean but p:dialog is not getting updated. But If I have any validation error I can see p:messages getting displayed. I don't know why p:dialog is getting update. If I am doing something wrong please let me know.

Thanks.

Upvotes: 1

Views: 7648

Answers (2)

sreekarN
sreekarN

Reputation: 15

Ok I found the problem. Inside searchView.xhtml I am calling another p:dialog box (addIndividialDialog) as shown bellow in the code.

searchView.xhtml

<h:form prependId='false' id='sv_dataForm'>
...
   <p:messages id="sv_messagesId" for="errorMessages" closeable="true" />
   <p:inputText value="#{searchViewBean.lastName}" id="lastName" required="true" />
   <p:commandButton value="Search" action="#{searchViewBean.search}" update=":sv_dataForm" ajax="true" />
   <p:commandButton id="addButton" value="Add" onclick="addIndividualDialog.show();" />
   <h:outputText value='#{searchViewBean.numberOfCustomers}' />
...
</h:form>

but I have added this dialog(addIndividialDialog) box code in MainPage.xhtml as shown bellow.

MainPage.xhtml

    <ui:composition template='/templates/Layout.xhtml'>
       <ui:define name='content'>
          <h:form prependId='false' id='dataForm'>
      ...
         <h:outputText value="#{mainPageBean.name}" />
         <p:commandButton value="Search" onclick="dialogSearchView.show();" />
      ...
      </h:form>

      <p:dialog id="dialogSearchViewId" widgetVar="dialogSearchView" modal="true" appendToBody="true" dynamic="true">
         <ui:include src="searchView.xhtml" />
      </p:dialog>
      <p:dialog header="Add Individual" widgetVar="addIndividualDialog" modal="true" appendToBody="true" dynamic="true">
         <ui:include src="addIndividual.xhtml" />
      </p:dialog>
   </ui:define>
</ui:composition>

I am able to open the (addIndividialDialog) dialog from searchView.xhtml when I click the button but I am not able to do an update on searchView.xhtml, I did not get any error messages also. When I moved the (addIndividialDialog) dialog box code into searchView.xhtml everything started to work as expected.

This worked for me -

searchView.xhtml

<h:form prependId='false' id='sv_dataForm'>
...
   <p:messages id="sv_messagesId" for="errorMessages" closeable="true" />
   <p:inputText value="#{searchViewBean.lastName}" id="lastName" required="true" />
   <p:commandButton value="Search" action="#{searchViewBean.search}" update=":sv_dataForm" ajax="true" />
   <p:commandButton id="addButton" value="Add" onclick="addIndividualDialog.show();" />
   <h:outputText value='#{searchViewBean.numberOfCustomers}' />
...
</h:form>
<p:dialog header="Add Individual" widgetVar="addIndividualDialog" modal="true" appendToBody="true" dynamic="true">
    <ui:include src="addIndividual.xhtml" />
 </p:dialog>

Upvotes: 0

Guillermo Gefaell
Guillermo Gefaell

Reputation: 377

Nesting forms is invalid in HTML. When you inclide seachView.xhtml you are doing somthing like this:

<h:form prependId='false' id='dataForm'>
  .....
  <h:form prependId='false' id='sv_dataForm'>
     .....
  </h:form>
</h:form>

You must put the p:dialog element outside the main h:form.

By default commandButton has ajax=true, so you don't need to define it.

Upvotes: 1

Related Questions