2

Ajax を正しく動作させるのに問題があります。ここにある xhtml ファイルでは、Ajax を使用して有効または無効になっている入力をレンダリングしていますが、正しく動作しています。ただし、さらに下では、Ajax を使用して、含まれている xhtml ファイルをレンダリングしています。このファイルには、他のコントロールが含まれており、id="photoEnabled" でタグ付けされています。チェックボックスがチェックされていない場合、id="photoDisabled" でタグ付けされたダミーのディスプレイが、単にページ上で整然としたプレゼンテーションのためにその場所に表示され、無効になります。

何らかの理由でこれが機能せず、その理由がわかりません。ただし、次のように置き換えます。

<h:selectBooleanCheckbox id="photometry" value="#{option1.photometry}">   
  <f:ajax event="click" render="photoEnabled photoDisabled" listener="# {option1.updateCheck}"/>   
</h:selectBooleanCheckbox>   

<!-- by -->   

<h:selectBooleanCheckbox id="photometry" value="#{option1.photometry}">   
  <f:ajax event="click" render="@form" listener="#{option1.updateCheck}"/>   
</h:selectBooleanCheckbox>  

正しく動作しますが、問題は、ページのさらに上にあり、ここには表示されていないことです。他の入力フィールドがいくつかあります。チェックボックスのステータスが変更されると、フォーム全体がレンダリングされるため、フィールドがクリアされます。欲しくない。

関連する xhtml コードはここにあり、2 つの Ajax タグが示されています。1 つは機能し、もう 1 つは機能しません。

 <p:fieldset id="chooseOutput" legend="and choose your output:" style="text-align:left">   
    <h:commandButton id="popupChooseOutput" type="button" value="?" onclick="openPopup(420,370,'popups/helpOpt12')"  
                     styleClass="queryButton"/>   
    <p:panelGrid id="specphot" styleClass="textCentered" style="margin-left:auto; margin-right:auto">   
      <p:row>   
        <p:column colspan="2">   
          <span></span>   
        </p:column>   
        <p:column>   
          <h:outputText value="λ<sub>1</sub>(Å)" escape="false"/>   
        </p:column>   
        <p:column>   
          <p:spacer width="2" height="0"/>   
        </p:column>   
        <p:column>   
          <h:outputText value="λ<sub>2</sub>(Å)" escape="false"/>   
        </p:column>   
        <p:column>   
          <p:spacer width="2" height="0"/>   
        </p:column>   
        <p:column>   
          <h:outputText value="Δλ(Å)" escape="false"/>   
        </p:column>   
        <p:column>   
          <p:spacer width="2" height="0"/>   
        </p:column>   
        <p:column>   
          <h:outputText value="R"/>   
        </p:column>   
        <p:column>   
          <p:spacer width="2" height="0"/>   
        </p:column>   
        <p:column>   
          <h:outputText value="<i>v</i>sin <i>i</i> (km/s)" escape="false"/>   
        </p:column>   
      </p:row>     
      <p:row>   
        <p:column>   
          <h:selectBooleanCheckbox id="spectrum" value="#{option1.spectrum}">   
            <f:ajax event="click" render="deltaLambda lambda1 lambda2 R vsini" listener="#{option1.updateCheck}"/><!-- This works -->   
          </h:selectBooleanCheckbox>   
        </p:column>   
        <p:column style="text-align:left">   
          <h:outputText value="Spectrum:" escape="false"/>   
        </p:column>   
        <p:column>   
          <h:inputText size="6" id="lambda1" value="#{simulator.lam1}" disabled="#{!option1.spectrum}"  
                       styleClass="#{option1.enableStyle}"/>   
        </p:column>   
        <p:column>   
          <div></div>   
        </p:column>   
        <p:column>   
          <h:inputText size="6" id="lambda2" value="#{simulator.lam2}" disabled="#{!option1.spectrum}"  
                       styleClass="#{option1.enableStyle}"/>   
        </p:column>   
        <p:column>   
          <div></div>   
        </p:column>   
        <p:column>   
          <h:inputText size="6" id="deltaLambda" value="#{simulator.dlam}" disabled="#{!option1.spectrum}"  
                       styleClass="#{option1.enableStyle}"/>   
        </p:column>   
        <p:column>   
          <div></div>   
        </p:column>   
        <p:column>   
          <h:inputText size="6" id="R" value="#{simulator.lamByDlam}" disabled="#{!option1.spectrum}"  
                       styleClass="#{option1.enableStyle}"/>   
        </p:column>   
        <p:column>   
          <div></div>   
        </p:column>   
        <p:column>   
          <h:inputText size="6" id="vsini"   value="#{option1.vsini}" disabled="#{!option1.spectrum}"  
                       styleClass="#{option1.enableStyle}"/>   
        </p:column>   
      </p:row>   
      <p:row>   
        <p:column>   
          <h:selectBooleanCheckbox id="photometry" value="#{option1.photometry}">   
            <f:ajax event="click" render="photoEnabled photoDisabled" listener="#{option1.updateCheck}"/><!-- This does not work -->   
          </h:selectBooleanCheckbox>   
        </p:column>   
        <p:column style="text-align:left">   
          <h:outputText value="Photometry:"/>   
        </p:column>   
        <p:column colspan="9">   

          <!-- Conditionally enable filter menu here and in Option 2.  ""hiddenPhoto" is used by   
               JavaScript to test if any user defined filter files have been selected if it is "1".   
               If it is, it then tests if any files have been uploaded, in which case the user is   
               then given the choice of canceling the operation or deleting the uploaded files. -->   

          <h:outputText id="hiddenPhoto" class="hide" value="#{filters.displayUserDefined}"/>   

          <ui:fragment id="photoEnabled" rendered="#{option1.photometry}">   
            <ui:include src="include/filterMenu.xhtml"/>   
          </ui:fragment>   

          <!-- When the filter menu is disabled display the disabled menu in its place with the background color -->   

          <ui:fragment id="photoDisabled" rendered="#{!option1.photometry}">   
            <h:panelGrid columns="3">   
              <h:selectOneMenu value="#{filters.filterSet}" styleClass="filterMenuDisabled" disabled="true">   
                <f:selectItems value="#{filters.filtersMap}"/>   
              </h:selectOneMenu>   
              <h:selectOneRadio value="#{filters.radioValue}" disabled="true">   
                <f:selectItem itemValue="" itemLabel="AB"/>   
                <f:selectItem itemValue="" itemLabel="Vega"/>   
              </h:selectOneRadio>   
            </h:panelGrid>   
          </ui:fragment>   

        </p:column>   
      </p:row>   
    </p:panelGrid>   
  </p:fieldset>  

