PrimeFaces inputText ajax event=valueChange 在单击 commandButton 后触发 [英] PrimeFaces inputText ajax event=valueChange fires AFTER commandButton clicked

问题描述

使用 JSF 和 PrimeFaces 6.1 我有一个 inputText 字段:

Using JSF and PrimeFaces 6.1 I have an inputText field as such:

<p:inputText value="#{backingBean.stringField}">
    <p:ajax event="valueChange" update="@form" />
</p:inputText>

并且在同一个表单中是一个命令按钮:

and within the same form is a commandButton:

<p:commandButton id="btnDoThatThing" 
                 ajax="true" 
                 immediate="true"
                 update="@form"
                 process="@this"
                 action="#{backingBean.doThatThing}"/>

当我

1. 对 inputText 字段进行更改，
2. 然后点击命令按钮以外的地方
3. 点击命令按钮

一切都按预期工作.但是如果我:

everything works exactly as expected. BUT if I:

1. 对 inputText 字段进行更改，
2. 立即命令按钮

按钮不会被触发，因为第一次单击 commandButton 会触发 valueChange 事件在 inputText 字段中发生.

the button is NOT fired since the first click of the commandButton is triggering the valueChange event to happen in the inputText field.

如果我第二次点击它，按钮动作终于发生了.

if I click it a second time the button action finally happens.

现在，如果我将 p:ajax event="valueChange" 更改为 p:ajax event="keyup" 命令按钮的第一次点击按预期工作，但不幸的是 inputField 上的 keyup 事件非常棘手，并且您失去了该字段中的功能(复制/粘贴文本、文本选择、快速"输入等)

now, if i change the p:ajax event="valueChange" to p:ajax event="keyup" the first click of the commandButton work as expected, but unfortunately the keyup event on a inputField is pretty hacky and you lose functionality within the field (copy/paste text, text selection, 'fast' typing' etc)

关于如何在 inputText 字段中启动更改事件，并在用户在 inputText 字段中键入内容后立即单击按钮时触发 commandButton 操作有什么想法吗?

any thoughts on how to initiate the change event in the inputText field, AND fire the commandButton action when the user clicks the button immediately from typing in the inputText field?

感谢您的时间！

推荐答案

首先你的 valueChange 被触发.这会更新表单包括按钮.不能 100% 确定这是否与浏览器相关，但在 Chromium (Linux) 中，不会执行对先前呈现的按钮(在更新之前)的单击.

First your valueChange is triggered. This updates the form including the button. Not 100% sure if this is browser dependent, but in Chromium (Linux), the click on the previously rendered button (before it has been updated) is not executed.

当我将更新表达式更改为 selector.我的表达式更新了我需要更新的元素排除按钮.就我而言:

I could get it working when I changed the update expression into a selector. My expression updates the elements I needed to be updated excluding the button(s). In my case:

<p:ajax update="@(form :input:not(button))" />

请注意，change 事件是输入的默认事件，因此我删除了 event="valueChange".

Note that the change event is default for inputs, so I've removed event="valueChange".

当然你不需要使用选择器.您也可以只更新不包含按钮的组件(如面板):

Of course you do not need to use a selector. You can also just update a component (like a panel) which does not contain the button:

<p:ajax update="yourPanel" />

此外，ajax="true" 是 p:commandButton 的默认值，因此您可以删除它.

Also, ajax="true" is default for a p:commandButton, so you can remove that.

这篇关于PrimeFaces inputText ajax event=valueChange 在单击 commandButton 后触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！