最终用户快速单击多个框时复选框值未保存答案

【问题标题】：checkbox values not saving when end users click multiple boxes fast最终用户快速单击多个框时复选框值未保存
【发布时间】：2021-02-15 21:24:26
【问题描述】：

我遇到了一个问题，即用户快速检查次要项目是否已完成，并且他们在几毫秒之间单击了一些框，这导致值未保存。我不确定如何最好地进行，因为我不确定这个问题。如果点击速度变慢，则点击保存，但加速时日志不会显示任何错误。

使用primefaces的复选框：

<p:column styleClass="datatable-column-small" sortBy="#{task.complete}" headerText="Complete">
    <h:panelGroup styleClass="panel-group-center">
        <p:selectBooleanCheckbox value="#{task.complete}">
            <p:ajax listener="#{cc.attrs.managedBean.toggleCheckbox(task)}" update="@form "/>
        </p:selectBooleanCheckbox>
    </h:panelGroup>     
</p:column>

豆子：

public void toggleCheckbox(VerificationTaskEntity task) {
        if (isReadyForTaskUpdate()) {
            logger.info("Task checkbox updated");
            
            // check if task is complete and remove simulated and follow up date if so - also prevents inputs in these fields if complete
            if (task.isComplete() == true) {
                task.setSimulated(false);
                task.setFollowUpDate(null);
            }           
            else if (task.getSimulated() != null && task.getFollowUpDate() == null) {
                // check if task was set to simulated and automatically set a follow-up date if so
                if(task.getSimulated() == true) {   task.setFollowUpDate(new Date());}
                else {  task.setFollowUpDate(null);}            
            }
            
            getTaskService().updateTask(task);
        }
        else {
            String warnMessage = "Project not ready for verification. Please update required fields in project.";
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN,WARN_SUMMARY,warnMessage));          
        }
    }

【问题讨论】：

不得不说，对 primefaces 一无所知，但是通过查看您的代码并阅读问题，我怀疑问题在于“快速点击”用户在if (isReadyForTaskUpdate()) 块内点击您的代码，因此不会被捕获。那有意义吗？要检查，您可以在 if? 中放置一个“内部 try/catch 块？”
有一个迂回的时间，视图将更新和提取值 - 在这种情况下，导致 JSF 重新加载包含表单的视图部分。这可能在用户交互期间发生。如果您更新整个表单，这正是您所期望的。在这种特定情况下，您直接在 ajax 标记上有一个侦听器，所以我认为 update="@this" 应该在您的特定情况下解决它。没有看到更多的代码，我不知道这是否对你有用。
想象一下这一系列事件。 1. ajax 请求触发。 2. JSF 开始更新视图，在用户碰巧点击另一个复选框的那一刻。 3. 因为update="@form"，整个表单更新——覆盖来自用户的交互。

标签： java jsf primefaces

【解决方案1】：

cmets 部分的 Adam 很到位。对我来说很容易疏忽。我更正了代码以反映要更新的正确实例。

<p:column styleClass="datatable-column-small" sortBy="#{task.complete}" headerText="Complete">
    <h:panelGroup styleClass="panel-group-center">
        <p:selectBooleanCheckbox value="#{task.complete}">
            <p:ajax listener="#{cc.attrs.managedBean.toggleCheckbox(task)}" update="@this "/>
        </p:selectBooleanCheckbox>
    </h:panelGroup>     
</p:column>

非常感谢 Adam，因为我一直在关注后端代码，而不是前端方法上的明显问题。

【讨论】：