10 Replies Latest reply on Sep 3, 2007 5:24 PM by nbelaevski

modalPanel problem

psuross Aug 29, 2007 3:09 PM

I am trying to get the basic Exadel example code to work - http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?c=modalPanel

The problem I am having is that the panel's content is rendering along side of the link and then nothing renders on the panel when its invoked.

What gives with the example code? My other rich tags are working fine.

I have tried wrapping the content with <f:facet> but that didn't have any effect on how it rendered.

<a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">CHCS_PATIENT

<rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
<f:facet name="header">
<h:outputText value="Modal Panel Title" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
</f:facet>

... Content ...

</rich:modalPanel>

1. Re: modalPanel problem

david.spark Aug 30, 2007 4:33 AM (in response to psuross)

In your given code you don't close the a tag with a .

Also it looks nicer if when you post you use the code tags for code :-)
Actions
2. Re: modalPanel problem

david.spark Aug 30, 2007 4:36 AM (in response to psuross)

Sorry, meant to say close it with a "< /a>"
Actions

3. Re: modalPanel problem

psuross Aug 30, 2007 7:03 AM (in response to psuross)

Sorry, I do have the tag, so thats not my problem.

<a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">PATIENT</a>

 <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
 </f:facet>
 <f:facet name="content">
 <p>
 content
 </p>
 </f:facet>
 </rich:modalPanel>

4. Re: modalPanel problem

psuross Aug 30, 2007 7:04 AM (in response to psuross)

I have also tried this code without the tags around my content, which is how Exadel shows it, neither way works
Actions
5. Re: modalPanel problem

david.spark Aug 30, 2007 7:49 AM (in response to psuross)

I've copied your code (minus the content facet tags) and it works fine on my setup.

What does the rest of your page code look like?
Actions

6. Re: modalPanel problem

psuross Aug 30, 2007 8:59 AM (in response to psuross)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html; charset=ISO-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>

<f:view>
 <html>
 <head>
 <title>Default</title>
 </head>
 <body>
 <rich:separator height="12"/>
 <table border="1"><tr><td width="15%">
 <table>
 <tr>
 <td height="60">
 <a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">T1</a>
 <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
 </f:facet>
 <p>
a little content
 </p>
 </rich:modalPanel>
 </td>
 </tr>
 <tr>
 <td height="60">
 <a href="javascript:Richfaces.showModalPanel('t2',{width:450, top:200})">T2</a>
 <rich:modalPanel id="t2" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t2')" />
 </f:facet>
 <p>
even more content
 </p>
 </rich:modalPanel>
 </td>
 </tr>
 <tr>
 <td height="60">
 <a href="javascript:Richfaces.showModalPanel('t3',{width:450, top:200})">T3</a>
 <rich:modalPanel id="t3" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t3')" />
 </f:facet>
 <p>
more content
 </p>
 </rich:modalPanel>
 </td>
 </tr>
 <tr>
 <td height="60">
 <a href="javascript:Richfaces.showModalPanel('t4',{width:450, top:200})">T4</a>
 <rich:modalPanel id="t4" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t4')" />
 </f:facet>
 <p>
content
 </p>
 </rich:modalPanel>
 </td>
 </tr>
 </table>
 </td></table>
 </body>
 </html>
</f:view>

Output looks like this :
T1
a little content

T2
even more content

T3
more content

T4
content

7. Re: modalPanel problem

david.spark Aug 30, 2007 9:47 AM (in response to psuross)
Hmm, can't seem to get this to render at all with my setup :)

I do notice though that you've duplicated
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

Also your code:
</table> </td></table> </body> </html> </f:view>

seems to be missing a closing tag and should be
</table> </td></tr></table> </body> </html> </f:view>
Actions

8. Re: modalPanel problem

psuross Aug 30, 2007 10:24 AM (in response to psuross)

I removed the extra taglib and fixed the unbalanced table tags and I still have this issue.

I have distilled the page down about as much as I can, and I am still seeing this behavior

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html; charset=ISO-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>

 <html>
 <body>
<a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">Link to Content</a>
 <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
 </f:facet>
 <p>
content
 </p>
 </rich:modalPanel>
 </body>
 </html>

9. Re: modalPanel problem

david.spark Aug 31, 2007 6:36 AM (in response to psuross)

My setup is slightly different so I'm declaring name spaces in ui:composition tags but the main bulk of the code works fine so I'm not sure what the problem is I'm afraid :( Seems like it must be something related to your configuration elsewhere.

I don't think it's related to the problem but I notice that you're missing a namespace declaration for 'h' (for the h:graphicImage).
Actions
10. Re: modalPanel problem

nbelaevski Sep 3, 2007 5:24 PM (in response to psuross)

Hello!

Wrap non-JSF page fragments ( tags) into f:verbatim. That should solve the problem.
Actions

Go to original post