CSS does not render correctly after ajax update with <ui: repeat>

Question

this view is complex. I mainly use Material Design Lite css google and run an ajax request to dynamically add input fields using simple objects.

<h:commandLink value="+ Add something>
    <f:ajax listener="#{bean.method()}"
            execute="@form"
            process="@form"
            render="@form" />
 </h:commandLink>

This method adds a new div to ui: repeat, adding a new entry to the list in my bean.

<h:form>
    <ui:repeat value="#{bean.list}" var="v">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <h:inputText value="#{v.value}" id="valuetitle"/>
            <label class="mdl-textfield__label" for="valuetitle">valuetitle</label>
         </div>
    </ui:repeat>
</h:form>

Problem: CSS is not updating properly. It does not initiate the class that I gave the div. Does anyone know a solution?

Answer 1

A few months ago I had the same problem. This is because MDL applies its style only once during the rendering of HTML.

, MDL , . MDL AJAX:

componentHandler.upgradeAllRegistered()

:

<h:commandLink value="+ Add something>
    <f:ajax listener="#{bean.method()}"
            execute="@form"
            process="@form"
            render="@form"
            onevent="function(data){if (data.status === 'success'){componentHandler.upgradeAllRegistered();}}"/>
 </h:commandLink>

, .

MDL GitHub.