5 Replies Latest reply on Dec 11, 2008 6:52 AM by rossma

rich:inputNumberSlider and rich:modalPanel

rossma Dec 10, 2008 9:57 AM

Hi

I am trying to use a rich:inputNumberSlider within a rich:modalPanel. The arrow in the rich:inputNumberSlider doesn't display correctly when the modal panel is shown. It displays in the 0 position even if the value of the rich:inputNumberSlider is set to something else like 50.

The RichFaces version I am using is 3.1.6.GA.

Here is what my jsp page looks like:

<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<html>
<head>
<title>modal</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<f:view>
 <body>
 <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>
 <f:facet name="controls">
 <h:panelGroup>
 <h:outputText id="closeOut" style="cursor:pointer" value="Close"></h:outputText>
 <rich:componentControl for="panel attachTo="closeOut"
 peration="hide" event="onclick" />
 </h:panelGroup>
 </f:facet>
 <rich:inputNumberSlider id="modalSlider" value="50" />
 </rich:modalPanel>
 <h:outputLink value="#" id="link">
 <h:outputText id="showOut" value="Show Modal" />
 <rich:componentControl for="panel" attachTo="link" operation="show"
 event="onclick" />
 </h:outputLink>
 <rich:inputNumberSlider id="slider" value="50" />
 </body>
</f:view>
</html>

There are two sliders, one inside a modal and the other outside. The one in the modal doesn't display correctly when opened and the one outside of the modal does.

Tested in IE7 and in Firefox 3.0.4. In Firefox the slider does not display correctly just like in IE but if I move my mouse to one of the browsers links than all of a sudden the slider arrow adjusts itself and goes to the position that it should.

I would appreciate your help on this.

thank you,

Ross

1. Re: rich:inputNumberSlider and rich:modalPanel

ilya_shaikovsky Dec 10, 2008 10:02 AM (in response to rossma)

can't reproduce under 3.3.0.. will forward to our QA team.
Actions

2. Re: rich:inputNumberSlider and rich:modalPanel

rossma Dec 10, 2008 10:09 AM (in response to rossma)

Thanks,

Just a note I notice my formatting of my JSP was messed up when I copied and pasted the code..here is the right format:

<%@page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<html>
<head>
<title>modal</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Software Architect">
</head>
<f:view>
 <body>
 <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>
 <f:facet name="controls">
 <h:panelGroup>
 <h:outputText id="closeOut" style="cursor:pointer" value="Close"></h:outputText>
 <rich:componentControl for="panel" attachTo="closeOut" operation="hide" event="onclick"/>
 </h:panelGroup>
 </f:facet>
 <rich:inputNumberSlider id="modalSlider" value="50" />
 </rich:modalPanel>
 <h:outputLink value="#" id="link" >
 <h:outputText id="showOut" value="Show Modal" />
 <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
 </h:outputLink>
 <rich:inputNumberSlider id="slider" value="50" />
 </body>
</f:view>
</html>

3. Re: rich:inputNumberSlider and rich:modalPanel

tkuprevich Dec 10, 2008 12:13 PM (in response to rossma)

Hi,

In your case I see the same as in this issue I have just opened:
https://jira.jboss.org/jira/browse/RF-5113

Tanks!
Tsikhon Kuprevich
Actions
4. Re: rich:inputNumberSlider and rich:modalPanel

tkuprevich Dec 11, 2008 6:29 AM (in response to rossma)

Sorry, wrong link, here is the correct one https://jira.jboss.org/jira/browse/RF-5320
Actions

5. Re: rich:inputNumberSlider and rich:modalPanel

rossma Dec 11, 2008 6:52 AM (in response to rossma)

Thanks Tsikhon, they may be related. I look forward to the next release.

In the mean time I have it working with a "hack" so to speak:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%-- jsf:pagecode language="java" location="/src/za/co/sanlam/ebaq/view/pagecode/Modal.java" --%><%-- /jsf:pagecode --%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<html>
<head>
<title>modal</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Software Architect">
</head>
<f:view>
 <body>
 <a4j:outputPanel id="outpanel">
 <rich:modalPanel id="mypanel" width="350" height="100" onshow="rerenderSlider();">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="Modal Panel"></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <h:outputText id="closeOut" style="cursor:pointer" value="Close"></h:outputText>
 <rich:componentControl for="mypanel" attachTo="closeOut"
 operation="hide" event="onclick" />
 </h:panelGroup>
 </f:facet>
 <rich:inputNumberSlider id="modalSlider" value="50" />
 </rich:modalPanel>
 <h:outputLink value="#" id="link">
 <h:outputText id="showOut" value="Show Modal" />
 <rich:componentControl for="mypanel" attachTo="link" operation="show"
 event="onclick" />
 </h:outputLink>
 </a4j:outputPanel>
 <a4j:outputPanel>
 <h:form>
 <a4j:jsFunction name="rerenderSlider"
 reRender="modalSlider">
 </a4j:jsFunction>
 </h:form>
 </a4j:outputPanel>
 </body>
</f:view>
</html>

On show of the modal panel I rerender the slider control.

I am sure there is a cleaner solution out there and if someone knows please let me know. I don't like this solution as it forces a rerender of the control. If there is a solution to use only javascript that would be best.

thanks again,

Ross

Go to original post