3 Replies Latest reply on May 16, 2007 6:02 AM by Ilya Shaikovsky

    Proper use of modal panel for confirmantion & success messag

    Chetan Kadam Newbie

      I am trying to design following scenario :

      1. I have a data table containing bunch of employee names, and each row of the table has delete action (link)
      2. When user clicks on this link, I want to show confirmation modal panel "Do you really want to delete this record ?"
      3. If user clicks on OK, then delete operation happens, and user is shown success message in another modal panel.

      I am thinking about writing code as follows,

      <t:dataTable value="#{myBean.data}" var="d" >
       <t:column>
       <f:facet name="header">Name</f:facet>
       <h:outputText value="#{d.name}" />
       </t:column>
      
       <t:column>
       <f:facet name="header">Action</f:facet>
       <a4j:commandLink action="#{myBean.deleteRowData}" value="delete"
       reRender="myPopUp1, myPopup2"
       onsubmit="javascript:Richfaces.showModalPanel('myForm:myPopUp1')">
       oncomplete="javascript:Richfaces.showModalPanel('myForm:myPopUp2')">
       </a4j:commandLink>
       </t:column>
      
      </t:dataTable>
      
      <rich:modalPanel id="myPopUp1">
       <h:outputText value="Do you want to delete #{myBean.rowData.name} ?" />
      </rich:modalPanel>
      
      <rich:modalPanel id="myPopUp2">
       <h:outputText value="Successfully deleted #{myBean.rowData.name}" />
      </rich:modalPanel>
      


      But I am still not able to figure out :
      1. When I show modal panel on form submit, how can I update rowData property in backing bean ? I dont think its possible before posting the form.
      2. How can I close first modal panel and continue with form submit ?
      3. IF the delete operation fails, then how can I NOT show success popup.


        • 1. Re: Proper use of modal panel for confirmantion & success me
          Ilya Shaikovsky Master

          Main page:

           <rich:modalPanel id="_panel">
           <a4j:include viewId="/pages/greeting.xhtml"></a4j:include>
           </rich:modalPanel>
           <h:form id="_form">
           <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"
           rowKeyVar="row" id="table" >
           <h:column>
          ...
           </h:column>
           <h:column>
           <a4j:commandButton oncomplete="javascript:Richfaces.showModalPanel('_panel')" value="Delete" ajaxSingle="true">
           <a4j:actionparam value="#{row}" assignTo="#{capitalsBean.deletedRow}" name="row"/>
           </a4j:commandButton>
           </h:column>
           </rich:dataTable>
           </h:form>
          


          first include (popup):
          <h:form>
           <h:outputText value="Sure to delete?"></h:outputText>
           <a4j:commandLink action="#{capitalsBean.delete}" value="Delete">
           </a4j:commandLink>
           <h:outputLink value="#" onclick="javascript:Richfaces.hideModalPanel('_panel')">
           <h:outputText value="Close"></h:outputText>
           </h:outputLink>
          </h:form>
          


          Second include (if needed):
          <h:form onsubmit="javascript:Richfaces.hideModalPanel('_panel')">
           <a4j:commandLink value="Hide" reRender="table"></a4j:commandLink>
           </h:form>
          


          bean:
          public String delete() {
           //String sid=FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("row");
           System.out.println(getDeletedRow());
           int intid = Integer.parseInt(getDeletedRow());
           capitals.remove(intid);
           return "greeting1";
           }
          

          Looks like your use case.

          • 2. Re: Proper use of modal panel for confirmantion & success me
            Chetan Kadam Newbie

            Thanks for the response .

            I understand how you are showing the first confirmation dialog and updating Backing bean prior to that. However from your example, it was not very clear as in :

            1. Where is the second include actually included ? (in main page or in the greetings dialog )
            2. How does the second modal panel invoked. ? Based on the delete action on first modal panel, its simply calling action on the backing bean. Does this action have some navigation rules, which cause first modal panel to close and display second modal panel ?

            • 3. Re: Proper use of modal panel for confirmantion & success me
              Ilya Shaikovsky Master

              There is navigation occurs as far as I used ajax action component inside the a4j:include which is returns navigation outcome.
              So there will be navigation inside the include after delete link activated or closure if close pressed.