4 Replies Latest reply on Feb 6, 2009 7:20 PM by Val Sw

    Perform validation, call modal, then submit

    Chris Simons Expert

      All,


      I'm trying to implement something of a confirmation dialogue.


      I have a rich:modalPanel (this isn't really a RichFaces question, though) that will be opened once the user clicks an h:commandLink to Confirm.  The modalPanel contains the actual Submit button.


      The problem I'm having is that I still want the form validation to process and I want it to happen before the modal is allowed to be opened.


      In this case, if I use h:commandLink with an onclick="<open modal panel>", the form validates in the background but the modal still opens.  I'd prefer the modal to only open if the proceeding form has zero errors and validates.  I think if I were to get this to work, my implementation would work.


      What do you all suggest?  I've tried h:commandLink and setting oncomplete="<open modal>" but that validates the form, reloads the page, and the modal never opens.


      Should I have to set an action on the h:commandLink to a blank method, and then open the modal?


      Thanks.  Below is some code to give some context to what I'm doing.


      The confirmation button:



      <h:commandLink id="cmdConfirmEvent" styleClass="primary-button" value="#{messages['form.button.submit']}"
      oncomplete="#{rich:component('defaultConfirmationModal')}.show()">
      </h:commandLink>
      



      The confirmation modal (a facelet):


      <ui:decorate template="/util/modals/defaultConfirmationModal.xhtml">
              <ui:define name="objectContent">
              <h:panelGrid columns="1">
                      <h:outputText value="#{cvEvent.eventName}"/>
              </h:panelGrid>
              </ui:define>
              <ui:define name="buttonContent">
              <ui:decorate template="/layout/primary-button-wrapper.xhtml">
                              <ui:define name="buttonContent">
                                              <h:commandLink id="cmdSubmitEvent" styleClass="primary-button" value="#{messages['form.button.submit']}" action="#{eventManager.submitNewEvent}" />
                              </ui:define>
                      </ui:decorate>
              </ui:define>
      </ui:decorate>