rich:modalPanel: How to send parameters

[rituraj_tiwari]

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?

[damianharvey.damianharvey.gmail.com]

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.

[rituraj_tiwari]

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

[damianharvey.damianharvey.gmail.com]

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:'[e-mail]'})

Cheers,

Damian.

[rhephner]

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

[rituraj_tiwari]

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.

[x_engendro]

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!

[bram]

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>

[bram]

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.

[bram]

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>

[mbelicek]

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