CSS not rendering correctly after ajax update using

Question

this one is kind of complicated. Basically I am using Material Design Lite css by google and firing an ajax request to add input fields dynamically using primefaces.

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

The method called adds a new div in ui:repeat by adding a new entry to a 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: The CSS is not getting updated properly. It does not initiate the class I gave to the div.. any one knows a solution?

So it works if you replace the `p:inputText` by an `h:inputText` ? — Kukeltje, May 18 '17 at 11:52
Then the question is not PrimeFaces related. Edited the qyestion for you — Kukeltje, May 18 '17 at 12:03

score 3 · Accepted Answer · answered May 18 '17 at 14:37

Some months ago I had this very same problem. This situation happens because MDL applies their style only once, during the rendering of the HTML.

To fix it you must explicitly ask MDL to re-render the view to reapply the styles. To do this you must call the following MDL function on the success status of the AJAX request:

componentHandler.upgradeAllRegistered()

Your code should look like this:

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

You can later better encapsulate this solution for a more clean approach, but for now this can solve your problem.

For more info about this situation you can check this issue on the MDL's GitHub page.

I already tried to use this solution since I already read it online, but didn't know how to implement it. This one works perfectly! Thank you very much :) — Progph, May 19 '17 at 07:19

CSS not rendering correctly after ajax update using

1 Answers1