提交按钮不提交但仅触发InputText的onChange事件

时间:2016-02-03 12:53:57

标签: jsf primefaces onchange ajax-update

当用户使用ajax在输入文本中键入内容时,我会自动为单选按钮选择一个值。 问题是:当用户在输入文本中键入内容并通过单击Get直接提交表单时,表单不会提交,但由于更改事件而仅调用ajax并且更新了广播。

再次点击Get按钮,提交表单。

我也不想使用keyup因为它在输入时会影响用户。

我使用primefaces 5.1

这是我的代码:

<h:form id="myForm">
    <p:selectOneRadio
        value="#{myBean.include}" id="IncludeRadio">
        <f:selectItem itemValue="Include" itemLabel="Include" />
        <f:selectItem itemValue="Exclude" itemLabel="Exclude" />
        <p:ajax process="@this" update="@form" />
    </p:selectOneRadio>
    <p:radioButton id="IncludeRadio0" for="IncludeRadio" itemIndex="0"/>
    <p:radioButton id="IncludeRadio1" for="IncludeRadio" itemIndex="1"/>

    <p:inputText
        value="#{myBean.fieldValue}"
        id="FieldValueInputText">
        <p:ajax process="@this" update="@form" />
    </p:inputText> 

    <p:commandButton id="GetButton"
                action="#{myBean.execute}"
                value="Get">
    </p:commandButton>
</h:form>

和bean:

@ManagedBean
@SessionScoped
public class MyBean {
    public void setFieldValue(final String fieldValue) {
        if (fieldValue != null && !fieldValue.trim().isEmpty()) {
            if (!"Include".equals(getInclude())
                    && !"Exclude".equals(getInclude())) {
                setInclude("include");
            }
        } else {
            setInclude("");
        }
    }

    public void setInclude(String include) {
        this.include = include;
    }

    public String getInclude() {
        return this.include;
    }

    public void execute() {
        // do something
    }
}

1 个答案:

答案 0 :(得分:1)

  

提交按钮不提交,但仅触发InputText的onChange事件

之所以发生这种情况,是因为输入字段的blur事件ajax - 在您单击它的那一刻更新提交按钮。这样,与提交按钮关联的JavaScript / Ajax逻辑不再保证可以工作,因为源元素已从DOM中删除。

确保您没有覆盖ajax更新中的提交按钮。

而不是更新整个表单,

<p:ajax ... update="@form" />

仅更新真正需要更新的部分,这些只是您特定情况下的输入:

<p:ajax ... update="IncludeRadio FieldValueInputText" />

或者如果您想要在输入很多内容时不想跟踪所有这些ID,请抓住PFS

<p:ajax ... update="@(#myForm :input)" />