5 Replies Latest reply on Sep 18, 2009 9:19 AM by Yuhong Zhang

    Problem using tagglePanel in a templated page

    Yuhong Zhang Newbie

      I copied the Toggle Panel demo as it is, and they display and work fine as it is. But I need to use it in a templated page. As soon as I introduce a template, none of the panels show up.

      Please advice. Thanks

      This is the template.xhtml

      <!-- template.xhtml -->
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets">
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <title>Sample Template</title>
      </head>
      <body>
      
       <p><ui:insert name="body"/></p>
      
      </body>
      </html>


      The underlined lines are the only thing I changed in the toggle panel example
      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition 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:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich" template="template.xhtml">
      <ui:define name="body">
      ......
      </ui:define>
      </ui:composition>
      
      


      The gemerated toggle panel html is like this
      <body>
      <p>
      </p>
      <div id="j_id3" class="rich-toggle-panel ">
      <div id="j_id3_closed" style="display: inherit;">
      <a id="j_id4" class="dr-tglctrl rich-tglctrl " onclick="TogglePanelManager.toggleOnClient('j_id3',null);; return false;" href="#">
      <img id="pic" style="border-width: 0pt;" src="/WTGControlCenter/img/arrow_right.gif"/>
      </a>
      </div>
      <div id="j_id3_tip1" style="display: none;">
      <table class="infopanel" cellspacing="0" cellpadding="0" border="0">
      <tbody>
      </tbody>
      </table>
      </div>
      <div id="j_id3_tip2" style="display: none;">
      <table class="infopanel" cellspacing="0" cellpadding="0" border="0">
      </table>
      </div>
      <div id="j_id3_tip3" style="display: none;">
      <table class="infopanel" cellspacing="0" cellpadding="0" border="0">
      </table>
      </div>
      <div style="display: none;">
      <input id="j_id3_input" type="hidden" value="closed" name="j_id3"/>
      </div>
      <script type="text/javascript">
      1TogglePanelManager.add(new TogglePanel("j_id3", $A(["closed", "tip1", "tip2", "tip3"]), "closed"));
      </script>
      </div>
      </body>