Question

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

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

调用的方法在ui中添加一个新的div：通过向我的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>

问题：CSS未正确更新。它没有启动我给div的类...任何人都知道解决方案吗？

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。

使用<ui：repeat>进行ajax更新后，CSS无法正确呈现

1 个答案: