SimpleTogglePanel2 Question
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.
