You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Ajax时随机出现BlockUI未定义错误的问题求助

问题:blockUI功能随机报错“未定义”

我正在实现blockUI和unblockUI来在页面更新时显示加载状态,但这个功能时好时坏,控制台会随机抛出“BlockUI未定义”的错误。该功能配合下拉菜单使用,下拉菜单onChange事件触发时会更新表格和图表。

我已经尝试了多种方法,比如确保blockUI的脚本已正确加载:

<script type="text/javascript" src="https://malsup.github.io/jquery.blockUI.js"></script>

我有90%的把握语法没问题,也试过$.unBlockUI()写法,但稳定性更差。

以下是我的完整代码:

<script type="text/javascript" src="https://malsup.github.io/jquery.blockUI.js"></script>
<script language="javascript" type="text/javascript">
    var pagePath = window.location.pathname;
    $(document).ajaxStop($.unblockUI);
    $(document).ready(function () 
    {
        // 筛选器展开/收起代码
        $("#accordion > li").click(function () {

            if (false == $(this).next().is(':visible')) 
            {
                $('#accordion > ul').slideUp(300);
                $('#lblFilter').html("<b>-</b> 隐藏筛选器");
            }
            else 
            {
                $('#lblFilter').html("<b>+</b> 显示筛选器");
            }
            $(this).next().slideToggle(300);
        });

        $('#accordion > ul:eq(0)').show();
        // 筛选器展开/收起代码结束


        var imagePath = pagePath.split("/");
        var newImagePath = "";


        for (i = 1; i < imagePath.length; i++) {
            if (i == 2) {
                //newImagePath = newImagePath + "/Areas/" + imagePath[i]; //注释掉因为加载图片不显示
                newImagePath = newImagePath + "/" + imagePath[i];
            }
            else {
                newImagePath = newImagePath + "/" + imagePath[i];
            }
        }

        newImagePath = newImagePath + "/../../Content/images/loading.gif";

        $("#countryList").change(function () {
            $.ajax({
                type: "GET",
                url: pagePath + "/../../WebReports/GetSitesByCountry",
                data: "country=" + $(this).val(),
                success: function (response) {
                    $("#siteList").find('option').remove().end().append(response);
                },
                error: function (e) {
                    alert("错误: " + e);
                }
            });
        });

        $('#patientFilter').change(function () 
        {    
            GetDataSubjectStatusReportSearch();
            var sponsorSeqID = $('#patientFilter').val();
            //alert(sponsorSeqID);
            var country, siteID, sortBy, cohort, visitType;
            var status = new Array();
            country = $("#countryList").val();
            siteID = $("#siteList").val();
            cohort = $("#cohortSelected").val() == undefined ? "" : $("#cohortSelected").val();

            // 检查是否存在visitType元素
            if ($('#visitType').length) 
            {
                visitType = $("#visitType").val();
            } else
                visitType = 0;
            $('#tblPatientStatuses input:checked').each(function () 
            {
                status.push($(this).attr('value'));
            });

            var version = '@Context.Request.QueryString["V"]';
            sortBy = ($('#rdSortByPatID').is(':checked')) ? $('#rdSortByPatID').val() : $('#rdSortByEnrollDate').val();
            //$.blockUI({ message: "<div><img src='" + newImagePath + "'/>&nbsp;加载中...</div>", css: { backgroundColor: '#fff', border: '1px solid gray', padding: '10px'} });
            console.log(sponsorSeqID);
            //顶部表格
            $.ajax({
                type: "GET",
                url: pagePath + "/../../WebReports/BasicChartRptByCountryFor5344",
                data: "patientFilter=" + sponsorSeqID,
                success: function (response) {
                    $("#dvBasicChartRpt").html(response);                    
                },
                error: function (e) {
                    alert("基础图表加载失败");
                    alert("错误: " + e);
                },
            });
        });

        $("#btnViewReport").click(function () {
            GetDataSubjectStatusReportSearch();
        });

        function GetDataSubjectStatusReportSearch() {
            
            //从数据库拉取报表数据
            var country, siteID, sortBy, cohort, visitType;
            var status = new Array();
            country = $("#countryList").val();
            siteID = $("#siteList").val();
            cohort = $("#cohortSelected").val() == undefined ? "" : $("#cohortSelected").val();
            var sponsorSeqID = $('#patientFilter').val();

            // 检查是否存在visitType元素
            if ($('#visitType').length) {
                visitType = $("#visitType").val();
            } else
                visitType = 0;
            $('#tblPatientStatuses input:checked').each(function () {
                status.push($(this).attr('value'));
            });

            var version = '@Context.Request.QueryString["V"]';

            sortBy = $('#rdSortByPatID').is(':checked') ? $('#rdSortByPatID').val() : $('#rdSortByEnrollDate').val();

            //BlockUI未定义错误处理
            try {
                 $.blockUI({ message: "<div><img src='" + newImagePath + "'/>&nbsp;加载中...</div>", css: { backgroundColor: '#fff', border: '1px solid gray', padding: '10px'} });
            } catch (e) {
                if (e instanceof ReferenceError && e.message.includes("blockUI is not defined")) {
                    location.reload();
                } else {
                    console.error(e);
                }
            }
            //$.blockUI({ message: "<div><img src='" + newImagePath + "'/>&nbsp;加载中...</div>", css: { backgroundColor: '#fff', border: '1px solid gray', padding: '10px'} });
            $.ajax({
                type: "GET",
                url: pagePath + "/../../WebReports/SubjectStatusReportSearch",
                data: "country=" + country + "&siteID=" + siteID + "&status=" + status + "&sortBy=" + sortBy + "&cohort=" + cohort + "&visitType=" + visitType + "&version=" + version + "&sponsorSeqID=" + sponsorSeqID,
                success: function (response) {
                    $("#dvSubjectStatusRpt").html(response);
                },
                error: function (e) {
                    alert("错误: " + e);
                },
                complete: function () {
                    $(document).ajaxStop($.unblockUI);
                }
            });
        }
    });


    function OpenHelp(w, h) {
        var left = (screen.width / 2) - (w / 2);
        var top = (screen.height / 2) - (h / 2);
        return window.open(pagePath + "/../../WebReports/help", "help", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    }


    function OpenPrint(w, h, PatID) {
        var left = (screen.width / 2) - (w / 2);
        var top = (screen.height / 2) - (h / 2);
        return window.open(pagePath + "/../../WebReports/PatientPrintView?PatID=" + PatID, "help", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    }


    function markAllPatientStatuses() {
        var patStatCheckBoxList = document.getElementById('tblPatientStatuses');
        var checkBoxes = patStatCheckBoxList.getElementsByTagName("input");

        for (var i = 0; i < checkBoxes.length; i++)
            checkBoxes[i].checked = true;
    }
    function markNonePatientStatuses() {
        var patStatCheckBoxList = document.getElementById('tblPatientStatuses');
        var checkBoxes = patStatCheckBoxList.getElementsByTagName("input");

        for (var i = 0; i < checkBoxes.length; i++)
            checkBoxes[i].checked = false;
    }
</script>

内容的提问来源于stack exchange,提问作者acfive

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 17:55:54