JSF (PrimeFaces) page doesn't work with single form

Question

I am developing a simple page using PrimeFaces that list informations about some projects. I wanted to add a button that open a dialog with detailed information. The code is quite simple. However it doesn't work:

<h:form id="projectForm">  
  <p:dataTable id="projectDataTable" var="project" value="#{projectMB.projects}" >  
    <p:column sortBy="name" headerText="Name">  
      <h:outputText value="#{project.name}" />  
    </p:column>  
    <p:column sortBy="status" headerText="Status">  
      <h:outputText value="#{project.status}" />  
      <h:outputText value=" (#{project.progress}%)" />  
    </p:column>
    <p:column style="width:4%">  
      <p:commandButton update=":projectForm:display" id="selectButton" oncomplete="PF('projectDialog').show()" icon="ui-icon-search" title="View">  
        <f:setPropertyActionListener value="#{project}" target="#{projectMB.selectedProject}" />  
      </p:commandButton>  
    </p:column>            
  </p:dataTable>  
  <center>
    <p:commandButton id="refreshProjectsButton" actionListener="#{projectMB.refreshProjectList}" icon="ui-icon-refresh" update="projectDataTable"/>
  </center>

  <p:dialog header="Project Detail" widgetVar="projectDialog" resizable="false" id="projectDlg" showEffect="fade" modal="true">  
    <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
      <h:outputText value="Name:" />  
      <h:outputText value="#{projectMB.selectedProject.name}" style="font-weight:bold"/>  
      <h:outputText value="Description:" />  
      <h:outputText value="#{projectMB.selectedProject}" style="font-weight:bold"/>  
    </h:panelGrid>  
  </p:dialog>  
</h:form>

I found a solution by adding extra form which enclose dialog:

<h:form id="projectForm">  
  <p:dataTable id="projectDataTable" var="project" value="#{projectMB.projects}" >  
    <p:column sortBy="name" headerText="Name">  
      <h:outputText value="#{project.name}" />  
    </p:column>  
    <p:column sortBy="status" headerText="Status">  
      <h:outputText value="#{project.status}" />  
      <h:outputText value=" (#{project.progress}%)" />  
    </p:column>
    <p:column style="width:4%">  
      <p:commandButton update=":projectForm2:display" id="selectButton" oncomplete="PF('projectDialog').show()" icon="ui-icon-search" title="View">  
        <f:setPropertyActionListener value="#{project}" target="#{projectMB.selectedProject}" />  
      </p:commandButton>  
    </p:column>            
  </p:dataTable>  
  <center>
    <p:commandButton id="refreshProjectsButton" actionListener="#{projectMB.refreshProjectList}" icon="ui-icon-refresh" update="projectDataTable"/>
  </center>

</h:form>  
<h:form id="projectForm2"> 

  <p:dialog header="Project Detail" widgetVar="projectDialog" resizable="false" id="projectDlg" showEffect="fade" modal="true">  
    <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
      <h:outputText value="Name:" />  
      <h:outputText value="#{projectMB.selectedProject.name}" style="font-weight:bold"/>  
      <h:outputText value="Description:" />  
      <h:outputText value="#{projectMB.selectedProject}" style="font-weight:bold"/>  
    </h:panelGrid>  
  </p:dialog>  
</h:form>

My question is: why the first code doesn't work - method projectMB.refreshProjectList that refresh the list in java bean is never called. I don't get any errors in javascript and java.

As usual, "it doesn't work" is a very vague description of a problem. You should also provide a minimal example, in 99% of cases you can replicate the problem without posting the whole wall of code, which is a noise for readers. — Danubian Sailor, Apr 04 '14 at 07:48
@Łukasz웃Lツ I think that the sentence "method projectMB.refreshProjectList that refresh the list in java bean is never called" explains what is the problem. — gawi, Apr 04 '14 at 08:32
You click button, and nothing happens, there's absolutely no message in logs and no request or error message in javascript console? What happens if you remove the data table? I've made a minimal example, with 2 buttons - one calls server method and the second opens the dialog. The dialog is in the same form. Everything functions smoothly. — Danubian Sailor, Apr 04 '14 at 09:14
Well, I'm not looking for a solution. As I posted, I have already found one (add additional form). I am wondering why the first code doesn't work, and the second does. There are no errors in java code, no logs in javascript console. Emil Kaminski pointed out the post where somebody explains that a dialog can be put in any place in the DOM tree, but I would like to know why. — gawi, Apr 04 '14 at 16:16

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

This is a pretty common issue with Dialogs inside forms, and you could easy find an answer if you search a little about this issue.

But perhaps this answer can help you further:

Proper Construct for Primefaces Dialog

edited May 23 '17 at 12:20

Community

1
1

answered Apr 03 '14 at 13:11

Emil Kaminski

1,886
2
16
26

I see that a dialog can be put anywhere in the DOM tree, but why? I thought that tags defines what should be included in which part of generated html. – gawi Apr 04 '14 at 08:38

JSF (PrimeFaces) page doesn't work with single form

1 Answers1