I'm trying to implement blockUI and unBlockUI to update my page accordingly. Almost randomly, it will work without flaw and randomly spit out blockUI not defined in the console. The code works with a dropdown menu that onchange will update tables and a chart.
I have tried various different things, like making sure
<script type="text/javascript" src="https://malsup.github.io/jquery.blockUI.js"></script>
is loaded correctly. I'm 90% sure my syntax is correct, I have also tried $.unBlockUI() but it seemed to be even more inconsistent writing it that way.
Here is my code:
<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>
