SimpleTogglePanel2 Question
amischur Jul 26, 2007 9:16 AMHi 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.