在进行 AJAX 调用时如何防止/停止提交命令按钮答案

【问题标题】：How to prevent/stop submit of commandbutton when having on going AJAX-call在进行 AJAX 调用时如何防止/停止提交命令按钮
【发布时间】：2021-12-29 13:22:05
【问题描述】：

我有一个包含几个不同文本字段的表单，用户需要填写这些字段才能进行下一步。通过单击命令按钮“下一步”访问页面的下一步，并且只有在所有字段都有效（在服务器上验证）时才应启用。

问题是用户可以在将输入有效的字段更改为无效输入后直接单击“下一步”按钮，而不会失去对该字段的关注，导致验证无法及时触发，以防止用户进入下一步。

这是其中一个字段的示例，以及执行提交的命令按钮。

<p:inputTextarea id="lineFreeText" value="#{line.freeText}" rows="1" disabled="#{facesContext.validationFailed and component.valid}"
    maxlength="#{itemConstant.MAX_FREE_TEXT_LENGTH}" counter="freeTextCounter"
    counterTemplate="{0}/#{itemConstant.MAX_FREE_TEXT_LENGTH}" rendered="#{showFreeText and !line.hasItemForm()}" validator="freeTextValidator" validatorMessage="#{messages.freeTextRequired}" requiredMessage="#{messages.freeTextRequired}">
        <p:ajax event="change" process="@this" listener="#{cartController.saveLine(line)}" update="@form cartForm lineFreeText lineEditedSymbols lineFreeTextMessage @([id$=nextStepBtn])" />
</p:inputTextarea>

     <h:commandButton value="#{messages['checkout.nextStep']}" id="nextStepBtn"  rendered="#{cartController.size() gt 0 and !clientContext.OCIRequest}"
        onclick="$('.jqRealNextStepButton').click();" style="border: 2px solid #008091; padding: 0.5em;"
        styleClass="ju-button" disabled="#{clientContext.client.visitor or checkoutDeliveryDateController.disableNextButton() or totalMinAmountNotMet or facesContext.validationFailed or not facesContext.postback}"
        title="#{clientContext.client.visitor ? messages.disabledForVisitor : tooltip}">
            <f:ajax execute="@this" />
    </h:commandButton>

我希望命令按钮在发生 ajax 时取消提交，以便在提交表单之前完成验证，从而防止用户输入无效数据并继续。有没有简单的方法可以做到这一点？

干杯

【问题讨论】：

查看此stackoverflow.com/questions/8886850/…
改用<p:commandButton> 或<p:ajax> 并重试。默认情况下，同一框架上下文中的 Ajax 请求是排队的。您现在使用 PrimeFaces 中的一个用于输入，而使用标准 JSF 中的一个用于提交。默认情况下，它们彼此不知道。
@BalusC 我尝试将 commandbutton 和 ajax-event 都更改为 primefaces 等效项，但仍然没有运气。还有其他想法吗？是否与命令按钮当前在命令链接上调用 click() onclick 的事实有关，该命令链接调用底层控制器，继续下一步？当我在 devtools 中检查时，我可以清楚地看到首先处理的 inputfield ajax 更改事件。
更新：我尝试删除导致按钮调用单击命令链接的步骤，并简单地将操作方法放在命令按钮上，voila - 立即工作喜欢你说会的。我将前开发人员归咎于实现此功能的团队 ;-) 感谢您的帮助！

标签： jsf primefaces

【解决方案1】：

解决方案是将commandbutton更改为primefaces，并删除指向另一个commandlink的onclick，该commandlink执行后端逻辑以遍历下一页。当我将操作方法放入 <p:commandbutton/> 时，ajax 事件已正确排队。

【讨论】：