CSS 使用 <ui:repeat> ajax 更新后无法正确呈现

Question

这个有点复杂。基本上，我使用 Material Design Lite css by google 并触发 ajax 请求以使用 primefaces 动态添加输入字段。

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

通过向我的 bean 中的列表添加新条目，调用的方法在 ui:repeat 中添加了新的 div。

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

问题：CSS 没有正确更新。它不会启动我给 div 的 class。有人知道解决方案吗？

Answer 1

几个月前我遇到了同样的问题。发生这种情况是因为 MDL 在 HTML.

的渲染期间只应用了一次他们的样式

要修复它，您必须明确要求 MDL 重新渲染视图以重新应用样式。为此，您必须在 AJAX 请求的成功状态下调用以下 MDL 函数：

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 页面上的 this issue。

CSS 使用 <ui:repeat> ajax 更新后无法正确呈现

CSS not rendering correctly after ajax update using <ui:repeat>

css

ajax

jsf

material-design-lite