不更新目标组件，但工作正常[重复]

Question

我在让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代码，显示了两个Ajax标记，一个有效，另一个无效。

 <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类中，我有各种各样的getter和setter，它们都能正常工作，包括那些与复选框相关联的getter和setter，还有虚拟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) {}  

我在列表前面的一些复选框中遇到了类似的问题，为了使它们工作，我必须使用“@form”而不是特定的ID，因此再次在单击复选框时清除输入字段。

有人能帮我解决我不明白的奇怪情况吗，应该在我的bean中的updateCheck（）方法中放置一些代码吗？

非常感谢，我期待着一个有趣的回复。

Answer 1

如果您希望按id呈现特定元素，则可以使用<代码>

  <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>

在上面的示例中解释了在选择valueh： selectBooleanCheckbox时，将刷新h： inputText元素photoEnable和photoEnable。

Answer 2

我假设listener="#{option1.updateCheck}"中#和{之间的空格只是在表达问题时粗心的错字。这个无效的EL语法确实“不起作用”。

您的具体问题归结为缺乏对基本HTML/JavaScript工作原理的理解（请记住，在这个问题的上下文中，JSF基本上只是一个HTML/JS代码生成器）。目前提供的代码中有两个技术问题：

>

您试图用ajax更新一个组件，该组件本身在JSF中有条件地呈现。这行不通，原因很简单，JavaScript无法通过文档找到未呈现JSF组件的HTML表示。getElementById（），以便用从ajax响应中获得的新HTML表示形式替换它。

您需要将其放入始终渲染的组件中。E、 g.本

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

理论上需要被替换为

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

但是，

总之，这应该做到：

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

• 当我想ajax更新它时，为什么我需要在另一个组件中嵌套一个渲染="#{一些}"的组件？