复选框和单选按钮选择在 h:selectOneMenu 值更改时被清除

Question

我正在处理一个有两个数据表的表单。在第一个数据表中，我显示单选按钮和复选框，而第二个数据表包含 选择一个菜单。值更改侦听器已在 selectOneMenu 上实现，并且在值更改时，后续字段将根据选择进行填充。 一切正常，除了当我从下拉列表中选择值时，复选框和单选按钮值被清除。 f:ajax event="change" 已用于 selectOneMenu 上的更改事件。看起来整个页面都被刷新并且值被清除了。 我还尝试通过更新存在 selectOneMenu 的数据表的 id 来使用 f:ajax。

        <p:dataTable styleClass="borderless" id="inResultTable" var="result" value="#{RequestBean.fooFields}" rendered="#{not empty RequestBean.fooFields}">
    <p:column style="width:150px;">
    <f:facet name="header">
    <h:outputText value=" " />
    </f:facet>
    <h:outputText value="#{msg[result.fldLabel]}" />
    </p:column>
    <p:column>
    <f:facet name="header">
    <h:outputText value="" />
    </f:facet>
    <ui:repeat value="#{RequestBean.fooFields}"
    var="itm">
    <h:selectOneMenu value="#{itm.indFieldValue}"
    rendered="#{result.lvlid==itm.lvlid}"
    style="width:250px;padding-right:150px;text-align: left;">
    <f:selectItems value="#{RequestBean[itm.indField]}" />
    </h:selectOneMenu>
    <h:selectOneRadio value="#{itm.indFieldValue}" rendered="#{result.lvlid==itm.lvlid and result.fldType=='radio'}"
    style="width:250px;padding-right:150px;text-align: left;">
    <f:selectItems value="#{RequestBean[itm.indField]}" />
    </h:selectOneRadio>
    <h:selectManyCheckbox value="#{itm.indFieldCheckBox}" rendered="#{result.lvlid==itm.lvlid and result.fldType=='selectbox'}">
    <f:selectItems value="#{RequestBean[itm.indField]}" />
    </h:selectManyCheckbox>
    </ui:repeat>
    </p:column>
    </p:dataTable>


    <p:dataTable styleClass="borderless"
    id="resultTable" var="result"
    value="#{RequestBean.depFields}">
    <h:selectOneMenu value="#{RequestBean.field4Value}"
    valueChangeListener="#{RequestBean.processValueChange4}"
    rendered="#{result.lvlid=='5' and result.fldType=='selectbox'}"
    style="width:250px;padding-right:150px;text-align: left;">
    <f:selectItem itemLabel="--Please Select--" itemValue="#{null}" />
    <f:selectItems value="#{RequestBean[result.field]}" />
    <f:ajax event="change" render="@form" />
    </h:selectOneMenu>
    ...
    ...

    </p:dataTable>

N.B：要求带有复选框和单选按钮的数据表必须放在顶部。 ID 不能用于第二个表中的 selectOneMenu，因为我是 根据数据库中的条目动态填充 selectOneMenu(s)。 我知道这可能是一个简单的问题，但大多数网站上发布的信息都没有运气。 任何帮助将不胜感激。

Answer 1

这是你的<f:ajax>。

<f:ajax event="change" render="@form" />

您没有指定process 属性。所以默认为@this，表示提交时只处理当前输入组件。但是，您指定了整个表单的 render。所以整个表格都会被刷新。但是，在提交期间未处理其他输入组件。所以它们的模型值不会被更新，这意味着在渲染响应期间，初始值将被重新显示，而不是提交的值，在你的情况下显然是空白/空。

你基本上有两个选择：

1. 在提交期间处理整个表单。

    <f:ajax process="@form" render="@form" />
   

2. 或者，只更新那些真正需要更新的组件。

    <f:ajax render="clientId1 clientId2 clientId3" />
   

在你的特殊情况我认为选项 2 不可行，所以选项 1 是最好的。请注意，我省略了event 属性。它已经默认为change。

---

与具体问题无关，我不确定你们在值更改侦听器方法中都在做什么，但我只想指出，大多数初学者滥用它来操纵它模型值并且它并不总是像预期的那样工作（改变的模型值根本没有反映）。如果您的情况是这样，那么您实际上应该使用<f:ajax listener>。

另见：

• When to use valueChangeListener or f:ajax listener?

Answer 2

在值更改侦听器后，复选框和单选按钮的值被清除的主要原因可能是模型值未更新。

在更新模型之前调用值更改侦听器。

对于这类问题，了解 JSF 生命周期非常重要。

请在您的值更改侦听器中尝试以下代码并查看。

public void valueChange(ValueChangeEvent event){

    PhaseId phase = event.getPhaseId();
    if (phase.equals(PhaseId.ANY_PHASE))
    {
        event.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
        event.queue();
        return;
    }
    if(!phase.equals(PhaseId.UPDATE_MODEL_VALUES))
    {
        return;
    }
    // Your code
}

我没有在您的示例中尝试此代码。如果它不起作用，请告诉我完整的示例源代码。

谢谢。