-1

フォーム要素が変更されたときにフォームの日付フィールドを更新したい.フォームはプライムフェイスで行われます.

更新する日付フィールド (イベント日付):

<p:inputMask mask="99/99/9999" 
             value="#{children.eventDate}" 
             converter="#{dateConverter}" 
             id="cfc_eventdate" 
             disabled="#{editFamilyCtrl.sendFlag||editFamilyCtrl.contextCtrl.viewFromWorklist}">
    <f:attribute name="childBirthDate" 
                 value="#{children.affiliateTO.childTOs[0].dateOfBirth}" />
    <f:validator validatorId="mwpEventDateValidator" />
    <p:watermark for="cfc_eventdate"  
                 value="dd/mm/yyyy" />
</p:inputMask>

「変更時」イベントでjs関数を呼び出しています:これはDOBフィールドです

<p:column styleClass="borderStyle">
    <p:inputMask mask="99/99/9999" 
                 styleClass="#{(editFamilyCtrl.affiliateTOExist.dateOfBirth ne editFamilyCtrl.mutationRequestTO.mutationTOs[0].affiliateTO.dateOfBirth) and editFamilyCtrl.sendFlag ? 'updatedInput' : 'white'}"
                 value="#{editFamilyCtrl.mutationRequestTO.mutationTOs[0].affiliateTO.dateOfBirth}"
                 id="cfa_dob" 
                 disabled="#{editFamilyCtrl.sendFlag}" 
                 onchange="setEventDate(this)">
        <p:ajax event="blur" 
                update="@this" />
        <f:convertDateTime pattern="dd/MM/yyyy" />
        <f:validator validatorId="mwpdobValidator" />
    </p:inputMask>

    <h:outputLink disabled="#{editFamilyCtrl.sendFlag}" 
                  onclick="calDialog.show()" 
                  value="javascript:void(0)" 
                  styleClass="calStyle">
        <p:graphicImage value="../images/calendar.png" 
                        styleClass="calImg"/>
     </h:outputLink>
</p:column>

これは私の Js 関数です:

<script>
    function setEventDate(val) {      
      var obj = document.getElementById("editFamilyForm:cfa_eventdate");
      if(!((obj.value).match(/^\d+/))) {
          var today = new Date();
          var dd = today.getDate();
            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            var today=dd+"/"+mm+"/"+yyyy;
            $("#editFamilyForm\\:cfa_eventdate").val(today);
        }
    }
</script>

dob フィールドを変更すると、js が呼び出され、イベント日付フィールドに日付 (dd/mm/yyyy) が表示されます。ただし、特定のフィールド (イベント日付) をクリックすると、更新された値が消去されるか、イベントにカーソルが既に存在する場合日付フィールドjsの更新が行われていません..よろしくお願いします

4

1 に答える 1

0

指定<p:ajax event="blur" update="@this" />すると、コンポーネントでカーソルの移動が発生するたびにcfc_eventdate、その値がサーバー側の更新によって ajax で更新されます。

純粋にクライアント側の jsを使用して値を変更しているため、その値はcfc_eventdateサーバー側に保存されません。その結果、 setEventDate()関数の実行後にカーソルの移動が発生すると、次のようになります。

  1. クライアント側の値 (コンポーネントに表示される) は、コンポーネントで更新されます
  2. <p:ajax/>サーバーへのajaxリクエストをトリガーします
  3. サーバーはリクエストを受け取り、 の値バインディングを検索します。cfc_eventdateこれは#{children.eventDate}です。JSF は純粋にクライアント側の更新を認識していないため、children.eventDate元のサーバー側の値を保持します。(2) への ajax 応答で送信されるのは、この元の値です。

プロセスの最後に、クライアント側で行った変更はすべて ajax 応答で元に戻されます。ポイントは、別のコンポーネントの値に基づいてコンポーネントを ajax 更新する場合は、javascript だけでなく、適切な ajax を使用することです。

于 2013-05-27T16:53:30.130 に答える