I am having a problem getting Ajax to work correctly. In the xhtml file I have here I am using Ajax to render some input being enabled or disabled, and it works correctly. However, further down I am also using Ajax to render an included xhtml file which contains a amongst other controls, and is tagged with id="photoEnabled". When the checkbox is not checked, a dummy display tagged by id="photoDisabled" is show in its place simply for a tidy presentation on the page, and is disabled.
For some reason this does not work, and I do not understand why. However, if I replace:
<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>
it does work correctly, but the problem is that further up on the page and not shown here, I have some other input fields, and when the status of the checkbox is changed, the fields are cleared because the whole form is rendered, which I do not want.
The relevant xhtml code is here, with the two Ajax tags shown, one which works and the other which does not.
<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>
In my Java class I have various getters and setters, which all work correctly, include those associated with the checkboxes, and dummy Ajax method which does nothing but appears to be required.
Part of the code is here:
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) {}
I am having a similar problem with some checkboxes earlier in the listing, and for them to work I have to use "@form" rather than specific ids, so again input fields are cleared when a checkbox is clicked.
Can someone kindly help me with the strange situation which I do not understand, and should some code be placed in the updateCheck() method in my bean?
Many thanks and I look forward to an interesting reply.
