ajaxの更新後にCSSが正しくレンダリングされないのは、<ui:repeat>

Question

です。これは複雑です。基本的に私はMaterial Design LiteのCSSをGoogleで使用しており、プライムフェイスを使って入力フィールドを動的に追加するajaxリクエストを発しています。

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

呼び出されるメソッドは、ui：repeatに新しい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が正しく更新されていません。それは私が部門に与えたクラスを開始しない..誰も解決策を知っている？

Answer 1

数ヶ月前、私はこの非常に同じ問題を抱えていました。この状況は、HTMLのレンダリング中にMDLがそのスタイルを1回だけ適用するために発生します。

これを修正するには、スタイルを再適用するためにビューを再レンダリングするように明示的に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> 

をあなたは後で、より良い、よりこの溶液をカプセル化することができますクリーンなアプローチが、今のところあなたの問題を解決することができます。

この状況の詳細については、this issueをMDLのGitHubページで確認できます。