I have a few questions on some behavior I am seeing with my AJAX POST.
I was having issues with using getScript to load 3 .js files in the POST success code. I am seeing on a browser refresh (to test changes) that sometimes the datatable loads (doesn't error out on not a function) and other times it does.
Why does my datatable load work half the time? As I never load datables.js I would expect this to fail every single time. Am I wrong in assuming that javascript loaded in the main page is not available to the AJAX loaded content?
I have tried running async and it doesn't seem to help. I have tried nesting the datatables.js script inside the getScript for bootstrap.js which works, but there is a flicker of the HTML table before the datatable load and it looks really cheesy. When the datatable init is outside the getScript, it doesn't flicker, but as mentioned before, it only works intermittently.
Here is the code:
success: function (result) {
// successful request; do something with the data
$.getScript('js/jquery-2.2.4.js');
$.getScript("js/bootstrap.js", function (data, textStatus, jqxhr) {
console.log(textStatus); // Success
console.log(jqxhr.status); // 200
if (jqxhr.status == 200) {
//load tooltips (well.. popover)
$(".itemToolTip").popover({
trigger: 'hover',
})
// required so we can have popups when pagination occurs
var table = $('#tblItems').DataTable({
drawCallback: function () {
$('[data-toggle="popover"]').popover();
}
});
}
console.log("Load was performed.");
});
$('#divTable').html(result);
}