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

    Problem using tagglePanel in a templated page

    zhyuhong
    zhyuhong Sep 17, 2009 11:52 AM

      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>


      • 1759 Views
      • Tags: