我正在尝试实现 blockUI 和 unBlockUI 来相应地更新我的页面。几乎随机，它会毫无缺陷地工作，并随机吐出控制台中未定义的 blockUI。该代码使用下拉菜单，onchange 将更新表格和图表。
我尝试过各种不同的事情，比如确保
<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 ()
{
// Beinging of Filter show hide code
$("#accordion > li").click(function () {
if (false == $(this).next().is(':visible'))
{
$('#accordion > ul').slideUp(300);
$('#lblFilter').html("<b>-</b> Hide Filter");
}
else
{
$('#lblFilter').html("<b>+</b> Show Filter");
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
// End of Filter show hide code
var imagePath = pagePath.split("/");
var newImagePath = "";
for (i = 1; i < imagePath.length; i++) {
if (i == 2) {
//newImagePath = newImagePath + "/Areas/" + imagePath[i]; //Commeted because of loading image is not showing
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("Error: " + 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();
// use this if you are using id to check
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 + "'/> Loading...</div>", css: { backgroundColor: '#fff', border: '1px solid gray', padding: '10px'} });
console.log(sponsorSeqID);
//Top Table
$.ajax({
type: "GET",
url: pagePath + "/../../WebReports/BasicChartRptByCountryFor5344",
data: "patientFilter=" + sponsorSeqID,
success: function (response) {
$("#dvBasicChartRpt").html(response);
},
error: function (e) {
alert("BasicChart Fail");
alert("Error: " + e);
},
});
});
$("#btnViewReport").click(function () {
GetDataSubjectStatusReportSearch();
});
function GetDataSubjectStatusReportSearch() {
//Pulls up report from DB
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();
// use this if you are using id to check
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 not defined error handling
try {
$.blockUI({ message: "<div><img src='" + newImagePath + "'/> Loading...</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 + "'/> Loading...</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("Error: " + 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>
我相信我发现了这个问题，我正在使用这个：
<script type="text/javascript" src="https://malsup.github.io/jquery.blockUI.js">
我把它改为：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
现在似乎正在发挥作用