10 Replies Latest reply on Nov 5, 2008 4:51 PM by Michal Belicek

    rich:modalPanel: How to send parameters

    Raj Tiwari Newbie

      have a list of items with a Delete button next to each item. If the user hits the delete button, I would like to pop up a model dialog for confirmation before deleting the item. My problem is, I am unable to send any parameters to the modal dialog in order to display attributes of the item selected in the dialog.


      Here is a snip of the code:
      The modal dialog panel:



      <rich:modalPanel id="deleteEmailConfirm"
      ...
              <tr>
                  <td><h:commandButton value="Yes" onclick="confirmEmailDelete()"/></td>
                  <td><h:commandButton value="No" onclick="cancelEmailDelete()"/></td>
              </tr>
      ...
      



      This modal panel is invoked from the following JS function


      function preDeleteEmail(email, uid)
          {
              var emailToDelete = new Object();
              emailToDelete.email = email;
              emailToDelete.uid = uid;
              
              
              // show confirmation dialog
              var panel = Richfaces.findModalPanel('deleteEmailConfirm');
              
              // got to set the email in question on the panel itself since the 
              // DOM is not available there
              panel.emailToDelete = emailToDelete; 
              Richfaces.showModalPanel('deleteEmailConfirm',{width:400, top:200})
          }
      



      And the confirmation and cancellation functions:


      function cancelEmailDelete()
          {
              Richfaces.hideModalPanel('deleteEmailConfirm');
              var panel = Richfaces.findModalPanel('deleteEmailConfirm').emailToDelete=undefned;
          }
          
          function confirmEmailDelete()
          {
              // Get the handle to the panel
              var email = Richfaces.findModalPanel('deleteEmailConfirm').emailToDelete;
              Seam.Component.getInstance("EditProfile").deleteEmail(email.uid, 
                                               function(result)
                                               {
                                                   // simulate cancel
                                                   cancelEmailDelete();
                                                   // update email display
                                                   Seam.Component.getInstance("EditProfile").getEmails(getEmailsCallback);
                                               });
          }
      
      


      My problem is that findModalPanel always returns undefined. I cannot think of any other way to get information about the selected item to the code in the modal panel.


      Any ideas?

        • 1. Re: rich:modalPanel: How to send parameters
          Damian Harvey Apprentice

          Do you have to be using Remoting?


          If not then a good pattern for modals is to populate a modal specific Bean and reRender the modal. I'm sure that you can also do this with Remoting but I've never looked into that.


          In your case you could have a  deleteEmail bean. Your links on the page populate the Bean with the id or email to be deleted



          <a4j:commandButton
            action="#{deleteEmailBean.populate(bean.emailId)}"
            reRender="deleteEmailConfirmDiv" ajaxSingle="true"
            oncomplete="Richfaces.showModalPanel('deleteEmailConfirm',{width:400, top:200})"


          Where deleteEmailConfirmDiv could be a div in your modal used to show the email that is being deleted. Then in your modal you just need to call an action on the deleteEmailBean.



          <rich:modalPanel id="deleteEmailConfirm"
              <div id="deleteEmailConfirmDiv">
                Are you sure you wish to delete email: #{deleteEmailBean.email}?
          ...
                  <tr>
                      <td>
                          <a:commandButton value="Yes"
                            action="#{deleteEmailBean.delete}" 
                            oncomplete="Richfaces.hideModalPanel('deleteEmailConfirm');"/>
                      </td>
          etc
          


          Cheers,


          Damian.

          • 2. Re: rich:modalPanel: How to send parameters
            Raj Tiwari Newbie

            Damian,
            Thanks for your help. This is definitely a first rate idea if not using remoting. However, I find it a little wasteful to do a server hop just to communicate state local to the page.


            My email list is rendered based on a Seam remote call that reflects the latest state of the list on the server. Therefore, I don't have the option of having a static a4j:commandButton for each item.


            If only there was a (documented) JavaScript equivalent of rich:componentControl...


            It would also be nice to have documented JS interfaces for all other tags that do DHTML manipulation under the hood.


            -Raj

            • 3. Re: rich:modalPanel: How to send parameters
              Damian Harvey Apprentice

              Again, if you weren't using Remoting I would suggest that you should look at a4j:jsFunction. I find it very useful for situations where you need to mix javascript with Seam.


              Have you looked into passing javascript variables with the showModalPanel function? They are put alongside your 'width' and 'top'; eg:


              Richfaces.showModalPanel('deleteEmailConfirm',{width:400, top:200, email:'someone@somewhere.com'})




              Cheers,


              Damian.

              • 4. Re: rich:modalPanel: How to send parameters
                Rich Hephner Newbie

                Within a dataTable, I got this to work client-side by adding an onRowClick event to the table that goes to a custom javascript function that then calls the modalPanel.  Like so:     


                <script language="javascript">
                     function triggerMenu(nodeId){
                          Richfaces.showModalPanel('assignmentPanel',{width:400, top:200, 'nodeId':nodeId});
                     }
                     </script>
                <rich:dataTable id="matches" value="#{qsearchResults}" var="match" onRowClick="triggerMenu('#{match.nodeId}')" rendered="#{!empty(qsearchResults)}">


                My only problem now is how do I reference the new parameter from within the modalPanel? Specifically, how do I set a bean property equal to a javascript property?


                Rich

                • 5. Re: rich:modalPanel: How to send parameters
                  Raj Tiwari Newbie

                  OK folks,
                  So the following works:


                  I modify the Richfaces object directly. When a user clicks on the list of meails, the preDeleteEmail function is invoked:


                  
                  function preDeleteEmail(email, uid)
                      {
                          var emailToDelete = new Object();
                          emailToDelete.email = email;
                          emailToDelete.uid = uid;
                          
                          // got to set the email in question on the panel itself since the 
                          // DOM is not available there
                          Richfaces.emailToDelete = emailToDelete; 
                          Richfaces.showModalPanel('deleteEmailConfirm',{width:400, top:200, email:emailToDelete})
                      }
                  



                  I have the following code inside my modal panel:


                  <rich:modalPanel id="deleteEmailConfirm"
                  ...
                          <tr>
                              <td><h:commandButton value="Yes" onclick="confirmEmailDelete(Richfaces.emailToDelete)"/></td>
                              <td><h:commandButton value="No" onclick="cancelEmailDelete()"/></td>
                          </tr>
                  ...
                  


                  Of course what this does not accomplish is any text (re)rendering in the modal panel. But atleast it gets my basic functionality going.


                  It would be so cool if the rich:* tags had Javascript interfaces equivalent to the XML interfaces. This would let me call re-render etc from my scripts.

                  • 6. Re: rich:modalPanel: How to send parameters
                    Ivan Fajardo Newbie

                    Hi, i'm having some troubles with modalPanel. I put a form into modal panel, 2 input boxes and i tried to re render the input boxes after clicking in an a4j:commandButton. The value of the input boxes become well into the action, the action does some stuff, but the inputboxes never rerender.



                    Does anybody can help me?



                    Regards!

                    • 7. Re: rich:modalPanel: How to send parameters
                      Bram - Newbie

                      I've got a similar setup, it works for most part.
                      The problem is, sometimes the modalPanel will not show.
                      It's irregular and seems unrelated to the row or row-data, since
                      I've tested with several rows and sometimes it does and
                      sometimes it doesn't work with one and the same row.


                      I have a feeling that I'm missing something with regards to
                      calling the modalPanel. Any help would be appreciated.


                      The application I've created is a seam-gen based application with
                      two objects and a many-to-many relation-ship. One of the
                      objects is the user and the other is a card-object. The
                      intermediate table makes up the user's inventory of cards.
                      I've generated the usual search-box for browsing the card-list
                      and added a modalPanel to add some extra inventory-specific
                      values and an a:commandButton to both fill in the card to be
                      added in the modalPanel-bean and to display the modal-panel.


                      Here is my code for the modalPanel:


                      <rich:modalPanel id="addCardPopup" resizeable="false" width="500">
                                     <h:panelGrid columns="1" width="100%">
                                          <h:panelGrid columns="1" width="100%">
                                               <a:outputPanel id="addToInventory">
                                                    <a:form id="addToInventoryForm">
                                                         <h:panelGrid columns="2" width="100%">
                      
                                                              <h:outputText value="Card: " />
                                                              <h:outputText id="cardName"
                                                                   value="#{inventoryHome.card.cardName}" />
                                                              <h:outputText value="Number of copies: " />
                                                              <h:inputText id="add" value="#{inventoryHome.add}" />
                                                              <h:inputHidden id="addCardId" value="#{inventoryHome.addCardId}" />
                                                              <a:commandButton id="addToInventoryButton" value="Add Card"
                                                                   action="#{inventoryHome.addCard()}"
                                                                   onclick="Richfaces.hideModalPanel('addCardPopup')" />
                                                         </h:panelGrid>
                                                    </a:form>
                                               </a:outputPanel>
                                          </h:panelGrid>
                                          <h:commandButton value="Close"
                                               onclick="Richfaces.hideModalPanel('addCardPopup')" />
                                     </h:panelGrid>
                                </rich:modalPanel>


                      And here is the code for the button (as part of a rich:dataTable):



                                          <h:column rendered="#{identity.loggedIn}">
                                               <f:facet name="header">Inventory</f:facet>
                                               <a:form>
                                                    <a:outputPanel id="addCardPopupPanel">
                                                         <a:commandButton value="Add..." reRender="addCardPopup"
                                                              oncomplete="Richfaces.showModalPanel('addCardPopup', {})">
                                                              <a:actionparam name="card" value="#{card.id}"
                                                                   assignTo="#{inventoryHome.addCardId}" />
                                                         </a:commandButton>
                                                    </a:outputPanel>
                                               </a:form>
                                          </h:column>
                      


                      • 8. Re: rich:modalPanel: How to send parameters
                        Bram - Newbie

                        I've noticed that when not filtering anything (using the
                        seam-generated search-form) the modalPanel pops-up fine
                        (well, almost always), but as soon as I enter some search-criteria
                        and filter the resultlist, the modalPanel almost never pops-up.
                        Sometimes though, it does.

                        • 9. Re: rich:modalPanel: How to send parameters
                          Bram - Newbie

                          Okay, it seems like the a:actionparam was causing some trouble,
                          although I don't know why (and why, sometimes not...?).


                          I've changed the button to set the parameter itself instead of
                          using the actionparam-tag, which appears (fingers crossed) to
                          solve the problem:


                                                             <a:commandButton value="Add..." reRender="addCardPopupGrid"
                                                                  ajaxSingle="true" action="#{inventoryHome.setAddCardId(card.id)}"
                                                                  oncomplete="Richfaces.showModalPanel('addCardPopup', {})">
                                                             </a:commandButton>
                          


                          • 10. Re: rich:modalPanel: How to send parameters
                            Michal Belicek Newbie

                            You have to rerender modalPanel, not div to get it working. I tried to rerender div, but it did not work :-)