我正在使用JSF 2.2和Materialize。当用户使用h:form
,h:commandButton
和f:ajax
标签发送一个基本表单时,我需要更新可折叠的动态列表。
这是用户发送的表单的代码:
<h:form>
...
<h:commandButton value="send!" action="#{...}">
<f:ajax render="@form pgMenu" execute="@form"/>
</h:commandButton>
</h:form>
此代码代表要更新的菜单:
<h:panelGroup id="pgMenu">
<ul class="collapsible myList">
<h:panelGroup rendered="#{not empty bean.variable}">
<li class="bold item-li"><a class="collapsible-header item-a">New</a>
<div class="collapsible-body">
<ul>
<a href="page1.xhtml"><li class="li-izquierda">New 1</li></a>
<a href="page2.xhtml"><li class="li-izquierda">New 2</li></a>
</ul>
</div>
</li>
</h:panelGroup>
<li class="bold item-li"><a class="collapsible-header item-a">Fases</a>
<div class="collapsible-body">
<ul>
<a href="#"><li class="li-izquierda">Planeación</li></a>
<a href="#"><li class="li-izquierda">Otra mas</li></a>
</ul>
</div>
</li>
<li class="bold item-li"><a class="collapsible-header item-a waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<a href="#"><li class="li-izquierda">Collapsible</li></a>
<a href="#"><li class="li-izquierda">Dialogs</li></a>
</ul>
</div>
</li>
</ul>
</h:panelGroup>
我的问题是,当pgMenu
更新时,菜单js的行为会冻结。
下一张图片显示发送表单前后的菜单(我点击选项)。
更新前
更新后
谢谢!
答案 0 :(得分:0)
每次更新后,您的DOM结构都在变化,因此您需要销毁Collapsible类的先前实例:
instance.destroy();
然后,在呈现新结构后,您需要重新初始化可折叠:
var newElement = document.getElementById('YOUR_COLLAPSIBLE_CONTAINER');
var instance = new M.Collapsible(newElement, {YOUR OPTIONS});
在使用materialize-css库时,恐怕这是您唯一的选择。