PrimeFaces inputText ajax event = valueChange单击命令按钮后触发 [英] 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>

并且在相同的形式中是一个commandButton:

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事件非常hacky，您将失去该字段的功能(复制/粘贴文本，文本选择，快速"键入等)

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.

将更新表达式更改为选择器.我的表情更新了我需要更新的元素，不包括按钮.就我而言:

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单击命令按钮后触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！