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() メソッドにコードを配置する必要がありますか?
どうもありがとうございました。興味深い回答をお待ちしております。