使用f：ajax（JSF）更新后，为什么我的Materialize可折叠菜单不起作用？

Question

I am working with JSF 2.2 and Materialize. I need to update a collapsible dynamic list when the user sends one basic form with h:form , h:commandButton and f:ajax labels.

This is the code for the form sent by the user:

<h:form>
    ...
    <h:commandButton value="send!" action="#{...}">
        <f:ajax render="@form pgMenu" execute="@form"/>
    </h:commandButton>
</h:form>

And this code represents the menu to be updated:

<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>

My problem is that when pgMenu is updated, the menu js behavior freezes.

The next images show the menu before and after sending the form (I am clicking options).

Before update

After update

Thank you!

Answer 1

After each update, your DOM structure is changing, therefore you need to destroy previous instance of Collapsible class:

instance.destroy();

And then, after your new structure is rendered, you need to reinitialize Collapsible:

var newElement = document.getElementById('YOUR_COLLAPSIBLE_CONTAINER');
var instance = new M.Collapsible(newElement, {YOUR OPTIONS});

I'm afraid that is your only option, when using materialize-css library.