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.

81 thoughts on “Displaying and Rerendering a RichFaces ModalPanel from a commandLink

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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

      • 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)

        • 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).

        • 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. 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. 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 ,

    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

  13. 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.

  14. 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..

  15. 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?

  16. @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});
    
  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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.

  23. 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.

  24. 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>

  25. 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.

  26. 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.

  27. 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.

  28. 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.

  29. 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.

  30. 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

  31. 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?

  32. 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!

  33. 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?

  34. 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

    • 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!

  35. 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…

  36. 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

  37. 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.

  38. 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…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>