1

私は<p:dataTable>html を使用した中で使用しています<table>。変更イベントでPrimeFaces<p:inputText>を無効化/読み取り専用にしたい。<h:selectOneMenu>

JavaScript を使用しましたが、動作しません。

<script type="text/javascript">
 function change(val)
 {          
     //alert(val);
     if(val=="Check")
      {

         document.getElementById('bankName').readonly=false;
         document.getElementById('receiptNo').readonly=true;

      }
      if(val=="Cash")
      {

          forms.elements["mainForm:chkNo"].readonly=true;
          document.getElementById('chkNo').readonly=true;
          document.getElementById('bankName').readonly=true;
          document.getElementById('receiptNo').readonly=false;              

      }
}
</script>

JSF コード

<h:column>
                            <p:dataTable id="paymentHistoryDataTable" var="due" 
                                         >

                                <p:column>
                                    .......


                                    <table id="paymentProcess">
                                        <tr>                                                
                                            <td style="width: 80px;">
                                        <h:selectOneMenu value="#{adminActionController.tempBean.selectType}" id="type" onchange="change(this.value);">
                                            <f:selectItem itemLabel="Check" itemValue="Check"/>
                                            <f:selectItem itemLabel="Cash" itemValue="Cash"/>
                                        </h:selectOneMenu>
                                        </td>
                                        </tr>
                                        <tr id="check">
                                            <td></td>
                                            <td></td>
                                            <td style="width: 90px;" id="lblChk">
                                                <label> <h:outputText value="Check/DD Number:" /> </label>
                                            </td>
                                            <td style="width: 90px;">
                                        <h:inputText id="chkNo" value="#{adminActionController.tempBean.checkNumber}"  immediate="true"
                                                     required="false" validatorMessage="insert Check/DD number">
                                        </h:inputText>
                                        </td>

....... js で id="chkNo" にアクセスして無効にしたい..

4

1 に答える 1

6

ここでいくつかの概念的な間違いを犯しています。

具体的な問題は、JSF ソース コードに基づいて JavaScript コードを記述していることが原因です。これは完全に正しくありません。JSF は Web サーバー上で実行され、HTML を生成します。JavaScript は Web ブラウザーで実行され、JSF ではなく HTML のみを認識します。Web ブラウザでページを右クリックし、[ソースの表示] を選択してよく見てください。bankNameIDまたはの HTML 要素は存在しませんreceiptNo。代わりに、、、などformId:tableId:0:bankNameです。原則として、HTML DOM から要素を選択するには、JavaScript でこれらの HTML 要素 ID を正確に使用する必要があります。formId:tableId:1:bankNameformId:tableId:2:bankName

しかし、これは不器用です。

むしろ、JSF が提供するタグ/機能を使用して、目的の機能要件を達成してください。readonlyなどでJSF式言語を使用できますreadonly="#{dropdown.value == 'Cash'}"。<f:ajax>モデルとビューを更新するために JSF ajax リクエストを実行するために使用できます。

次のキックオフの例は、出発点として適切です。

<h:selectOneMenu id="type" value="#{adminActionController.tempBean.selectType}">
    <f:selectItem itemValue="Check"/>
    <f:selectItem itemValue="Cash"/>
    <f:ajax render="chkNo bankName receiptNo" />
</h:selectOneMenu>
<p:inputText id="chkNo" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="bankName" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="receiptNo" readonly="#{adminActionController.tempBean.selectType == 'Check'}" />

は<f:ajax>、(相対) クライアント IDchkNoでコンポーネントbankNameを更新しreceiptNo、ドロップダウンが変更されたときに更新します。更新により、readonly属性の再評価が強制されます。

具体的な問題とは関係<p:dataTable><table>なく、行をバインドしなかった方法var="due"は非常に奇妙ですが、それは将来の質問/問題の可能性があります。上記のコード例は、正しいコンテキストを前提としています。

于 2012-09-15T12:45:09.743 に答える