Displaying and Rerendering a RichFaces ModalPanel from a commandLink

Home/Java/JBoss/Seam/Displaying and Rerendering a RichFaces ModalPanel from a commandLink

Let’s say that when a user clicks on something, perhaps selecting something from a DataTable or DataGrid, you want to call some server side code, and then popup a modal panel which needs to show content based on the new state setup by your server side call. In my case I have a DataGrid showing a number of items, and when a user clicks on an item I want to set the current selected item on a Seam component on the server, and then popup a modal panel to display detailed information about the item, and provide the user some actions within the modal panel.

Looking at the solution it seems so simple, but for some reason it took me hours of trying different combinations, orders, tags, JavaScripts, etc… before I could get this to work correctly. I had the panel appearing with the old data, or appearing with the old data and then disappearing completely, only to show the so called new data the next time I clicked on an item, or rendering on the page itself below the footer, or not popping up at all, or popping up with null data, or…. So I’m posting it up here for myself and anyone else who runs into issues.

First, create your modal panel (rich:modalPanel). I do this in a separate .xhtml file, as I will use the same model panel in various pages throughout the site. In your modal-panel.xhtml file (or whatever you choose to name it), start with a <ui:composition> tag, define your RichFaces xml namespace (and any other JSF libs you’ll be using), and then setup your <rich:modalpanel>

You need to give the modalPanel a unique id, in this case we’ll call it “myModalPanel”.

<rich:modalpanel id="myModalPanel" autosized="true" zindex="2000">

Inside your modalPanel tag, you need to define an inner div. This is the div which you will be rerendering after the server action is complete. I use tags, as I’m using Seam. Ensure that any references to backing beans or data that you want refreshed are within these div tags. You must give this div a unique id as well, in this case we’ll call it “myModalDiv”.

<s:div id="myModalDiv">

The one limitation that I’ve run into here, and if you know how to solve this, please let me know, is that the <f:facet> tags for your header text and controls can’t be inside this div, and you can’t put the div around the whole modalPanel (or it makes the panel disappear when you rerender). As such you can’t make anything from the <f:facet>s be updated on rerender. This is preventing me from having the modal panel header displaying the current selected item’s name. Not great, but not the end of the world.

So inside this div you have your dynamic output. I have lots of <h:outputtext value="#{backingBean.selectedItem.property}"> type entries in mine.

On your actual page where you will be displaying the modal panel from you need to include the modal-panel.xhtml file, I use a:

<a:include viewid="/modal-panel.xhtml">

Then, I have my page, which includes a rich:dataGrid, and inside it has an <a:commandLink> which creates the AJAX clickable item. This commandLink has to call the backend action, display the modal panel, and rerender your div.

<a:commandlink id="showItem" action="#{backingBean.setSelectedItem(item)}" oncomplete="Richfaces.showModalPanel('myModalPanel',{width:550, top:200});" rerender="myModalDiv">
Click Here!
</a:commandlink>

This makes the panel display, and then the new content is rendered in the panel. It seems to work just how I wanted it to. With the minor annoyance of having to use a static modalPanel header.

By | 2017-05-18T15:18:15+00:00 March 4th, 2008|Seam|83 Comments

About the Author:

