jQuery操作は1回だけです（JSF、Primefaces）

Question

私はフォントサイズを変更したいDataTableを持っています。ユーザーは、selectOneMenueコンポーネントを使用してフォントサイズを設定できます。

これをjQueryで更新すると、これは初めて発生します。 selectOneMenueでフォントサイズを変更する場合は、フォントサイズがデフォルトに設定され、リフレッシュ（F5）を行うとフォントサイズが正常に変更されます。しかし、私はこの行動を望んでいません。

私はスクリプト部分にreload（）関数を追加しました。もし私がこれを行うと、私はリロードしたい場合はいつもこのFirefoxメッセージを受け取ります。そして、それはデフォルトのサイズでテーブルをレンダリングし、正しいフォントサイズをレンダリングした直後にレンダリングします。最終的な製品は大丈夫ですが、私はこのfirefoxメッセージを表示させたくないので、デフォルトのフォントサイズでテーブルをプレレンダリングする必要はありません。

は今、私はあなたが本当にjQueryをここでは必要ありません。このコード

<script> 
     jQuery(document) 
       .ready(
         function() { 
          jQuery('#dtSummary') 
            .css('cssText', 
              'font-size:#{summaryBean.selectedFont}px !important'); 

         }); 

     function changeFont() { 
      document.getElementById("dtSummary").style.fontSize = "#{summaryBean.selectedFont}px !important;}"; 
      window.location.reload(true); 
     } 
    </script> 


<h:form id="form" prependId="false"> 
     <h:panelGroup> 
      <h:panelGrid columns="3" styleClass="rainstar-form-inline" 
       columnClasses="rainstar-form-column-left rainstar-form-column-right"> 


       <p:selectOneMenu id="targ" effect="fade" 
        styleClass="rainstar-input-small2" 
        value="#{summaryBean.selectedFont}" 
        valueChangeListener="#{summaryBean.selectionFont_change}" 
        onchange="changeFont()"> 
        <f:selectItems value="#{summaryBean.fontCollection}" /> 
        <p:ajax update="dtSummary" /> 
       </p:selectOneMenu> 
      </h:panelGrid> 
      <p:commandButton value="#{msg.button_print}" icon="ui-icon-print" 
       styleClass="rainstar-button-right" 
       action="#{summaryBean.generatePdf()}" ajax="false" /> 


      <p:dataTable id="dtSummary" styleClass="rainstar-form-margin-top" 
       value="#{summaryBean.eintragList}" 
       selection="#{summaryBean.selectedEintrag}" selectionMode="multiple" 
       var="eintrag" rowKey="#{eintrag.it1}"> 

       <p:column id="header" styleClass="ui-state-default"> 
        <div class="ui-dt-c">#{eintrag.it1}</div> 
       </p:column> 

       <p:column styleClass="rainstar-table-item" 
        headerText="#{tableBundleBean.summary_table_nozzles} [mm]"> 
        <h:outputText value="#{eintrag.it2}" /> 
       </p:column> 

      </p:dataTable> 

     </h:panelGroup> 


    </h:form> 

Answer 1

を持っています。試してみてください：

たとえば、パフォーマンス上の理由から、サーバーのラウンドトリップやレンダリングを避けたい場合は、Jqueryを使用します。そのような場合、selectMenuウィジェットはページをリフレッシュするべきではありません。

Answer 2

私はあなたの選択ボックスのために生成されるIDはかなりわかりませんが、次のようなものが動作するはずです、それはIDが「TARG」を取得すると仮定すると：ありがとうございます^^

$(document).ready(
    changeFontSize 
) 

function changeFontSize() { 
    $('#dtSummary').css('fontSize', $('.targ').val() + 'px !important'); 
}