私のJavaクラスには、すべて正しく機能するさまざまなゲッターとセッターがあり、チェックボックスに関連付けられているものと、何もしないが必須のように見えるダミーのAjaxメソッドが含まれます。

コードの一部は次のとおりです。

public boolean isSpectrum() {   
  return spectrum;   
}   

public void setSpectrum(boolean spectrum) {   
  this.spectrum = spectrum;   
}   

public boolean isPhotometry() {   
  return photometry;   
}   

public void setPhotometry(boolean photometry) {   
  this.photometry = photometry;   
} 

public void updateCheck(AjaxBehaviorEvent event) {}  

リストの前半にあるいくつかのチェックボックスで同様の問題が発生しています。それらが機能するには、特定の ID ではなく「@form」を使用する必要があるため、チェックボックスをクリックすると入力フィールドがクリアされます。

誰かが私が理解できない奇妙な状況を親切に助けてくれますか?また、Bean の updateCheck() メソッドにコードを配置する必要がありますか?

どうもありがとうございました。興味深い回答をお待ちしております。

4

2 に答える 2

15

#{の間のスペースはlistener="# {option1.updateCheck}"、質問を作成する際の不注意なタイプミスだと思います。この無効な EL 構文は実際には「機能しません」。


あなたの具体的な問題は、基本的な HTML/JavaScript がどのように機能するかを理解していないことに要約されます (この質問のコンテキストでは、JSF は基本的に HTML/JS コード ジェネレーターにすぎないことを思い出してください)。これまでに提供されたコードには 2 つの技術的な問題があります。

  1. JSF で条件付きでレンダリングされるコンポーネントを ajax 更新しようとしています。document.getElementById()これは、レンダリングされていない JSF コンポーネントの HTML 表現を、ajax 応答から取得した新しい HTML 表現に置き換えるために JavaScript が見つけることができないという単純な理由で機能しません。

    常にレンダリングされるコンポーネントに配置する必要があります。例えばこれ

    <ui:fragment id="photoDisabled" rendered="#{!option1.photometry}">
        <h:panelGrid columns="3">
    

    理論的には

    <ui:fragment id="photoDisabled">
        <h:panelGrid columns="3" rendered="#{!option1.photometry}">
    

  2. ただし、 は<ui:fragment>HTML マークアップを生成しません (これは、JSF によって生成された HTML 出力を見るだけで確認できます)。HTML 要素をレンダリングする のdocument.getElementById()ように、通常の方法で選択可能な具体的な HTML 要素をレンダリングする JSF コンポーネントに置き換える必要があります。<h:panelGroup><span>

    全体として、これは次のようにする必要があります。

    <h:panelGroup id="photoDisabled">
        <h:panelGrid columns="3" rendered="#{!option1.photometry}">
    

以下も参照してください。

于 2013-04-03T12:53:58.143 に答える
0

特定の要素を ID でレンダリングする場合は、<h:form id="formId">コンポーネントをグローバルに使用できます。詳細については、以下の例を参照してください。

  <h:form id="formId">
    <h:inputText id="photoEnabled" value="#{bean.photoEnaled}"/>
    <h:inputText id="photoEnabled" value="#{bean.photoDisabled}"/>
    ....
    <h:selectBooleanCheckbox id="photometry" value="#{option1.photometry}">   
       <f:ajax event="click" render=":formId:photoEnabled :formId:photoDisabled" listener="# {option1.updateCheck}"/>   
     </h:selectBooleanCheckbox>   
                ...
   </h:form>

上記の例では、値 h:selectBooleanCheckboxの選択中にh:inputText要素 photoEnabled と photoEnabled が更新されることを説明しています。

于 2015-03-12T07:46:23.060 に答える