使用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 + "'/> 加载中...</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 + "'/> 加载中...</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 + "'/> 加载中...</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
相关产品推荐
相关产品推荐

