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 tag, define your RichFaces xml namespace (and any other JSF libs you’ll be using), and then setup your

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

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

The one limitation that I’ve run into here, and if you know how to solve this, please let me know, is that the 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 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 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:

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][code lang=”xml”]
<a:include viewid="/modal-panel.xhtml">
[/code]

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

Click Here!

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.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Posted

March 4, 2008

Seam

Devon

Tags:

ajax, jsf, modal, render, richfaces, xhtml

Comments

83 responses to “Displaying and Rerendering a RichFaces ModalPanel from a commandLink”

HugoZ

March 9, 2008

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!

Reply
Devon

March 9, 2008

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.

Reply
Richard

March 11, 2008

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

Reply
Devon

March 11, 2008

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.

Reply

Gerson

March 13, 2008

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

Rich Hephner

March 14, 2008
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.
Reply
Devon

March 14, 2008

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

Reply
Gerson

March 15, 2008
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
Reply
David

March 15, 2008

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

Reply
1. Ziyang
  
  October 28, 2010
  
  Hi,
  I think is the best solution!!!
  
  Reply
  1. Ziyang
    
    October 28, 2010
    
    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)
    
    Reply
    1. Devon
      
      October 28, 2010
      
      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).
      
      Reply
    2. Ziyang
      
      November 7, 2010
      
      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
      
      Reply

Devon

March 15, 2008

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

Chandra

June 10, 2008

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.

Reply
Devon

June 10, 2008

@Chandra:

can you provide your code and the errors? Either post here or just e-mail them to me: [email protected] and I’ll be happy to take a look.

Devon

Reply
Chandra

June 11, 2008

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

Reply
Devon

June 11, 2008

@Chandra:

I’m glad to hear you have it working!

Devon

Reply

Chandra

June 11, 2008

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.

Devon

June 11, 2008

@Chandra:

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

Devon

Reply
Chandra

June 12, 2008

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

Reply
anut

June 15, 2008

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

Reply
halley

June 27, 2008

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?

Reply
Devon

June 27, 2008
@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});
```
Reply
VJ

July 16, 2008

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

Reply
Devon

July 16, 2008

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

Reply
VJ

July 16, 2008

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

Reply
Devon

July 16, 2008

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

[email protected]

Reply
Col

August 25, 2008

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

Reply
Devon

August 25, 2008

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

Reply
Col

August 25, 2008

Here’s hoping :-)

Reply
alan

September 21, 2008

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

Reply
ysl

October 15, 2008

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

Reply
Brunda

October 15, 2008

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.

Reply
Devon

October 15, 2008

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

Can you e-mail it to me? [email protected]

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

Reply
jmb

October 21, 2008

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.

Reply
Val

November 17, 2008

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>

Reply
Murali

March 16, 2009

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.

Reply
Devon

March 17, 2009

@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

Reply
Himanshu Goyal

April 24, 2009

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.

Reply
Jeremy Goodell

April 24, 2009

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.

Reply
Jeremy Goodell

April 24, 2009

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.

Reply
Jeremy Goodell

April 25, 2009

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.

Reply
Jeremy Goodell

April 27, 2009

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

Reply
1. Devon
  
  May 3, 2009
  
  Jeremy,
  
  thank you very much! That’s really helpful!
  
  Devon
  
  Reply
Alperen

July 26, 2009

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?

Reply
1. Devon
  
  July 27, 2009
  
  Alperen, you could clear our the fields using JavaScript pretty easily, which might be the simplest approach.
  
  Reply
Klaus Schuster

September 17, 2009

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!

Reply
1. Bharat
  
  April 19, 2010
  
  can you please submit your code.. just how you pass the parameter..?
  
  Reply
Nikolai

October 3, 2009

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?

Reply
Venkatesh

November 30, 2009

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

Reply
1. Devon
  
  November 30, 2009
  
  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!
  
  Reply
Mike

December 4, 2009

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

Reply
Alex

December 21, 2009

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…

Reply
Giovax

December 22, 2009

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

Reply
Prasad

January 12, 2010

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.

Reply
1. Devon
  
  January 12, 2010
  
  Is your form (h:form) defined inside the modal?
  
  Reply
Srinadh

January 20, 2010

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

Reply
Bharat

April 19, 2010

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…

Reply
VK

May 6, 2010

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…

Reply
1. Devon
  
  May 7, 2010
  
  VK: sorry that’s not nearly enough info to help…
  
  Reply
Chamila

September 4, 2010

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

Reply
1. Devon
  
  September 7, 2010
  
  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
  
  Reply
Sourad

November 26, 2010

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.

Reply
1. Devon
  
  November 27, 2010
  
  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?
  
  Reply
Jan-Martijn Wijnholds

February 15, 2011

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

Reply
1. Ron Rickard
  
  September 29, 2011
  
  I would be very interested in your solution to this problem.
  
  Thanks,
  Ron
  
  Reply
jacob

June 6, 2011

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.

Reply
jacob

June 6, 2011

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

Reply
Swathi

June 27, 2011

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.

Reply
Maciel

November 17, 2011

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.

Reply
1. Devon
  
  November 17, 2011
  
  Maciel,
  
  what have you tried? What is the issue you’re running into?
  
  Devon
  
  Reply
kiran

January 3, 2012

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

Reply
1. Devon
  
  January 3, 2012
  
  I’m sorry I don’t use Vignette so I really can’t comment:(
  
  Reply
Todd

January 24, 2012

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!

Reply
1. Todd
  
  January 24, 2012
  
  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
  
  Reply
  1. Todd
    
    January 24, 2012
    
    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()”
    
    Reply
Nasirkhan

August 8, 2012

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?

Reply
Yevgeniy

January 16, 2013

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

Reply
Ravi

January 13, 2014

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///

Reply
1. Devon
  
  January 13, 2014
  
  I am sorry but I don’t understand your question:(
  
  Reply
Vince

November 20, 2015

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.

Reply
Vince

November 20, 2015

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

Reply

Displaying and Rerendering a RichFaces ModalPanel from a commandLink

Comments

83 responses to “Displaying and Rerendering a RichFaces ModalPanel from a commandLink”

Leave a Reply Cancel reply