单击 p:commandButton 时，不会调用 p:inputText 上的 p:ajax 模糊事件

我想通过单击命令按钮时的 ajax 调用将数据传递给 back bean。 我有一个带有几个输入文本字段的表单，其中每个字段都有 ajax 模糊事件。 除了流动的场景之外，在快乐的流程中一切都工作正常。

当我直接单击提交时，Ajax 模糊事件正在调用，这应该在提交单击之前发生，因此我应该再次单击提交按钮来调用 ajax 调用来保存我的表单。

这是代码。

输入文本字段：

<p:inputText id="txt_name"
    value="#{partnerVO.partnerName}"
    required="true" maxlength="30"
    rendered="#{!partnerVO.isReadOnly}">
    <p:keyFilter regEx="/[A-Za-z0-9@.,&amp;- ]/i"
        for="txt_name" preventPaste="false" />
    <p:ajax update="txt_name" event="blur" />
</p:inputText>

<p:inputText id="txt_assigned"
    value="#{partnerVO.assignedName}"
    required="true" maxlength="30"
    rendered="#{!partnerVO.isReadOnly}">
    <p:keyFilter regEx="/[A-Za-z0-9@.,&amp;- ]/i"
        for="txt_assigned" preventPaste="false" />
    <p:ajax update="txt_assigned" event="blur" />
</p:inputText>

命令按钮：

<p:commandButton id="btn_save"
    title="Save"
    value="#{lbl['tpdetails.remove.additional.address']}"
    update="@form" process="@this"
    action="#{partnerDetailsController.save}">
</p:commandButton>

我正在使用 JSF 2.2

请提供一些建议来克服这种奇怪的行为。

注意：这里省略了表单相关的代码。

我们使用 ICEFaces 4.3 并且有同样的问题ace:textEntry（带有嵌套的ace:ajax提交模糊值的标签）和ace:pushButton。这是我在记录点击事件和jsf事件后发现的。

1. 单击一个ace:textEntry字段以使其获得焦点。
2. 输入一些字符来更改其内容。
3. 单击一个ace:pushButton.
4. 焦点失去了ace:textEntry，导致请求被发送到服务器，因为ace:ajax tag.
5. 点击事件在收到请求的响应之前触发。单击事件不会触发提交表单的新请求。
6. 收到请求的响应（从 4 开始）。

这里有一个竞争条件：如果在生成单击事件之前收到请求的响应，则单击将导致提交表单的请求。

您可以通过按下鼠标按钮轻松测试这一点，并且仅在收到请求的响应（从 4 开始）后才释放鼠标按钮。点击事件是为mouseup event.

我通过使用 Javascript 来检测 ajax 请求期间是否发生单击事件，为此问题创建了一个解决方法。仅当该 ajax 请求不是单击的结果时，等待 ajax 请求结束，然后再次调度 click 事件：

/** Indicates whether an ajax request is currently in progress. */
let ajaxRequestInProgress = false;

/** The source of the current ajax request. */
let currentAjaxRequestSource = null;

/** The event that must be delayed. */
let delayedEvent = null;

/** The event that has been redispatched after a delay. */
let redispatchedEvent = null;

function requestInProgressTracker(data) {
    const oldValue = ajaxRequestInProgress
    if (data.type === 'event' && data.status === 'begin') {
        ajaxRequestInProgress = true;
    } else if (data.type === 'event' && data.status === 'success') {
        ajaxRequestInProgress = false;
    } else if (data.type === 'error') {
        ajaxRequestInProgress = false;
    }

    if (oldValue !== ajaxRequestInProgress) {
        if (ajaxRequestInProgress) {
            console.log("------ Start of request");
            currentAjaxRequestSource = data.source;
        } else {
            console.log("------ End of request");
            currentAjaxRequestSource = null;
        }

        if (!ajaxRequestInProgress && delayedEvent) {
            setTimeout(() => {
                redispatchedEvent = delayedEvent;
                delayedEvent = null;
                console.log("------ Dispatch event again for", redispatchedEvent.target);
                redispatchedEvent.target.dispatchEvent(redispatchedEvent);
            }, 10); // Small delay to ensure this method is called after the request has completely finished.
        }
    }
}

function delayEventUntilAfterRequest(e) {
    if (!ajaxRequestInProgress) {
        return;
    }

    if (e === redispatchedEvent) {
        console.log("------ Prevent delaying and dispatching the event again for", e.target);
        return;
    }

    if (delayedEvent) {
        console.log("------ DELAY NEW EVENT WHILE OLD EVENT HAS NOT BEEN DISPATCHED AGAIN.");
    }

    if (currentAjaxRequestSource && currentAjaxRequestSource.contains(e.target)) {
        console.log("------ No need to delay this event, because the current request was triggered by the event for", e.target);
       return;
    }

    delayedEvent = e;
    console.log("------- Event occurred during request", e);
}

document.addEventListener("click", delayEventUntilAfterRequest);

jsf.ajax.addOnEvent(requestInProgressTracker);
jsf.ajax.addOnError(requestInProgressTracker);