7 Replies Latest reply on Nov 14, 2011 2:52 PM by flavioeasy

    rich:popupPanel data not submitted to the server

    flavioeasy

      Hi all,

       

      I'm trying to migrate a working project from rf 3.3.3 to rf 4.0 under tomcat 6.0.26.

      In the previous project I had an extendedDataTable with modalPanel to make CRUD operations on a simple DB table ... those worked great.

      Now I'm migrating to rf 4.0, same DB table, migrate extendedDataTable ok, migrate modalPanel to popupPanel no way to make it work :-(( ;

      the backing bean is the same, but when I click the a4j:commandLink to submit the data to the server it seems that the data are not filled in the backing bean's fields. I tried to look at the rf4 showcase, particularly to the dataTable edit example (is quite the same I need to do) ; first of all I cut the form inside the modalPanel, than I add an execute="popupPanelID" to the a4j:commandLink and last I move the popupPanel inside the main form, where is the extendedDataTable ; no way to get data refreshed inside the bean.

      Can somebody help me ?

      Below is the code.

      Flavio

       

       

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                      xmlns:ui="http://java.sun.com/jsf/facelets"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:a4j="http://richfaces.org/a4j"
                      xmlns:rich="http://richfaces.org/rich"
                      xmlns:richext="http://java.sun.com/jsf/composite/richext">
          <h:form id="ESSocform">
              <rich:panel header="#{mess.titleListSoc}" headerClass="panel-header-class">

                  <rich:extendedDataTable
                      value="#{eSSoc.dataModel}" var="item" id="ESSocTable"
                      sortMode="#{eSSoc.sortMode}"
                      selectionMode="single"
                      style="height:400px; width:570px;"
                      selection="#{eSSoc.selection}">
                      <a4j:ajax execute="@form"
                                event="selectionchange"
                                listener="#{eSSoc.selectionListener}" />
                      <rich:column id="a2id_col" width="80px" styleClass="text-to-right">
                          <f:facet name="header">
                              <h:outputText value="#{mess.labelSocId}" id="a2id_hea"/>
                          </f:facet>
                          <h:outputText value="#{item.a2id}" id="a2id_fld"/>
                      </rich:column>
                      <rich:column id="a2deso_col" width="250px">
                          <f:facet name="header">
                              <h:outputText value="#{mess.labelSocDes}" id="a2deso_hea"/>
                          </f:facet>
                          <h:outputText value="#{item.a2deso}" id="a2deso_fld"/>
                      </rich:column>
                      <rich:column id="a2usva_col" width="100px">
                          <f:facet name="header">
                              <h:outputText value="#{mess.labelUserVar}" id="a2usva_hea"/>
                          </f:facet>
                          <h:outputText value="#{item.a2usva}" id="a2usva_fld"/>
                      </rich:column>
                      <rich:column id="a2dtva_col" width="140px">
                          <f:facet name="header">
                              <h:outputText value="#{mess.labelDataVar}" id="a2dtva_hea"/>
                          </f:facet>
                          <h:outputText value="#{item.a2dtva}" id="a2dtva_fld">
                              <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
                          </h:outputText>
                      </rich:column>
                  </rich:extendedDataTable>
                  <rich:panel>
                      <a4j:commandLink render="ESSocEditPanel"  execute="@this"
                                       action="#{eSSoc.editSetup}"
                                       oncomplete="#{rich:component('ESSocEditPanel')}.show()" >
                          <h:graphicImage url="/resources/images/nuovo.png" title="#{mess.tipInsert}"/>
                          <f:setPropertyActionListener value="I" target="#{eSSoc.curFunc}" />
                      </a4j:commandLink>
                      <a4j:commandLink render="ESSocEditPanel"  execute="@this"
                                       action="#{eSSoc.editSetup}"
                                       oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESSocEditPanel')}.show();" >
                          <h:graphicImage url="/resources/images/edit.png" title="#{mess.tipEdit}"/>
                          <f:setPropertyActionListener value="M" target="#{eSSoc.curFunc}" />
                      </a4j:commandLink>
                      <a4j:commandLink render="ESSocTableDel"  execute="@this"
                                       action="#{eSSoc.editSetup}"
                                       oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESSocDeletePanel')}.show();" >
                          <h:graphicImage url="/resources/images/delete.png" title="#{mess.tipDelete}"/>
                          <f:setPropertyActionListener value="D" target="#{eSSoc.curFunc}" />
                      </a4j:commandLink>
                  </rich:panel>
                  <richext:spacer height="10" width="100" style="display: block"/>
                  <rich:messages id="ESSocTableErr"></rich:messages>
              </rich:panel>
              <ui:include src="/tables/eSSoc/ESSocDelete.xhtml"/>
              <ui:include src="/tables/eSSoc/ESSocEdit.xhtml"/>
          </h:form>
      </ui:composition>

       

       

       

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:a4j="http://richfaces.org/a4j"
                      xmlns:ui="http://java.sun.com/jsf/facelets"
                      xmlns:rich="http://richfaces.org/rich"
                      xmlns:richext="http://java.sun.com/jsf/composite/richext">

          <rich:popupPanel id="ESSocEditPanel" autosized="false" keepVisualState="false" domElementAttachment="parent"
                           width="720" height="240" headerClass="panel-header-class" modal="true" >
              <f:facet name="header">
                  <h:outputText value="#{eSSoc.headerEditPanel}"/>
              </f:facet>
              <f:facet name="controls">
                  <h:outputLink value="#" onclick="#{rich:component('ESSocEditPanel')}.hide(); return false;">X</h:outputLink>
              </f:facet>
      <!--    <h:form id="ESSocEditPanelForm"> -->
                  <h:panelGroup layout="block" styleClass="scrolls">
                      <a4j:outputPanel id="ESSocTableMod" >
                          <h:panelGrid columns="2">
                              <h:outputText value="#{mess.labelSocId}"/>
                              <h:outputText value="#{eSSoc.ESSoc.a2id}" rendered="#{!eSSoc.insert}"/>
                              <h:inputText id="a2id" value="#{eSSoc.ESSoc.a2id}" size="7" required="true"
                                           maxlength="7" requiredMessage="#{mess.errSocId}" rendered="#{eSSoc.insert}" >
                                  <f:validateLongRange minimum="1" maximum="9999999" />
                              </h:inputText>
                              <h:outputText value="#{mess.labelSocDes}"/>
                              <h:inputText id="a2deso" value="#{eSSoc.ESSoc.a2deso}" size="100"
                                           required="true" requiredMessage="#{mess.errSocDesc}" />
                              <richext:spacer height="10" width="100" style="display: block"/>
                              <richext:spacer height="10" width="100" style="display: block"/>
                              <h:outputText value="#{mess.labelUserIns}"/>
                              <h:outputText value="#{eSSoc.ESSoc.a2usin}" />
                              <h:outputText value="#{mess.labelDataIns}"/>
                              <h:outputText value="#{eSSoc.ESSoc.a2dtin}" >
                                  <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
                              </h:outputText>
                              <h:outputText value="#{mess.labelUserVar}"/>
                              <h:outputText value="#{eSSoc.ESSoc.a2usva}" />
                              <h:outputText value="#{mess.labelDataVar}"/>
                              <h:outputText value="#{eSSoc.ESSoc.a2dtva}"  >
                                  <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
                              </h:outputText>
                          </h:panelGrid>
                          <richext:spacer height="10" width="100" style="display: block"/>
                          <richext:spacer height="10" width="100" style="display: block"/>
                          <a4j:commandLink action="#{eSSoc.confirmData}" execute="ESSocEditPanel"
                                           render="ESSocTable"
                                           oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESSocEditPanel')}.hide();" >
                              <h:graphicImage url="/resources/images/check.png" title="#{mess.tipConferma}"/>
                          </a4j:commandLink>
                      </a4j:outputPanel>
                  </h:panelGroup>
                  <richext:spacer height="10" width="100" style="display: block"/>
                  <rich:messages id="ESSocEditPanelErr" style="color:red;"></rich:messages>
      <!--        </h:form> -->
          </rich:popupPanel>
      </ui:composition>

        • 1. Re: rich:popupPanel data not submitted to the server
          mcmurdosound

          you could try this:

           

          first file:

          ...

          </h:form>

          <ui:include src="/tables/eSSoc/ESSocDelete.xhtml"/>

          <ui:include src="/tables/eSSoc/ESSocEdit.xhtml"/>

          </ui:composition>

           

           

          second file:

           

          <rich:popupPanel id="ESSocEditPanel" autosized="false" keepVisualState="false">

          ...

          </f:facet>

          <h:form id="ESSocEditPanelForm">

          <h:panelGroup layout="block" styleClass="scrolls">

          <a4j:outputPanel id="ESSocTableMod" >

          ...

          </h:form>

          </rich:popupPanel>

          • 2. Re: rich:popupPanel data not submitted to the server
            flavioeasy

            Hi Christian,

             

            restoring <h:form> and </h:form> in the second file makes the action on the a4j:commandLink not triggered ; I cannot figure out why, but the backing bean doesn't receive the control.

             

            Thanks a lot

             

            Flavio

            • 3. Re: rich:popupPanel data not submitted to the server
              flavioeasy

              I discovered that the second popupPanel included in the page (ESSocDelete.xhtml) is working perfectly. What I'm not able to figure out is why, being quite equals on the main tags, when I push the commandLink that confirms the action, one (ESSocDelete.xhtml) works fine while the second (ESSocEdit.xhtml) doesn't return control to backing bean.

              Can somebody help me ?

              Below is the code

              Flavio

               

              LIST ----------------------

               

              <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                              xmlns:ui="http://java.sun.com/jsf/facelets"

                              xmlns:h="http://java.sun.com/jsf/html"

                              xmlns:f="http://java.sun.com/jsf/core"

                              xmlns:a4j="http://richfaces.org/a4j"

                              xmlns:rich="http://richfaces.org/rich"

                              xmlns:richext="http://java.sun.com/jsf/composite/richext">

                  <h:form id="ESSocform">

                      <rich:panel header="#{mess.titleListSoc}" headerClass="panel-header-class">

               

                          <rich:extendedDataTable

                              value="#{eSSoc.dataModel}" var="item" id="ESSocTable"

                              sortMode="#{eSSoc.sortMode}"

                              selectionMode="single"

                              style="height:400px; width:570px;"

                              selection="#{eSSoc.selection}">

                              <a4j:ajax execute="@form"

                                        event="selectionchange"

                                        listener="#{eSSoc.selectionListener}" />

                              <rich:column id="a2id_col" width="80px" styleClass="text-to-right">

                                  <f:facet name="header">

                                      <h:outputText value="#{mess.labelSocId}" id="a2id_hea"/>

                                  </f:facet>

                                  <h:outputText value="#{item.a2id}" id="a2id_fld"/>

                              </rich:column>

                              <rich:column id="a2deso_col" width="250px">

                                  <f:facet name="header">

                                      <h:outputText value="#{mess.labelSocDes}" id="a2deso_hea"/>

                                  </f:facet>

                                  <h:outputText value="#{item.a2deso}" id="a2deso_fld"/>

                              </rich:column>

                              <rich:column id="a2usva_col" width="100px">

                                  <f:facet name="header">

                                      <h:outputText value="#{mess.labelUserVar}" id="a2usva_hea"/>

                                  </f:facet>

                                  <h:outputText value="#{item.a2usva}" id="a2usva_fld"/>

                              </rich:column>

                              <rich:column id="a2dtva_col" width="140px">

                                  <f:facet name="header">

                                      <h:outputText value="#{mess.labelDataVar}" id="a2dtva_hea"/>

                                  </f:facet>

                                  <h:outputText value="#{item.a2dtva}" id="a2dtva_fld">

                                      <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />

                                  </h:outputText>

                              </rich:column>

                          </rich:extendedDataTable>

                          <rich:panel>

                              <a4j:commandLink render="ESSocEditPanel"  execute="@this"

                                               action="#{eSSoc.editSetup}"

                                               oncomplete="#{rich:component('ESSocEditPanel')}.show()" >

                                  <h:graphicImage url="/resources/images/nuovo.png" title="#{mess.tipInsert}"/>

                                  <f:setPropertyActionListener value="I" target="#{eSSoc.curFunc}" />

                              </a4j:commandLink>

                              <a4j:commandLink render="ESSocEditPanel"  execute="@this"

                                               action="#{eSSoc.editSetup}"

                                               oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESSocEditPanel')}.show();" >

                                  <h:graphicImage url="/resources/images/edit.png" title="#{mess.tipEdit}"/>

                                  <f:setPropertyActionListener value="M" target="#{eSSoc.curFunc}" />

                              </a4j:commandLink>

                              <a4j:commandLink render="ESSocTableDel"  execute="@this"

                                               action="#{eSSoc.editSetup}"

                                               oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESSocDeletePanel')}.show();" >

                                  <h:graphicImage url="/resources/images/delete.png" title="#{mess.tipDelete}"/>

                                  <f:setPropertyActionListener value="D" target="#{eSSoc.curFunc}" />

                              </a4j:commandLink>

                          </rich:panel>

                          <richext:spacer height="10" width="100" />

                          <rich:messages id="ESSocTableErr"></rich:messages>

                      </rich:panel>

                  </h:form>

                  <ui:include src="/tables/eSSoc/ESSocEdit.xhtml"/>

                  <ui:include src="/tables/eSSoc/ESSocDelete.xhtml"/>

              </ui:composition>

               

              EDIT  -----------------------

               

              <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                              xmlns:h="http://java.sun.com/jsf/html"

                              xmlns:f="http://java.sun.com/jsf/core"

                              xmlns:a4j="http://richfaces.org/a4j"

                              xmlns:ui="http://java.sun.com/jsf/facelets"

                              xmlns:rich="http://richfaces.org/rich"

                              xmlns:richext="http://java.sun.com/jsf/composite/richext">

               

                  <rich:popupPanel id="ESSocEditPanel" autosized="false" keepVisualState="false" width="720" height="240" headerClass="panel-header-class" modal="true" >

                      <f:facet name="header">

                          <h:outputText value="#{eSSoc.headerEditPanel}"/>

                      </f:facet>

                      <f:facet name="controls">

                          <h:outputLink value="#" onclick="#{rich:component('ESSocEditPanel')}.hide(); return false;">X</h:outputLink>

                      </f:facet>

                      <h:form>

                          <h:panelGroup layout="block" styleClass="scrolls">

                              <a4j:outputPanel id="ESSocTableMod" >

                                  <h:panelGrid columns="2">

                                      <h:outputText value="#{mess.labelSocId}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2id}" rendered="#{!eSSoc.insert}"/>

                                      <h:inputText id="a2id" value="#{eSSoc.ESSoc.a2id}" size="7" required="true"

                                                   maxlength="7" requiredMessage="#{mess.errSocId}" rendered="#{eSSoc.insert}" >

                                          <f:validateLongRange minimum="1" maximum="9999999" />

                                      </h:inputText>

                                      <h:outputText value="#{mess.labelSocDes}"/>

                                      <h:inputText id="a2deso" value="#{eSSoc.ESSoc.a2deso}" size="100"

                                                   required="true" requiredMessage="#{mess.errSocDesc}" />

                                      <richext:spacer height="10" width="100" />

                                      <richext:spacer height="10" width="100" />

                                      <h:outputText value="#{mess.labelUserIns}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2usin}" />

                                      <h:outputText value="#{mess.labelDataIns}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2dtin}" >

                                          <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />

                                      </h:outputText>

                                      <h:outputText value="#{mess.labelUserVar}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2usva}" />

                                      <h:outputText value="#{mess.labelDataVar}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2dtva}"  >

                                          <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />

                                      </h:outputText>

                                  </h:panelGrid>

                                  <richext:spacer height="10" width="100" />

                                  <richext:spacer height="10" width="100" />

                                  <a4j:commandLink action="#{eSSoc.confirmData}"

                                                   render="ESSocTable"

                                                   oncomplete="#{rich:component('ESSocEditPanel')}.hide();" >

                                      <h:graphicImage url="/resources/images/check.png" title="#{mess.tipConferma}"/>

                                  </a4j:commandLink>

                              </a4j:outputPanel>

                          </h:panelGroup>

                      </h:form>

                  </rich:popupPanel>

              </ui:composition>

               

              DELETE -------

               

              <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                              xmlns:h="http://java.sun.com/jsf/html"

                              xmlns:f="http://java.sun.com/jsf/core"

                              xmlns:a4j="http://richfaces.org/a4j"

                              xmlns:ui="http://java.sun.com/jsf/facelets"

                              xmlns:rich="http://richfaces.org/rich"

                              xmlns:richext="http://java.sun.com/jsf/composite/richext">

               

                  <rich:popupPanel id="ESSocDeletePanel" autosized="false" keepVisualState="false" width="520" height="130" headerClass="panel-header-class" modal="true" >

                      <f:facet name="header">

                          <h:outputText value="#{mess.titleDeleteSoc}"/>

                      </f:facet>

                      <f:facet name="controls">

                          <h:outputLink value="#" onclick="#{rich:component('ESSocDeletePanel')}.hide(); return false;">X</h:outputLink>

                      </f:facet>

                      <h:form>

                          <h:panelGroup layout="block" styleClass="scrolls">

                              <a4j:outputPanel id="ESSocTableDel" >

                                  <h:panelGrid columns="2">

                                      <h:outputText value="#{mess.labelSocId}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2id}"/>

                                      <h:outputText value="#{mess.labelSocDes}"/>

                                      <h:outputText value="#{eSSoc.ESSoc.a2deso}" />

                                  </h:panelGrid>

                                  <richext:spacer height="10" width="100" />

                                  <richext:spacer height="10" width="100" />

                                  <a4j:commandLink action="#{eSSoc.confirmData}"

                                                   render="ESSocTable"

                                                   oncomplete="#{rich:component('ESSocDeletePanel')}.hide();">

                                      <h:graphicImage url="/resources/images/delete.png" title="#{mess.tipConferma}"/>

                                  </a4j:commandLink>

                              </a4j:outputPanel>

                          </h:panelGroup>

                      </h:form>

                  </rich:popupPanel>

              </ui:composition>

              • 4. Re: rich:popupPanel data not submitted to the server
                mcmurdosound

                have you tried to set the required="true" inputText elements to :required="false"?

                • 5. Re: rich:popupPanel data not submitted to the server
                  flavioeasy

                  Just tried but it doesn't change

                  • 6. Re: rich:popupPanel data not submitted to the server
                    mcmurdosound

                    Hmmm, instead of rerendering the whole popup, like:

                    <a4j:commandLink render="ESSocEditPanel" ...

                     

                     

                    You have to give the form inside a popuppanel an id:

                    EDIT-Popup:

                       <h:form id="ESSocForm">

                                <h:panelGroup layout="block" styleClass="scrolls">

                                    <a4j:outputPanel id="ESSocTableMod" >

                     

                    and then rerender only the contents of the popup panel:

                     

                    <a4j:commandLink render="ESSocForm:ESSocTableMod"

                    execute="@this" action="#{eSSoc.editSetup}"  oncomplete="#{rich:component('ESSocEditPanel')}.show()" >

                    • 7. Re: rich:popupPanel data not submitted to the server
                      flavioeasy

                      Well thanks Christian, now it works.

                       

                      Thanks also to the post at http://community.jboss.org/thread/174595?tstart=30 I did the trick.

                       

                      For me the main point has been wrap the popupPanel with the form while previously I did viceversa.

                       

                      Now it would be very fine to figure out why in rf 3.3.3 is not mandatory wrap a modalPanel with a form while in rf 4 popupPanel needs this.

                       

                      Thanks for any advice.

                       

                      Flavio