I have a page that reads the excel file and load it onto a datatable which gets rendered inside a div. The user has to see the results of the uploaded file before they can continue with processing, this means I have two button events in one page, user has the ability to load a fresh copy of file from file-uploader, this means the block ui must be called whenever the user clicks the load button.
The problem I have is, the blockui only works for the first time, when I click on the button again with fresh copy of excel an error "blockUI is not a function" pops up. There was a suggestion to set the async inside ajax call to true, tried that but still not joy. My scripts are loaded using bundle config
I have a jquery method that reads the file and append the returned data into a div in a form of datatable, below is my jquery code
$('#rateGroupsForm').submit(function(e) {
e.preventDefault(); // stop the standard form submission
$.blockUI();
$.ajax({
url: '@Url.Action("ReadUploadedFile","Rates")',
type: 'POST',
data: new FormData(this),
cache: false,
async: true,
contentType: false,
processData: false,
success: function (data) {
if (data) {
$.unblockUI();
$('#rateGroupsDiv').empty();//remove all existing data before loading fresh one
$('#rateGroupsDiv').append(data);
}
},
error: function(xhr, error, status) {
console.log(error, status);
$.unblockUI();
}
});
})
Problem solved, the "rateGroupsDiv" is getting loaded via a partial page which did not have any blockui script onto it, included the block ui script the partial page and all is well now