2 Replies Latest reply on Jul 27, 2007 3:06 AM by Alexander Mischur

    SimpleTogglePanel2 Question

    Alexander Mischur Newbie

      Hi together,

      i have 2 questions to the jboss richfaces community.

      The first one: Is this the right place to ask for some help with sandbox components?

      Now I try to explain what my problem is and my second question is on the end of the post.

      I'm using the simpleTogglePanel2 Component from richfaces (sandbox) in the following way:

      <stp2:simpleTogglePanel2 opened="false"
       switchType="client"
       id="employment_section"
       label="#{messages.jobHistory}"
       headerClass="section_panel_header"
       bodyClass="section_panel_body"
       styleClass="section_panel">
       <f:view id="employment_section_view">
       <a4j:region id="employment_section_region">
       <ul>
       <li>
       <div class="value employmentBusinessArea"><h:inputText value="#{editEmployment.businessArea}" class="employmentBusinessArea"/></div>
       </li>
       <li>
       <div class="value">
       <a4j:commandButton type="submit" value="#{messages.buttonSave}"
       actionListener="#{userProfileAction.saveEmploymentAction}"
       reRender="employment_section">
       </a4j:commandButton>
       </div>
       </li>
       </ul>
       </a4j:region>
       </f:view>
      </stp2:simpleTogglePanel2>
      


      As you can see in the first line of the code snippet, the panel is closed.

      The generated HTML the following:
      <div id="profile_form:employment_section"
       style="width: 100%;"
       class="section_panel">
       <div class="dr-stglpnl rich-stglpanel section_panel"
       style=";">
       <script type="text/javascript">
      //<![CDATA[
      SimpleTogglePanelManager.add(new SimpleTogglePanel("profile_form:employment_section",
       "false", null, null));
      //]]>
       </script>
       <div class="dr-stglpnl-h rich-stglpanel-header section_panel_header"
       id="profile_form:employment_section_header"
       onclick="SimpleTogglePanelManager.toggleOnClient('profile_form:employment_section');"
       style="position : relative;">Beruflicher Werdegang
       <div id="profile_form:employment_section_switch"
       style="position : absolute; top: 0px; right: 5px;">»</div>
       </div>
       <div style="display: none;">
       <input id="profile_form:employment_section_input"
       name="profile_form:employment_section" type="hidden" />
       </div>
       <div class="dr-stglpnl-b rich-stglpanel-body section_panel_body"
       id="profile_form:employment_section_body"
       style="display : none;overflow: auto; height: ;">
       <ul>
       <li>
       <div class="value employmentBusinessArea">
       <input type="text" name="profile_form:j_id85" class="employmentBusinessArea" />
       </div>
       </li>
       <li>
       <div class="value">
       <input id="profile_form:j_id88"
       name="profile_form:j_id88"
       onclick="A4J.AJAX.Submit('profile_form:employment_section_region','profile_form',event,
       {'parameters':{'profile_form:j_id88':'profile_form:j_id88'}
       ,'actionUrl':'/skilldb/xhtml/user/content.seam'} );return false;"
       value="Speichern"
       type="submit" />
       </div>
       </li>
       </ul>
       </div>
       </div>
      </div>
      


      When I open the panel in my browser by onclick, everything works fine. But when I close it I receive following error in the error console of firefox:
      Fehler: body.firstChild.style has no properties
      Quelldatei: http://localhost:8080/skilldb/a4j.res/scripts/simpleTogglePanel2.js.seam
      Zeile: 6
      


      And i can not reopen it again.

      The workaround for me was to change something in the javascript file (/richfaces_3_0_1/sandbox/simpleTogglePanel2/src/main/resources/org/richfaces/renderkit/html/scripts/simpleTogglePanel2.js):
      Original code line 53-56
      
       Element.hide(body);
       body.firstChild.style.width="100%";
       this.status="false";
      
      I changed it to:
      
       Element.hide(body);
       if (body.firstChild.style != null && body.firstChild.style.width != null){
       body.firstChild.style.width="100%";
       }
       this.status="false";
      


      I know that this is not the best solution to fix it.

      Is this problem of incorrect usage from me or is it a little bug in the component.

      Thanks for your help and time.