6 Replies Latest reply on May 22, 2008 9:37 AM by jonckvanderkogel

Error messages in modal panel

straubp May 5, 2008 4:00 AM

Hi all,

I am using RichFaces 3.1.2 with Seam 2.0.0. I have a dataTable showing a list of items. When I click on a detail button of a row, I open a modal panel showing the details of the item. In the modal panel you can edit the values of the item and save them. Now, if somthing goes wrong, I want the error massages to be shown in the modal panel, but that - unfortunatelly - doesn't work. I can show them outside the modal panel, but not inside. Can anybody help me? Thanks in advance.

Some code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>

 <rich:messages ajaxRendered="true" />

 <s:div id="modalPanelDiv">
 <rich:modalPanel id="detail" rendered="#{listController2.renderPanel}" showWhenRendered="true" left="auto" top="auto">
 <f:facet name="header">
 <h:outputText value="header" />
 </f:facet>
 <h:form>
 <rich:messages ajaxRendered="true" />

 <h:inputText value="#{item2.name}" />
 <h:inputText value="#{item2.number}">
 <f:convertNumber groupingUsed="false" />
 </h:inputText>

 <a4j:commandButton action="#{listController2.hidePanel()}" value="Save" reRender="modalPanelDiv, form" />
 <a4j:commandButton action="#{listController2.hidePanel()}" value="Cancel" immediate="true" reRender="modalPanelDiv" />
 </h:form>
 </rich:modalPanel>
 </s:div>

 <h:form>
 <h:dataTable id="form" value="#{items2}" var="itm">
 <h:column>#{itm.name}</h:column>
 <h:column>#{itm.number}</h:column>
 <h:column>
 <a4j:commandLink action="#{listController2.showPanel()}" value="Ajax Select" reRender="modalPanelDiv" />
 </h:column>
 </h:dataTable>
 </h:form>

</body>
</html>

package test.masterdetail;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.lang.RandomStringUtils;
import org.apache.commons.lang.math.RandomUtils;
import org.jboss.seam.ScopeType;
import org.jboss.seam.annotations.Factory;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Out;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.annotations.datamodel.DataModel;
import org.jboss.seam.annotations.datamodel.DataModelSelection;

@Name("listController2")
@Scope(ScopeType.PAGE)
public class ListController2 {

 @DataModel
 private List<Item> items2;

 @DataModelSelection
 @Out(required=false)
 private Item item2;

 private boolean renderPanel;

 @Factory("items2")
 public void initItems() {
 items2 = new ArrayList<Item>();
 for(int i = 0; i < 10; i++) {
 items2.add(new Item(RandomStringUtils.randomAscii(5), RandomUtils.nextInt()));
 }
 }

 public void showPanel() {
 renderPanel = true;
 }

 public void hidePanel() {
 renderPanel = false;
 }

 public boolean isRenderPanel() {
 return renderPanel;
 }
}

1. Re: Error messages in modal panel

silverjam May 5, 2008 4:40 AM (in response to straubp)

Have you tried to put the whole page in one instead of two as you do in the code above?

Can you get the modalPanel to show at all?
Actions
2. Re: Error messages in modal panel

silverjam May 5, 2008 4:42 AM (in response to straubp)

Oops.... The forum ate the tag in my text. Here it is again.

"silverjam" wrote:
Have you tried to put the whole page in one form tag instead of two as you do in the code above?

Can you get the modalPanel to show at all?
Actions
3. Re: Error messages in modal panel

straubp May 5, 2008 4:56 AM (in response to straubp)

Hi,

thanks for your help. I tried it but unfortunately it dosen't work.

The modal panel is showing. Only problem is that <rich:messages ajaxRendered="true" /> on the top of the jsp shows error messages, but the one in the modal panel isn't. Seems like they don't reference the same messages...
Actions
4. Re: Error messages in modal panel

sri_hari May 6, 2008 1:20 AM (in response to straubp)

The solution can be achieved by putting the contents of the modal panel in a separate form.
and using separate <rich:messages/> one for the modal panel and other for the normal page and while sending faces messages from the bean give the respective id of the <rich:messages>
Actions
5. Re: Error messages in modal panel

dxxvi May 21, 2008 5:16 PM (in response to straubp)
Is your modalPanel still on the screen when there's an error message? Mine disappears when there's an error message even though I use
<a4j:commandButton value="OK" action="#{adminBackingBean.updateEditedState}" oncomplete="if (#{empty FacesContext.currentInstance.maximumSeverity}) #{rich:component('editStatePanel')}.hide();"/>
to submit the form on the modalPanel. Anyway to keep the modalPanel on the screen when there's an error message?
Actions
6. Re: Error messages in modal panel

jonckvanderkogel May 22, 2008 9:37 AM (in response to straubp)
The trick is to put a <h:messages> tag within the form in your modalPanel and when you want to close your modalPanel you check wether error messages are present. If so, the hide javascript is not processed so your modal panel stays open.

Like this:
<ui:composition> <script type="text/javascript"> function closeModalPanel(){ if (document.getElementById('formId:idOfMessagesTag')==null){ Richfaces.hideModalPanel('modalPanelId'); }; }; </script> <h:form id="formId"> <h:messages id="idOfMessagesTag" /> ....... </h:form> </ui:composition>

Note that the id of your messages tag may vary depending on how you built up the content of your modal panel. Simply check what the id is in your particular case and alter the code as necessary.
Actions

Go to original post