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

    rich:inputNumberSlider and rich:modalPanel

    Ross Newbie

      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 Master

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

          • 2. Re: rich:inputNumberSlider and rich:modalPanel
            Ross Newbie

            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
              Tsikhon Kuprevich Newbie

              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

              • 5. Re: rich:inputNumberSlider and rich:modalPanel
                Ross Newbie

                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