OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

BlockUI not defined error issue with ajax

  • Thread starter Thread starter acfive
  • Start date Start date
A

acfive

Guest
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

Code:
<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:

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 + "'/>&nbsp;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 + "'/>&nbsp;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 + "'/>&nbsp;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>
<p>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.</p>
<p>I have tried various different things, like making sure</p>
<pre><code><script type="text/javascript" src="https://malsup.github.io/jquery.blockUI.js"></script>
</code></pre>
<p>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.</p>
<p>Here is my code:</p>
<pre><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; //Commeted because of loading image is not showing
newImagePath = newImagePath + "/" + imagePath;
}
else {
newImagePath = newImagePath + "/" + imagePath;
}
}

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 + "'/>&nbsp;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 + "'/>&nbsp;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 + "'/>&nbsp;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.checked = true;
}
function markNonePatientStatuses() {
var patStatCheckBoxList = document.getElementById('tblPatientStatuses');
var checkBoxes = patStatCheckBoxList.getElementsByTagName("input");

for (var i = 0; i < checkBoxes.length; i++)
checkBoxes.checked = false;
}
</script>
</code></pre>
Continue reading...
 
Top