6 Replies Latest reply on Aug 5, 2012 7:10 AM by Brendan Healey

    Closing popup panel on form submit

    Clinton Murdoch Newbie

      My page is displaying a table of 'team', and I want the user to select one to edit and have it show a popup panel with the form to edit or add a new one.

       

      When the update button is selected, the form values are validated client side and are sent to the bean and the data is updated in the database, but the popup panel doesn't hide. the original table rerenders in the background too, so the only thing that isnt happening is the hiding of the panel.

       

      I have tried this with the form inside the popup panel and outside with the domelementattachment set, but the behaviour is the same.

       

       

      {code:xml}




      <rich:popupPanel autosized="true" width="600" modal="true"




      id="editteampanel"




      onmaskclick="#{rich:component('editteampanel')}.hide()">




      <f:facet name="header">





      <h:outputText value="Edit Team" />




      </f:facet>




      <f:facet name="controls">





      <h:panelGroup>






      <a4j:commandLink id="closeetplink"







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







      <h:graphicImage value="/resources/images/close.png"








      styleClass="hidelink" />






      </a4j:commandLink>





      </h:panelGroup>




      </f:facet>




      <h:form id="Team" onsubmit="#{rich:component('editteampanel')}.hide()">





      <a4j:outputPanel id="outpanel" ajaxRendered="true">






      <h:panelGrid columns="3">







      <h:outputText value="Team ID: " />







      <h:inputText id="teamid" readonly="true"








      value="#{teamUpdater.team.teamId}" />







      <rich:message for="teamid" />

       

       








      <h:outputText value="Team Name: " />







      <h:inputText id="teamname" value="#{teamUpdater.team.teamName}"








      required="true">








      <f:validateRequired />








      <rich:validator/>







      </h:inputText>







      <rich:message for="teamname" />

       

       








      <a4j:region>








      <a4j:commandButton value="Cancel"









      onclick="#{rich:component('editteampanel')}.hide()" />







      </a4j:region>







      <a4j:commandButton render="teamtable, teammsg" value="Update"








      execute="@form" action="#{teamUpdater.store}">







      </a4j:commandButton>






      </h:panelGrid>





      </a4j:outputPanel>




      </h:form>



      </rich:popupPanel>

      {code}

        • 1. Re: Closing popup panel on form submit
          Brendan Healey Master

          Why would the update button close the dialog, it doesn't even try to close it unless you're expecting the onmaskclick

          to do this. Why not just add oncomplete="#{rich:component('editteampanel')}.hide()" to this button:

           

          <a4j:commandButton render="teamtable, teammsg" value="Update" execute="@form" action="#{teamUpdater.store}"/>

           

          Regards,

          Brendan.

          • 2. Re: Closing popup panel on form submit
            Clinton Murdoch Newbie

            that's what i originally had, oncomplete for the command button, but then the panel would close regardless of field validation. i've added onsubmit="#{rich:component('editteampanel')}.hide()" to the form element so that it will only close the panel when the form is successfully submitted - ie client side validation is successful. that way if validation fails, the panel stays up and the user can correct the validation problems, but then if validation is successful, the form is submitted and the panel is closed. this doesn't happen though - the form is submitted but the panel doesn't close.

             

            also, do you know how i can get the code to display properly?

             

            Thanks,

            Clinton

            • 3. Re: Closing popup panel on form submit
              Brendan Healey Master

              Ah, now I see what you're trying to do, this should do it:

               

              <a4j:commandButton

                  oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editteampanel')}.hide(); return false;"

               

              Regards,

              Brendan.

              • 4. Re: Closing popup panel on form submit
                navuri prasad Newbie

                Clinton Murdoch wrote:

                 

                My page is displaying a table of 'team', and I want the user to select one to edit and have it show a popup panel with the form to edit or add a new one.

                 

                When the update button is selected, the form values are validated client side and are sent to the bean and the data is updated in the database, but the popup panel doesn't hide. the original table rerenders in the background too, so the only thing that isnt happening is the hiding of the panel.

                 

                I have tried this with the form inside the popup panel and outside with the domelementattachment set, but the behaviour is the same.

                 

                 

                
                <rich:popupPanel autosized="true" width="600" modal="true"id="editteampanel"onmaskclick="#{rich:component('editteampanel')}.hide()"><f:facet name="header"><h:outputText value="Edit Team" /></f:facet><f:facet name="controls"><h:panelGroup><a4j:commandLink id="closeetplink"oncomplete="#{rich:component('editteampanel')}.hide()"><h:graphicImage value="/resources/images/close.png"styleClass="hidelink" /></a4j:commandLink></h:panelGroup></f:facet><h:form id="Team" onsubmit="#{rich:component('editteampanel')}.hide()"><a4j:outputPanel id="outpanel" ajaxRendered="true"><h:panelGrid columns="3"><h:outputText value="Team ID: " /><h:inputText id="teamid" readonly="true"value="#{teamUpdater.team.teamId}" /><rich:message for="teamid" />
                
                <h:outputText value="Team Name: " /><h:inputText id="teamname" value="#{teamUpdater.team.teamName}"required="true"><f:validateRequired /><rich:validator/></h:inputText><rich:message for="teamname" />
                
                <a4j:region><a4j:commandButton value="Cancel"onclick="#{rich:component('editteampanel')}.hide()" /></a4j:region><a4j:commandButton render="teamtable, teammsg" value="Update"execute="@form" action="#{teamUpdater.store}"></a4j:commandButton></h:panelGrid></a4j:outputPanel></h:form></rich:popupPanel>

                 

                <a4j:region><a4j:commandButton value="Cancel"onclick="#{rich:component('editteampanel')}.hide()" /></a4j:region><a4j:commandButton render="teamtable, teammsg" value="Update"execute="@form" action="#{teamUpdater.store}"></a4j:commandButton></h:panelGrid></a4j:outputPanel></h:form></rich:popupPanel>

                 

                 

                pleae remove execute="@form"

                and give id name in render attribute

                • 5. Re: Closing popup panel on form submit
                  Clinton Murdoch Newbie

                  Thanks Brendan, that seems to be working!