3 Replies Latest reply on Oct 13, 2009 11:42 AM by Thomas Hamacher

    rich:calendar + facelets BUG ?

    Mariano Kocalka Machala Newbie

      Hi Everyone,
      Im facing a strange problem with richfaces calendar component + facelets

      Sample1 (works FINE)
      -xhtml page
      -NO ui composition template
      -rich:calendar with popup

      Sample2 (DO NOT work)
      -xhtml page
      -ui composition template
      -rich:calendar (INSIDE a defined section) with popup

      Problem:
      1. In the sample2, the calendar popup is not working. When i click over the calendar button it is not comming up and im not able to select a date.

      2. I have used the fire fox error-console (to see whats going on) and i figure out that every time the rich:calendar component get focus, a javascript error is happening.

      3. this is the error trace (from firefox)
      Error: document.body has no properties
      Source File: http://localhost:8080/web20-cpanel/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/scripts/calendar.js.jsf Line: 26

      is this a bug ? or im doing something wrong ?

      My Environment
      jboss-4.2.2-GA
      jsf-1.2 RI
      facelets 1.1.14
      richfaces-ui-3.2.1
      java sdk 1.5
      eclipse wtp-europa
      fire-fox web browser

      Here's the code that works fine

      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html
       xmlns:u="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:r="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j"
       xmlns="http://www.w3.org/1999/xhtml">
      <body>
      <h:form>
       <h:panelGrid columns="2">
       <label>#{msgs.commons_fromDate}:</label>
       <r:calendar
       value="#{calendarController.fromDate}"
       popup="true" />
      
       <label>#{msgs.commons_toDate}:</label>
       <r:calendar
       value="#{calendarController.toDate}"
       popup="true" />
       </h:panelGrid>
      </h:form>
      
      </body>
      </html>
      


      HOWEVER, IF I PUT THIS code within a ui-composition template, the calendar popup is NOT longer accessible and i got the JS Error above.

      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html
       xmlns:u="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:r="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j"
       xmlns="http://www.w3.org/1999/xhtml">
      <body>
      
      <u:composition template="/WEB-INF/facelets/templates/menu-layout.xhtml">
      
       <u:define name="body">
       <h:form>
       <h:panelGrid columns="2">
       <label>#{msgs.commons_fromDate}:</label>
       <r:calendar
       value="#{calendarController.fromDate}"
       popup="true" />
      
       <label>#{msgs.commons_toDate}:</label>
       <r:calendar
       value="#{calendarController.toDate}"
       popup="true" />
       </h:panelGrid>
       </h:form>
       </u:define>
      
      </u:composition>
      
      </body>
      </html>
      


      Finally, this is the code for the base template:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html
       xmlns:u="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:r="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j"
       xmlns="http://www.w3.org/1999/xhtml">
      <body>
      
      <u:composition>
       <table width="100%" height="10%">
       <tr>
       <td valign="top">
       <u:insert name="header">
       This is the header, status:
       <a:status
       id="commonstatus"
       startText="Processing..."
       stopText="Ready." />
       </u:insert>
       </td>
       </tr>
       </table>
      
       <table width="100%" height="90%">
       <tr>
       <td width="15%" valign="top">
       <u:insert name="menu">
       <r:panelBar>
       <r:panelBarItem label="Options">
       <ul>
       <li><a href="calendar.jsf">Calendar</a></li>
       <li><a href="combo.jsf">Combo</a></li>
       <li><a href="pick.jsf">Pick</a></li>
       <li><a href="panel.jsf">Panel</a></li>
       <li><a href="datatable.jsf">Datatable</a></li>
       </ul>
       </r:panelBarItem>
       <r:panelBarItem label="More">
       No options!
       </r:panelBarItem>
       </r:panelBar>
       </u:insert>
       </td>
       <td width="85%" valign="top">
       <u:insert name="body">
       This is the body
       </u:insert>
       </td>
       </tr>
       </table>
      
      </u:composition>
      
      </body>
      </html>