复选框更新不同步问题

最新推荐文章于 2023-12-05 16:43:15 发布

原创最新推荐文章于 2023-12-05 16:43:15 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

日常记录专栏收录该内容

14 篇文章

订阅专栏

博客内容涉及了一个在教学区管理中遇到的复选框更新不同步问题。问题表现为新增教学区后，主页的复选框未立即显示更新，需要刷新页面，而添加教室界面则能立即看到。经过排查，发现是由于主页代码错误地引用了添加教室界面的复选框ID。修正这一错误导致添加教室界面的复选框短暂消失，进一步调试后，选择框恢复正常并能正确展示信息，从而解决了同步问题。

在此处添加教学区后，发现在教室管理》教学区选择框中并没有发现最新添加的教学区，需要刷新页面才能看到

而在点击了添加教室后，却可以直接看到最新添加的教学区

一开始以为是在点击了添加教室后，绑定了提交信息的代码

后来经过仔细排查，发现是由于主页教学区的（A）选择框与添加教室教学区的（B）选择框并不是同一个ID，而主页中的代码却选择了B选择框，所以在更新教学区后，B可以马上更新

//填充教学区下拉列表
function getAllAreaSelector() {
    if (isFristGetAllAreaSelector) {
       // $("#operator_schoolAreaSelector").selectpicker({
        $("#search_classroom_areaSelector").selectpicker({
            noneSelectedText: '请选择',//默认显示内容
            size: 5
        });
        //数据赋值
        var select= $("#search_classroom_areaSelector")
      //  var select= $("#operator_schoolAreaSelector")
        var html = "";
        var url = "/school/schoolArea/list";
        var data = {"rows": -1};
        $.post(url, data, function (result) {
            if (result.resCode == "0") {
                var areaList = result.rows;
                for (var i = 0; i < areaList.length; i++) {
                    html += "<option value='" + areaList[i].areaId + "'>" + areaList[i].areaName + "</option>";
                }
                // $("#operator_schoolAreaSelector").empty();
                // $("#operator_schoolAreaSelector").append(html);
                // $('#operator_schoolAreaSelector').selectpicker('refresh');
                select.empty();
                select.append(html);
                select.selectpicker('refresh');
                //初始化刷新数据
                isFristGetAllAreaSelector = false;
            }
        });
    }
}

<div class="form-group">
                        <label for="text" class="col-lg-3 col-sm-3 control-label">教学区名称</label>
                        <div class="col-lg-7 col-sm-7">
                            <select id="operator_schoolAreaSelector" name="schoolAreaSelector"
                                    class="selectpicker  form-control " data-live-search="true"></select>
                        </div>
                    </div>

修改之后发现添加教室里的B选择框消失了，再debug

后来选择框重现了，却不能展示信息

//当前用户点击了添加教室按钮
function addClassroomModal() {
    //刷新教学区列表
    //getAllAreaSelector();
        $("#operator_schoolAreaSelector").selectpicker({
            noneSelectedText: '请选择',//默认显示内容
            size: 5
        });
        //数据赋值
        var html = "";
        var url = "/school/schoolArea/list";
        var data = {"rows": -1};
        $.post(url, data, function (result) {
            if (result.resCode == "0") {
                var areaList = result.rows;
                for (var i = 0; i < areaList.length; i++) {
                    html += "<option value='" + areaList[i].areaId + "'>" + areaList[i].areaName + "</option>";
                }
                $("#operator_schoolAreaSelector").empty();
                $("#operator_schoolAreaSelector").append(html);
                $("#operator_schoolAreaSelector").selectpicker('refresh');
                //初始化刷新数据
                isFristGetAllAreaSelector = false;
            }
        });
  //  }
    //刷新设备列表
    getClassroomCameraSelector();
    $("#operator_classroomName").val("");
    // $("#classroom_areaSelector").selectpicker({
    //     noneSelectedText: '请选择',//默认显示内容
    //     size: 5
    // });
    $("#classroomOperatorButton").attr("onclick", "addClassroom()");
    $("#classroomTitle").text("添加教室信息");
    $("#classroomModal").modal();
}

至此Bug就已初步解决了