83 Comments

  1. HugoZ March 9, 2008 at 4:27 pm - Reply

    Hi,

    I just faced a similar problem, and used a similar solution, with a panelGrid instead of a div. I could not use any parameter in my commandLink action, I dont know how you got this working (action=”#{backingBean.setSelectedItem(item)}”). I had to call a method without parameter, and get the selectedItem from the backing bean.

    To update the modalPanel header, simply add an ID to the header outputText (or other elements), and add this ID to the rerender attribute on your commandLink :


    (…)



    Click Here!

  2. Devon March 9, 2008 at 6:49 pm - Reply

    Looks like WordPress ate some of your code there, sorry about that.

    Thanks for the info on the id in the header. Totally missed that one and it works perfectly! Thanks!

    Being able to pass params in the action is a JBoss EL feature, not available in normal EL. I’m using Seam on JBoss so it’s available for me.

  3. Richard March 11, 2008 at 12:55 am - Reply

    Hi,

    Thanks a lot for the great tip.
    I have tried using h:inputText inside the modal div , but the modal panel renders it without a value but using
    h:outputText renders the value quite correctly.
    Have you tried such a scenario?

    (am using Seam)
    Cheers

  4. Devon March 11, 2008 at 11:52 am - Reply

    Richard,

    I haven’t tried using inputText inside the modal yet. I may need to do that in the near future though. I’m not sure why it wouldn’t work though… Hmm. I’ll reply back if I am able to get it to work.

  5. Gerson March 13, 2008 at 5:18 pm - Reply

    The following JSF component organization is working for me. This organization enables the controls facet in the modal panel.

    Link to invoke the modalPanel:

    <a4j:commandLink
            action="#{backingBean.setSelectedItem(item)}"
    	onclick="javascript:Richfaces.showModalPanel('editSecurityGroup',{width:450,height:470})"
    	reRender="editSecurityGroupForm">
    	<h:outputText value="#{messages['action.add']}" styleClass="linkText"/>
    </a4j:commandLink>
    

    And now the ModalPanel, same aproach as yours, in a different xhtml page:

    <ui:composition 
    	xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:s="http://jboss.com/products/seam/taglib"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:rich="http://richfaces.org/rich"
    	xmlns:a4j="http://richfaces.org/a4j">
    	
    	<rich:modalPanel id="editSecurityGroup">
    	
    		<f:facet name="header"> 
    				<h:outputLabel value="#{messages['maintainSecurityGroups.securityGroup']}"/> 
    		</f:facet>
    		
    		<f:facet name="controls">
    				<h:graphicImage value="/img/icons/xtiny/close.png" styleClass="linkImage"/>
    		</f:facet>
    	
    		<h:form id="editSecurityGroupForm">
    			PLEASE PUT YOUR COMPONENTS HERE !
    		</h:form>
    				
    	</rich:modalPanel>		
    
    </ui:composition>
    

    And the way I am including the modalPanel inside the main page. Note that I am using two different forms one for the main composition and one for modalPanel. The following inclusion can not be done inside the main form, because a know nested form in some broswer (i.e. Internet Explorer)

    <ui:include src="/security/dialog/editSecurityGroup.xhtml" />
    

    Hope this helps.

    Greetings from Ecuador

  6. Rich Hephner March 14, 2008 at 12:00 pm - Reply

    Hi all,

    I’m having a similar problem with a datatable and stumbled across this blog. I have a rich datatable with each row as a “match” object. Each match has a “nodeId” property. I need to be able to click on each row and have that nodeId show up as part of a modalPanel.

    I’m using a rich component control to try to accomplish this:

    <rich:componentControl event="onRowClick" for="assignmentPanel" operation="show">
    	<f:param value="#{match.nodeId}" name="nodeId"/>
    </rich:componentControl>
    

    Where assignmentPanel is my modal dialog. It’s patterned after this demo:

    http://livedemo.exadel.com/richfaces-demo/richfaces/componentControl.jsf?c=componentControl

    but doesn’t work at all for a Modal. Instead of displaying the proper nodeId, it displays {nodeId} Any ideas? Thanks.

  7. Devon March 14, 2008 at 12:25 pm - Reply

    Hi Rich,

    can you post the rest of your xhtml code including the modal panel? I can’t promise I’ll know the answer, but I’m happy to take a look at it!

    Devon

  8. Gerson March 15, 2008 at 9:14 am - Reply

    Hi rich,

    Tell me are you working with EntityHome components?. If it is like that, The only thing you have to do is send the corresponding param that will be the entityId in the EntityHome component. This will tell that component which component is being

    <a4j:commandLink onclick="javascript:Richfaces.showModalPanel('editSecurityGroup',{width:450,height:470})" 
    			 title="#{messages['tip.editSecurityGroup']}" 
    			 reRender="editSecurityGroupForm">
    		<h:outputText value="#{messages['action.edit']}" styleClass="linkText"/>
    		<s:conversationPropagation type="begin" />
    		<f:param name="securityGroupId" value="#{securityGroup.id}"/>
    	</a4j:commandLink>
    

    But, I discovered that the problem could be due to one of these things:

    The conversations are not well managed: Check the complete conversation stablished in the user transaction and the begin and end points. Usually when you have a table and after one action Edits the selected object the right place to begin the conversation is inside the action. -Check the attached post-
    Check the components order inside the panel form, If you switch the order of the form with the modalPanel components in the xhtml page that panel won’t work. That was making me nuts almost for a complete day.

    Let me know how are you going.

    Cheers

  9. David March 15, 2008 at 4:57 pm - Reply

    Hi Devon,

    You mentioned that you wanted to know how to update the text inside the <f:facet&gt tag. The following code works in my web app:
    <f:facet name=”header”>
      <a4j:outputPanel ajaxRendered=”true”>
        <h:outputText value=”#{myVar}”>
      </a4j:outputPanel>
    </f:facet>

    I hope this helps.

    ~David

    • Ziyang October 28, 2010 at 8:36 am - Reply

      Hi,
      I think is the best solution!!!

      • Ziyang October 28, 2010 at 8:41 am - Reply

        Hi Devon,
        This is a perfect blog, and I met with the same issue.
        But simple (div) and (panelGrid) does not work for me. But (a4j:outputPanel) works great!!!
        I tested the above the 3 ways in a piece of code. div and panelGrid will show the old data, only a4j:outputPanel show the updated data. Can you point out why this happened to me? Thanks a lot! Great blog!!!

        (rich:column)
        (a4j:commandLink id=”link” action=”#{SortableTable.sayHi}” oncomplete=”#{rich:component(‘panel’)}.show()” rerender=”myModalDiv, myModalPanelGrid”)
        (f:param name=”name” value=”#{row.name}” /)
        Show Modal Panel
        (/a4j:commandLink)

        (rich:modalPanel id=”panel” width=”350″ height=”100″)
        (f:facet name=”header”)
        (h:outputText value=”Modal Panel”)(/h:outputText)
        (/f:facet)

        (f:facet name=”controls”)
        (h:panelGroup)
        (h:commandLink value=”aaa” id=”hidelink”/)
        (rich:componentControl for=”panel” attachTo=”hidelink” operation=”hide” event=”onclick”/)
        (/h:panelGroup)
        (/f:facet)
        (h:panelGrid id=”myModalPanelGrid”)
        (h:outputText value=”#{SortableTable.content}”)(/h:outputText)
        (/h:panelGrid)

        (div id=”myModalDiv”)
        (h:outputText value=”#{SortableTable.content}”)(/h:outputText)
        (/div)

        (a4j:outputPanel ajaxRendered=”true”)
        (h:outputText value=”#{SortableTable.content}”)(/h:outputText)
        (/a4j:outputPanel)
        (/rich:modalPanel)

        • Devon October 28, 2010 at 12:35 pm - Reply

          In my app, I’m using Seam’s s:div tag, which adds support for the JSF AJAX based reRender. You can’t reRender normal divs as they don’t have any JSF component and AJAX support backing them up.

          If you aren’t using Seam, then you should do exactly what you’re doing now: use the a4j:outputPanel to wrap your content you wish to reRender. One thing to keep in mind is if you want to wrap blocks/divs you should specify the layout=”block” attribute in the outputPanel tag to make it a div instead of the default span (nesting a div inside a span can cause issues).

        • Ziyang November 7, 2010 at 8:19 pm - Reply

          Hi Devon,
          Now I’m only using RichFaces. After reading your post, I think it’s a good idea to use Seam too. But how could I configure Seam into my current RichFaces project? Could you please give some resources or advices? I appreciate it very very much!
          Thanks,
          Ziyang

  10. Devon March 15, 2008 at 10:58 pm - Reply

    David:

    thanks! Working on Hugo’s advice what I ended up doing is this:

    <rich:modalPanel id="pictureModal" autosized="true" zindex="2000">
    	<f:facet name="header">
    		<h:outputText id="pictureHeader" value="#{selectedImage.image.getDisplayHeading(100)}" />
    	</f:facet>
    ...
    

    and then my command link looks like this:

    <a:commandLink id="showImage"
    	action="#{selectedImage.setImage(image)}"
    	oncomplete="Richfaces.showModalPanel('pictureModal',{width:760, top:200});"
    	reRender="test,pictureHeader">
    ...
    

    Which works great! But using an a4j output panel is a cool approach as well!

    Thanks!

    Devon

  11. Chandra June 10, 2008 at 8:56 am - Reply

    I am new to JSF and had been trying to have a textbox in modalpanel which when typed should update the other textboxes in the same modalpanel. I have got sum examples in the http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support site and they seem to work perfectly. But when I place the same code in my modalPanel the server doesnt seem to understnad that there is indeed a textbox in the modalPanel. I am struggling with this for a day now and am running out of ideas. Any ideas or suggestions.

  12. Devon June 10, 2008 at 8:59 am - Reply

    @Chandra:

    can you provide your code and the errors? Either post here or just e-mail them to me: devon@digitalsanctuary.com and I’ll be happy to take a look.

    Devon

  13. Chandra June 11, 2008 at 8:49 am - Reply

    Devon ,

    I think I missed the most important point you have mentioned in your blog, that the modalPanel should be in a different jsp (or a diff form) than the parent jsp. I fixed it by creating a new JSP for the modalPanel.

    Thanks

  14. Devon June 11, 2008 at 11:06 am - Reply

    @Chandra:

    I’m glad to hear you have it working!

    Devon

  15. Chandra June 11, 2008 at 2:37 pm - Reply

    I am having other issue now. Not sure if its related to this blog but I hope someone could help me.

    When I enter a value in one of the textboxes in my modalPanel, the other textboxes modalPanel needs to be updated.

    I am writing a cutomtag to loop through my hashMap and get the values for the inputText.
    my loop:index is the “key” for each loop.

    HtmlInputText inputText = getHTMLInputTextObject(context,index, bean);
    HtmlAjaxSupport ajaxSupport = getAjaxSupport(context,index, bean);
    
    protected HtmlInputText getHTMLInputTextObject(FacesContext fc,
    			String index, MyPresenceBean myPresence) {
    		
    		HtmlInputText inputText = new HtmlInputText();
    
    		inputText.setId(index);
    		String value = (String) myPresence.getSelectedUoms(index).toString(); // gets the value for the key
    		String bind = "#{serviceRegBean.myPresence.uoms[" + index + "]}"; //uoms is my hashMap
    		inputText.setValueBinding("value", fc.getApplication().createValueBinding(
    				bind));
    	    inputText.setValue(value);
    		return inputText;
    
    	}
    

    This code doesnt call the onkeyUp event of the a4j support when I have a valueBinding in the InputText. So when I type in the textBox no event is called.

    When I change the code for the getHTMLInputTextObject to

    protected HtmlInputText getHTMLInputTextObject(FacesContext fc,
    			String index, MyPresenceBean myPresence) {
    		
    		HtmlInputText inputText = new HtmlInputText();
    
    		inputText.setId(index);
    		String value = (String) myPresence.getSelectedUoms(index).toString();
    	
    	    inputText.setValue(value);
    		return inputText;
    
    	}
    

    This seem to be working perfectly but I cant really bind the value to the bean this way.

    Why doesnt the HTMLAJAXSupport event get called when we have ValueBinding for the inputtext? Hope I am making sense.

  16. Devon June 11, 2008 at 4:21 pm - Reply

    @Chandra:

    Now you have me stumped:) I have no idea what to advise. Maybe someone else who reads this blog will..

    Devon

  17. Chandra June 12, 2008 at 8:27 am - Reply

    I think I found my way again with this. I created a collection of NameValuePairs and looping through them in the JSP with dataGrid.

    But yeah in my 2 days with JSF, I have learned the tweaks.

    Thanks..

  18. anut June 15, 2008 at 2:35 am - Reply

    Gerson you save my life man!!! By your post, I could solve my disappointing problem with modal panes. wowww..

  19. halley June 27, 2008 at 3:21 pm - Reply

    I am trying to use a modal panel wich has a lot of data to display… no matter what i try half of the panel is cut off the other half is below the page, I can drag it up to see everything. My only best guess is that it automatically centers the panel in the middle of the screen. This would be great if I only have a little bit of info. Does anyone know what I am doing wrong? How do I get it load in the position of the screen I want?

  20. Devon June 27, 2008 at 3:31 pm - Reply

    @Halley:

    If the problem is that the modal is too big for the screen, this helps:

    I put these two script tags near the bottom of my rich:modalPanel:

    <script>   document.getElementById('imageDisplayArea').style.height=f_clientHeight()-100+'px'  </script>
         <script>document.body.onresize = function (){     document.getElementById('imageDisplayArea').style.height=f_clientHeight()-100+'px'}</script>
    

    just replace “imageDisplayArea” with a the main div containing the rich modal contents. This should set the modal panel size to be 100 pixels less than the client screen size, and should resize the modal when the user resizes their browser window (for browsers which throw a resize event).

    If you want a scrollbar if the data is too big for the modal, you’ll want to set the style of that containing div to:

    style="overflow:auto"
    

    If the issue that it’s appearing too low on the page, but isn’t too small, you should be able to set the location it appears at when you call showModalPanel:

    Richfaces.showModalPanel('pictureModal',{width:760, top:20});
    
  21. VJ July 16, 2008 at 7:05 am - Reply

    I am doing something very similar – using RichFaces 3.1.5 GA, but the modal panel does not get invoked. I have tried onclick, onmousedown, oncomplete etc, but nothing works. Any help would be appreciated.
    Here are the code snippets:
    Seperate xhtml file for modalpanel which contains the foll. code:
    —————–

    —————————
    To invoke from main page, I have the foll.

    Would like to get any feedback on the modal panel not coming up.
    Thanks,
    VJ

  22. Devon July 16, 2008 at 7:50 am - Reply

    VJ,

    it looks like wordpress ate your code, sorry. Please feel free to e-mail me the code directly and I will see if I can help.

    Regards,

    Devon

  23. VJ July 16, 2008 at 7:56 am - Reply

    The code did not display ( so will paste it here).
    VJ

  24. Devon July 16, 2008 at 7:59 am - Reply

    Please e-mail it to me, wordpress keeps eating it.

    devon@digitalsanctuary.com

  25. Col August 25, 2008 at 5:23 pm - Reply

    I am a bit new to this and am trouble getting it working… the main reason the examples don’t work for is that I am not using seam.

    So the #{backingBean.setSelectedItem(item)} doesn’t work for me. How do I go about getting this working without seam?

    I have looked at the a4j:actionparam, but have not made this work properly.

    Any help appreciated.
    Regards
    Col

  26. Devon August 25, 2008 at 6:09 pm - Reply

    @Col: Honestly I’ve never used JSF without Seam, so I can’t help you. Perhaps another blog reader can?

  27. Col August 25, 2008 at 7:00 pm - Reply

    Here’s hoping :-)

  28. alan September 21, 2008 at 8:37 pm - Reply

    Hello all,
    I have a question regarding modalPanel et rerendering.
    From a main page containing a richfaces dataOrderedList, a commandbutton opens up a richfaces:modalPanel containing a orderinglist(a subset of the parent collection). The desired behaviour is that a orderchange in the orderlinglist of the modalpanel updates the order of the elements in the parent page.
    Does richfaces allow that? Thanks for your help.
    Here is my code :

    .pic {
    margin-bottom: -4px;
    margin-right: 2px;
    }

    #{item.label}

    Sort selected users

    Currently Active Items

    Name
    #{items.label}

    uri (present)
    #{items.iconURI}


    Close

    Save

  29. ysl October 15, 2008 at 4:31 am - Reply

    hi,
    when i insert input text into modalpanel and get the the value in the input text to my bean property it always returns null,
    any solutions?
    thanks

  30. Brunda October 15, 2008 at 6:50 am - Reply

    Have the same kind of problems.

    I am able to open the modal window, but want 2 close it on a4j:support oncomplete event.

    For some reason it doesnt tend 2 wrk.
    can u please help me.
    here is the code.

  31. Devon October 15, 2008 at 6:55 am - Reply

    @Brunda: The code got eaten by the comment system, sorry:(

    Can you e-mail it to me? devon@digitalsanctuary.com

    @YSL: can you send some code that isn’t working? I’ve never had issues where form values don’t submit correctly from a modal panel.

  32. jmb October 21, 2008 at 11:55 pm - Reply

    Hi,

    sorry to revive this thread but I’ve a an issue which is sort of related to one of the comments here about ajaxSupport.

    I have successfully built a composite component which is completely designed in java rather than a template (many reason, don’t want to bore you). Upshot is that a dev can simply put <gls:Search ..attrs../> on their page to get a complete panel which provides search capabilities.

    OK, enough history.

    My problem is that I want to use a <a4j:commandButton> to submit the form so we can rerender only the component the search is directed at.

    In the Search component initialisition code i have

    HtmlAjaxCommandButton button = ( HtmlAjaxCommandButton )context.getApplication().createComponent( HtmlAjaxCommandButton.COMPONENT_TYPE );
    button.setId( “searchButton” );
    button.setValue( “Search” );
    button.setOnclick( (String )getAttributes().get( “onSearchClick” ) ); //javascript to run when clicked
    button.setOncomplete( (String )getAttributes().get( “onSearchComplete” ) ); //javascript to run after complete
    button.setAction( app.createMethodBinding( “#{” + backingBean + “.submitSearch}”, null ) );

    This button only works once…and I’m complete stumped.

    Putting the <a4j:commandButton> as a hidden child of the <gls:Search ..attrs../> on a jsp/xhtml page and calling .click() using javascript works fine everytime.

    Anyone have any idea why the a4j button isn’t submitting after subsequent keypresses when it is added programmatically ?

    btw…it’s just about relevant to this blog entry as I’m trying to do the same thing from a rich:modalPanel with the same issue.

  33. Val November 17, 2008 at 12:42 pm - Reply

    Thanks for the nice post… I am very much new to this…. Please help what can be trick….

    Parent window have some form fields, I am able to open a model panel from parent form…

    a) When I click “Save” in model panel, parent form fields becomes null…

    b) My purpose is to allow user to fill some filed (like panelText1) in model panel and on clicking Save I can show the value entered in model panel in the parent form (s:label id=”valueFromModelPanel”….)
    Please help what can be trick….

    <h:form id="project" styleClass="edit">
    <h:inputText id="projectCode" required="true" value="#{projectHome.instance.projectCode}"/>
    <h:inputText id="projectName" required="true" value="#{projectHome.instance.projectName}"/>

    ... other fields

    <s:label id="valueFromModelPanel" value="#{xxxxHome.instance.value}"/>

    <h:outputLink value="#" id="link">
    Show Modal Panel
    <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
    </h:outputLink>
    <h:form>

    <rich:modalPanel id="panel" width="350" height="100">
    <f:facet name="header">
    <h:panelGroup>
    <h:outputText value="Modal Panel"></h:outputText>
    </h:panelGroup>
    </f:facet>
    <h:outputText value="This panel is called using Component Control Component"></h:outputText>
    <br/>
    <h:panelGroup>
    <h:form>
    <h:inputText id="panelText1" required="true" value="#{xxxxHome.instance.value}"/>
    <s:link value="Save" style="cursor:pointer" id="hidelink"/>
    <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
    </h:form>
    </h:panelGroup>
    </rich:modalPanel>

  34. Murali March 16, 2009 at 1:33 pm - Reply

    Hi,
    I am trying to implement this solution.
    But i am facing one issue.

    My action method for a commandLink is not getting invoked if i use it in a dataTable.
    what could be the problem.

    Thanks
    Murali.

  35. Devon March 17, 2009 at 7:20 am - Reply

    @Murali: have you looked at this: http://typo.ars-subtilior.com/articles/2007/02/07/jsf-datatable-and-commandlink

    It sounds like it may be the cause of your problem.

    Regards,

    Devon

  36. Himanshu Goyal April 24, 2009 at 3:40 am - Reply

    Hello folks,

    I also ran into the same problem, where my modalPanel was not displaying the updated data on reRender, Any components on the main page was updated where as none of the elements of modalPanel was displaying required data.
    I spent 2 days trying silly things and also trying putting my modal Panel in a separate JSP as adviced and then including it back to the main JSP. However that doesn;t helped.

    Lastly I could find that the root cause of this problem is the place where I defined/included the modalPanel. It need not be in separate file.. just need to place outside of all the tags as defining modalPanel inside a dataTable was creating multiple instances of it and because of it neither it was reRendering properly, nor giving any exceptions to help finding the cause.

    Here is a sample snippet from a very nice book “Practical Richfaces”.. Finally I got it working..
    Also there is no restriction that it doesn;t works for “a4j:commandLink” invoking method with parameters or not..

    <h:form>
    <h:dataTable value=”#{airlinesBean.airlines}” var=”airline”>
    <h:column>
    <f:facet name=”header”>
    Edit
    </f:facet>
    <a4j:commandLink value=”View” onclick=”#{rich:component(‘modalPanel’)}.show()” reRender=”airlineInfo”>
    <f:setPropertyActionListener value=”#{airline}” target=”#{airlinesBean.selected}” />
    </a4j:commandLink>
    </h:column>
    <h:column>
    <f:facet name=”header”>
    Name
    </f:facet>
    #{airline.name}
    </h:column>
    <h:column>
    <f:facet name=”header”>
    Code
    </f:facet>
    #{airline.code}
    </h:column>
    </h:dataTable>
    </h:form>

    <!– Modal panel must not be defined inside dataTable or any other components which iterates more than once, If so modal panel do not reRender well. Best is to define modal panel outside of all your controls–>

    <rich:modalPanel id=”modalPanel” width=”250″ height=”150″>
    <f:facet name=”header”>
    Airline Information
    </f:facet>
    <f:facet name=”controls”>
    <h:graphicImage value=”/modalPanel/close.png” style=”cursor:pointer”
    onclick=”#{rich:component(‘modalPanel’)}.hide()” />
    </f:facet>
    <h:panelGrid id=”airlineInfo” columns=”2″>
    <h:outputText value=”Name:” />
    <h:outputText value=”#{airlinesBean.selected.name}” />

    <h:outputText value=”Code” />
    <h:outputText value=”#{airlinesBean.selected.code}” />
    </h:panelGrid>
    <a href=”#” onclick=”#{rich:component(‘modalPanel’)}.hide()”>Close</a>
    </rich:modalPanel>]–>

    Hope this helps… Best of luck.

  37. Jeremy Goodell April 24, 2009 at 8:51 pm - Reply

    I’ve been trying to solve this problem for a couple weeks. I even asked the person who gives the RichFaces webinars for RedHat. He hadn’t heard of this problem. So, I read this post and all of the comments with great interest, and then tried a bunch of the suggestions, but I still couldn’t get it working right.

    I finally found the source of my problem. I had required=true on one of the input text fields on the modal panel. It seems that it was trying to validate the fields before the modal panel was even displayed. Also, it seems that I need to initialiize the bean that I use on the modal panel when the page is loaded (or at least before the call to the a4j:commandLink action.

    I still don’t really understand the complete details of this. But, just as an added thing to look out for, if you have a modal panel with input fields, don’t try to validate them in the normal fashion.

  38. Jeremy Goodell April 24, 2009 at 9:36 pm - Reply

    I spoke too soon — now I can’t seem to get the input fields in the modal panel to populate the corresponding backing bean properties. I’m thinking there must be some trick to the hiding of the form (or the action performed before hiding). Something needs to happen to get the field setters to be called.

    Interestingly enough, if I change the modal save button to an h:commandButton, then I think it’s doing the correct save. I’m not 100% sure about that though.

  39. Jeremy Goodell April 25, 2009 at 3:02 pm - Reply

    I’ve made a request that the RichFaces people add a sample showing how to do this. There are no examples in the Developer’s Guide or the Live Demo showing how to use a modal panel to get user input that is then reflected on the underlying page. It seems that your blog entry and the subsequent comments show that it is a common problem for people to not be able to get their backing bean data to show up on a modal panel, and then it is also a problem to get data input on the modal panel back into the backing beans.

    Max Katz from Exadel told me that it’s quite straightforward and is just a matter of understanding “the lifecycle, when the actions are invoked, when rendering happens, etc. ”

    I find this entire issue to be anything but intuitive. However, a very simple example on the live demo page would do wonders to alleviate a lot of misery.

  40. Jeremy Goodell April 27, 2009 at 12:56 pm - Reply

    Ok, this will be my last comment on this subject.

    Max Katz from Exadel provided me with a link to a tutorial he wrote on just this subject. It covers just about everything in the initial blog post as well as most of what people have discussed in the comments. I was able to get my modal panel working perfectly — it allows add and/or edit of data from the underlying panel. The main thing I was missing was that the modal panel has to have its own form. Seems obvious now, but I wasn’t thinking about it because my form is defined in a template view, so there’s not even any form tags in my regular xhtml files.

    Here’s the tutorial: http://java.dzone.com/articles/an-introduction-to-jboss-richf

    And, here’s a link to Max’s book Practical Rich Faces: http://www.apress.com/book/view/1430210559

    If you have any problems with the tutorial, Max is real good about answering comments and emails.

    Jeremy

    • Devon May 3, 2009 at 2:33 pm - Reply

      Jeremy,

      thank you very much! That’s really helpful!

      Devon

  41. Alperen July 26, 2009 at 11:21 pm - Reply

    Hi Devon,

    i have a similar problem and i could not find a solution yet.

    i have a CRUD page. Items are listed in rich:dataTable each item has update and delete actions. also new records can be created. I used rich:modalPanel for create and update operations.
    Problem is;
    first i open rich:modalPanel ,enter data and get some validation errors then i close the modalPane.
    After that whenever i open modalPanel the values that i entered before remains in h:inputText fields.

    i tried to put clearInstance methods to all related actions to clear the current record instance. not succeded.

    Do you know how to solve the problem?

    • Devon July 27, 2009 at 6:44 am - Reply

      Alperen, you could clear our the fields using JavaScript pretty easily, which might be the simplest approach.

  42. Klaus Schuster September 17, 2009 at 10:18 pm - Reply

    Hi,

    I am not using seam too.
    My extended problem was, that I needed to get some data after the click on the modal panel button, into my backing bean. Then showing the modal panel with new data.
    So I tried several times using the a4j:actionparam without any solution, because when I clicked, the Modal Panel popuped, then the setter of the backing bean was called, and finally the Modal Panel dissapeard, because the a4j:actionparam made an page update.
    So the reason I could made was the following:
    I used the a4j:commandlink with an special id, and a reRender with an Id of the h:panelGroup wich contains the data shwon in the modal panel. In my a4j:commandLink I have an a4j:actionparam.
    like:

    the modal panel:

    Now all works fine, I click the a4j:commandlink, the dynid is updated in my backingBean (setDynId). After that the modal panel is shown, and a few seconds later, the data is refreshed.

    Perfekt!

    • Bharat April 19, 2010 at 3:03 pm - Reply

      can you please submit your code.. just how you pass the parameter..?

  43. Nikolai October 3, 2009 at 4:43 am - Reply

    Hi!
    i have similar problem but i have 2 different backing beans. If main page and modal panel use one the same backing bean then everything is fine. But when main page is managed by one bean and the form on panel uses another one then nothing works. I mean that rerender doesn’t happen: you can’t fill the panel and if you did some action there and it redirected to another page then only this page will appear when you try to open modal panel again not the page it’s meant to be shown. Is there any solution for this problem?

  44. Venkatesh November 30, 2009 at 2:11 am - Reply

    I am using modalPanel in my appication.
    I am poping up a modalPanel when I click on a button.
    When I click on a button the modalPanel is poping up the dialog and I am every thing is able to see properly.
    But when I give print the information on the modalPanel and the parent is getting mixed.
    I am not able to see the information properly.
    I do not know why this modalPanel is transparent.
    I am sending my code. Please cheak this and resolve my issue

    • Devon November 30, 2009 at 11:13 am - Reply

      Venkatesh:

      I haven’t tried printing pages with modals before. How do you want it to print? You might try a print CSS to display things the way you want? Not sure…. Best of luck!

  45. Mike December 4, 2009 at 1:01 pm - Reply

    This was very useful info for me – thanks to all who posted here.

  46. Alex December 21, 2009 at 3:42 am - Reply

    Great post! For those who have problems with JSF 1.2 and RichFaces (EJB 3.0…)

    JSF 1.2 RichFaces: It helps to wrap the panel Value in a h:panelGroup which can be reRendered.
    Also the commandLink needs to be a

    MyOpenLink

    //Panel Value…

  47. Giovax December 22, 2009 at 1:39 pm - Reply

    Hi, great post!!

    I’m working with jsf, richface, a4j for first time and i have a little problem.

    In the jsp page i have a rich calendar, when a date is clicked i need go to the bean and make a verification, with this result its necesary present a model panel with 2 options, and i dont know how ti do that… just show de model panel according to the result of the caling method of the bean….

    PLEASE HELP ME!!!!!
    Sorry for my bad english

  48. Prasad January 12, 2010 at 1:19 am - Reply

    Hi,

    I have a similar issue, for me modelapanel opens up but on click of the buttons placed on the modalpanel, the form is not getting submitted.

    • Devon January 12, 2010 at 8:57 am - Reply

      Is your form (h:form) defined inside the modal?

  49. Srinadh January 20, 2010 at 11:26 am - Reply

    Even am facing the same issue. Form is not getting submitted.

  50. Bharat April 19, 2010 at 3:00 pm - Reply

    I have problem in refreshing the form back to initial state (empty state) after calling ..Home.persist and reRender the form. In the components.xml I am using event …Success and then calling clearInstance method on the ..Home object. But still no use.

    This form is initialized properly with empty data if I use redirect to the page itself.

    But I want to use ajax and initialize the form fields after reRender…

  51. VK May 6, 2010 at 11:20 pm - Reply

    can you explain with the example..Iam displaying data through modal panel and cannot pass the data when action is called..telling java.El exception…

    • Devon May 7, 2010 at 7:33 am - Reply

      VK: sorry that’s not nearly enough info to help…

  52. Chamila September 4, 2010 at 3:06 am - Reply

    Hi Devon,
    I wanted to dynamically load an image to a model panel and display it. I’m not sure how I can pass the url of the image dynamically(i.e if when user clicks on the thumbnail of the image the original image should be displayed). Can you please help me on this?

    Thank You,
    Chamila

    • Devon September 7, 2010 at 6:31 am - Reply

      Chamila,

      you mean you want the full size version of the image to appear in the modal? I’ve done exactly that and it’s pretty straight forward. Just use the example code in this posting, and have your backing bean hold the selected image: backingBean.setSelectedImage(image) and then in the modal reference the image path. How you represent the image location is up to you, you could just path the raw path in, or if you have the images managed by your application you can build a constructed path using data from your image item, or reference a servlet path that will serve back image data from the DB.

      In my usage I’m using application managed images (i.e. uploaded by users or generated from videos) which are handled by a servlet, so I reference the full size image within the modal like this:

      <img src="#{facesContext.externalContext.requestContextPath}/image/#{backingBean.selectedImage.id}.jpg" />

      Where /image/ maps to my servlet.

      If you’re just referencing an image on the file system you can pass the full image path to the backing bean and just include that.

      Make sense?

      Devon

  53. Sourad November 26, 2010 at 12:49 am - Reply

    Hi Devon,
    I want to pass a radio button value from my modalPanel page to bean.However I am not able to pass the same.
    My code for the modalPanel page is as follows:

    The backing bean method is getting invoked but the radio button value is not getting passed.

    • Devon November 27, 2010 at 8:04 am - Reply

      It looks like my comment system is eating all your markup. Can you either escape it or just e-mail it to me?

      Also: anyone know how to make WordPress comments NOT eat markup?

  54. Jan-Martijn Wijnholds February 15, 2011 at 5:34 am - Reply

    HI Devon,

    The ‘problem’ you mentioned in you blog of the static content you can’t control dynamicly can be solved.

    I have a solution where my size ( with and height) is variable, the same for the title and an include.

    If you are interested I will post i’t on my blog ( in English ofcourse).

    Greetz,

    Jan-Martijn Wijnholds

    • Ron Rickard September 29, 2011 at 1:08 pm - Reply

      I would be very interested in your solution to this problem.

      Thanks,
      Ron

  55. jacob June 6, 2011 at 5:03 am - Reply

    Hi Devon,

    now I have do determing the popup dynamically rather than above static code, which specifies, when the popup should display.
    I want to decide if the popup should be displayed or not on the action saveOrUpdateServiceContract.

  56. jacob June 6, 2011 at 5:07 am - Reply

    I dont want to use oncomplete=”Richfaces.showModalPanel(‘myModalPanel’,{width:550, top:200});” in the xhtml but can i invoke the popup from the controllers action which backingBean.saveOrUpdateServiceContract

  57. Swathi June 27, 2011 at 2:27 am - Reply

    Hi ,
    I have s:file upload tag in my jsp.and one sx:autocompleter tag.
    if i change the element in sx:autocompleter the ajax to work.
    But the s:file tag is preventing not to work ajax properly.
    Can you give me some idea.Pls…..
    Im trying this for past one week…..
    Thanks in advance.

  58. Maciel November 17, 2011 at 10:14 am - Reply

    Hi Devon,

    I need a help with one situation.
    In my case the bean can open a modal panel or redirect to other bean page.
    The situation of open the modal is ok, but i’m have some problems with the redirection, can you give me some suggestion?

    Thanks and regards.

    • Devon November 17, 2011 at 5:50 pm - Reply

      Maciel,

      what have you tried? What is the issue you’re running into?

      Devon

  59. kiran January 3, 2012 at 3:36 am - Reply

    How to enable ‘modal panel’ component in framework like Vignette portal to resolve modal panel is undefined issue.

    • Devon January 3, 2012 at 5:39 am - Reply

      I’m sorry I don’t use Vignette so I really can’t comment:(

  60. Todd January 24, 2012 at 8:52 am - Reply

    I seem to be having a problem where I get a js error only on the first load of the page or if I clear the browser cache. ‘ModalPanel.Sizer.INITIAL_MIN’ is null or not an object . At first I thought it was my rerender until I changed to rerender the specific outputText id.

    Add/Change feature validation failure

    Strange part is after initially hitting it, there after it works no problem. I’m not using the div but I imagine it won’t matter since I just have the outputText I’m rerendering prior to popping this. Code that shows it is:

    oncomplete=”if(data != null && data != ”){#{rich:component(‘changeFeatureModalPanel’)}.show()};” />

    This part functions fine after reloading the page. I have many other modals experiencing the same thing. I have an older version of modal done this way in another app, on older version of richfaces that seems to work fine. But this version is inside a jetspeed portlet. I tried upgrading to richfaces 3.3.3.Final, but same issue persists.

    Thanks for looking!

    • Todd January 24, 2012 at 8:53 am - Reply

      Looks like it doesn’t like me posting my code snippet. Let me try again with just the important parts..

      Add/Change feature validation failure

      • Todd January 24, 2012 at 8:56 am - Reply

        Guess it’s the greater/less thans:

        rich:modalPanel id=”changeFeatureModalPanel” width=”300″ height=”100″

        f:facet name=”header”>Add/Change feature validation failure

        h:panelGrid columns=”1″
        h:outputText id=”changeFeatureModalText”
        value=”#{changeFeatureBean.changeFeatureValidationMessage}”

        a4j:commandButton value=”OK” reRender=”tab1,fm1″
        onclick=”#{rich:component(‘changeFeatureModalPanel’)}.hide()”

  61. Nasirkhan August 8, 2012 at 1:16 am - Reply

    Hi Devon,

    I have similar architecture as you explained but not sure why modal panel is not getting displayed.. whenever I click on command link page gets adjusted but requested modalPanel is not appearing.. Do I need any specific settings at parent xhtml level?

  62. Yevgeniy January 16, 2013 at 4:20 am - Reply

    Maaan so thanks, I’ve been messing with this ancient poo whole day, and your article saved me :-)

  63. Ravi January 13, 2014 at 4:35 am - Reply

    Hai !

    I want to develop a web page, i have three links like home,about us and contact us so my question is when we click on link one of three but view the linked page in same page by using facelets without forwarding next page. just like tiles framework in struts header and footer could be configured only once but not all web pages. how it is possible///

    • Devon January 13, 2014 at 5:42 am - Reply

      I am sorry but I don’t understand your question:(

  64. Vince November 20, 2015 at 5:39 am - Reply

    Hello.

    I met the same problem and i found a solution. I share my approach :
    With a h:commanlink with f:ajax event or a4j:commandLink who’s open a rich:popupPanel, my h:inputText was never refresh even if it had his value setted.
    I changed it for a classic html input or an outputLabel and the problem disappear. So something went wrong with h:inputText.

    I finally changed my f:ajax by a4j:ajax with thi ID of the popup to render.

    and in my popup :

    So i passed in full a4j behavior, and its works now.
    Hope it can help.

  65. Vince November 20, 2015 at 5:44 am - Reply

    my previous comment did not show the code.
    I repost it in case of :

    The commandlink to open the popup :

    h:commandLink style=”cursor:pointer” id=”recap-id-colonne-decision-manuelle-link”
    action=”#{recapitulatifController.setCurrentInscriptionBean(bean, false)}”
    immediate=”true”

    h:outputLabel id=”recap-id-colonne-decision-manuelle-label-sans-decisions”
    value=”#{bean.inscription.decisionPoursuiteManuel.code}”
    rendered=”#{nbArticleMan eq 0 or nbArticleMan eq 1}”

    a4j:ajax render=”:decisionManuellePopupEdition ”
    oncomplete=”#{rich:component(‘decisionManuellePopupEdition’)}.show(); return false”
    h:commandLink

    the inputText inside the modal :

    a4j:outputPanel id=”toto” layout=”block” ajaxRendered=”true”
    h:inputText id=”article-manuel-inscription-input”
    value=”#{recapitulatifController.currentInscriptionBean.inscription.codeArticleManuel}”

    maxlength=”12″
    f:ajax event=”blur” render=”:cListID”
    h:inputText
    a4j:outputPanel

Leave A Comment