Missing Settings Objects On Initial Page Load

adsarasin

Hello DataTables Community,

I have an interesting one for you all today. I have a page that contains 11 separate tables that I am using the DataTables plugin with. There is one on the main page, and the others are displayed in jquery dialogs when a button is clicked. Before you ask, this is for an enterprise application hosted on the companies intranet, so I can not offer a link to view unfortunately.

The problem seems to only occur after the browsers cache has been cleared, and the application is opened for the first time. I am logging the
'$.fn.dataTableSettings' array of objects and only 9 of the 11 tables have settings objects. This causes interesting visual bugs like preventing the jquery dialog to appear, and tables showing up in the wrong areas, etc.

Once the application is loaded for the first time, if you refresh the browser it works fine, as all 11 tables are initialized and have settings objects.

The interesting thing is, the missing settings objects are different for different individuals. On my PC I am missing the 'tblSubmitDocMgmt' and 'tblLoansReadyForDoc' while a co-worker is missing 'tblSubmitDocMgmt' and 'tblMain'.

Another piece of (maybe) relevant info is that I am using Google Chrome Frame and running this in an IE 8 browser. I am unable to re-create this when running in Google Chrome.

Anyone else run into missing settings objects on initial page load? Maybe I am trying to initialize too many datatables at the same time? Would it be better to initialize the datatables in the jQuery dialogs only when the dialog displays? Instead of all at once?

The function I am using to initialize all of the tables is in the next post (exceeded char limit)

Please excuse any blatantly n00bish code.

Thank you.

adsarasin

[code]
function initializeDataTables() {

//Build Main Landing Page Data Table
var gv = $('#tblMain');

landingPageTable = gv.dataTable(mainTableInitObject);

updateMainTable(); //Fill tblMain with data

//Build Data Table for Submit Loans To QLR Page
$('#tblLoansToSubmit').dataTable({
'bJQueryUI': true,
'sDom': '<"hdrLoansToSubmit"><"H">t<"F"lip>',
'bAutoWidth': false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});

//build custom toolbar and inject into the table toolbar
var tblLoansSubmitHeader = $("div.hdrLoansToSubmit").html('Submit Loans to QLR');
tblLoansSubmitHeader.prependTo(tblLoansSubmitHeader.next());

//Build Data Table for Submit Loans To QLR Page
$('#tblNewLoans').dataTable({
'bJQueryUI': true,
'sDom': '<"hdrNewLoans"><"H">t<"F"lip>',
'bAutoWidth': false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});

//build custom toolbar and inject into the table toolbar
var tblNewLoansHeader = $('div.hdrNewLoans').html('My Loans to Submit');
tblNewLoansHeader.prependTo(tblNewLoansHeader.next());
tblNewLoans = $('#tblNewLoans').dataTable();

//Build Data Table for Check In Page
$('#tblLoansCheckedIn').dataTable({
'bJQueryUI': true,
'sDom': '<"hdrLoansCheckedIn"><"H">t<"checkedInFooter"><"F">',
'bAutoWidth': false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1
});
//build custom toolbar and inject into the table toolbar
var tblLoansCheckedHeader = $("div.hdrLoansCheckedIn").html('Loans To Check In');
tblLoansCheckedHeader.prependTo(tblLoansCheckedHeader.next());
var tblLoansCheckedFooter = $('div.checkedInFooter').html($('#checkedInFooter'));
tblLoansCheckedFooter.prependTo(tblLoansCheckedFooter.next());
$('#checkedInFooter').removeClass('hidden');

//Build Data Table for Recently Submitted Table
$('#tblLoansRecentlySubmitted').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
"sDom": '<"hdrLoansRecentlySubmitted left"><"H"f>t<"F"lip>',
"sPaginationType": "full_numbers",
"oLanguage": {
'sSearch': "Filter By Branch: "
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [6] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [6] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
//build custom toolbar and inject into the table toolbar
var tblLoansRecentHeader = $("div.hdrLoansRecentlySubmitted").html('Recently Submitted')
tblLoansRecentHeader.prependTo(tblLoansRecentHeader.next());

recentlySubmittedTable = $('#tblLoansRecentlySubmitted').dataTable();
$('#tblLoansRecentlySubmitted_filter input').keypress(function(e) {
//If keycode is not a number or is 'tab' or 'enter' do nothing
if ((e.keyCode < 48 || e.keyCode > 57) &&
e.keyCode != 8 &&
e.keyCode != 13) {
return false;
}
//Filter based off of the input
}).keyup(function() {
if (this.value == '')
recentlySubmittedTable.fnFilter(this.value, 4);
else
recentlySubmittedTable.fnFilter('^' + this.value + '$', 4, true);
});

//Build Data Table for Submit Loans To DOC Mgmt Page
$('#tblSubmitDocMgmt').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"hdrSubmitDoc"><"H">t<"F"lip>',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
//build custom toolbar and inject into the table toolbar
var tblLoansSubmitDocHeader = $("div.hdrSubmitDoc").html('Loans To Submit');
tblLoansSubmitDocHeader.prependTo(tblLoansSubmitDocHeader.next());

//Build Data Table for Loans ready to submit to Doc
$('#tblLoansReadyForDoc').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"hdrLoansRdyForDoc"><"H">t<"F"lip>',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [6] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [6] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
var tblLoansReadyForDocHeader = $('div.hdrLoansRdyForDoc').html('Loans Ready to Submit');
tblLoansReadyForDocHeader.prependTo(tblLoansReadyForDocHeader.next());
tblLoansRdyForDoc = $('#tblLoansReadyForDoc').dataTable();



[/code]

adsarasin

[code]
//Build Data Table for Checkin Loans to Doc Mgmt Page
$('#tblLoansToImage').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"loansToImageHeader"><"H">t<"docCheckedInFooter"><"F">',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1
});
//build custom toolbar and inject into the table toolbar
var tblLoansToImageHeader = $("div.loansToImageHeader").html('Loans To Check In for Imaging');
tblLoansToImageHeader.prependTo(tblLoansToImageHeader.next());
var tblLoansToImageFooter = $('div.docCheckedInFooter').html($('#docCheckedInFooter'));
tblLoansToImageFooter.prependTo(tblLoansToImageFooter.next());
$('#docCheckedInFooter').removeClass('hidden');

//Build Data Table for Loans ready to checkin for imaging
$('#tblLoansReadyToImage').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"loansReadyToImageHeader"><"H">t<"F"lip>',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
var loansReadyToImageHeader = $('div.loansReadyToImageHeader').html('Loans Ready for Imaging');
loansReadyToImageHeader.prependTo(loansReadyToImageHeader.next());
tblLoansReadyToImage = $('#tblLoansReadyToImage').dataTable();

//Build Data Table for Flag as Imaged Page
$('#tblImageLoans').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"hdrLoansToImage"><"H">t<"F"lip>',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
//build custom toolbar and inject into the table toolbar
var tblImageLoansHeader = $("div.hdrLoansToImage").html('Loans To Flag as Imaged');
tblImageLoansHeader.prependTo(tblImageLoansHeader.next());
tblImageLoans = $('#tblImageLoans').dataTable();

//Build Data Table for Loans ready to submit to Doc
$('#tblCheckedInForImage').dataTable({
'bJQueryUI': true,
'bAutoWidth': false,
'sDom': '<"hdrCheckedInForImage"><"H">t<"F"lip>',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [5] },
{ "bVisible": false, "aTargets": [0] },
{ "sWidth": "26px", "aTargets": [5] }
],
"iDisplayLength": -1,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
var tblCheckedInForImageHeader = $('div.hdrCheckedInForImage').html('Loans Checked In for Imaging');
tblCheckedInForImageHeader.prependTo(tblCheckedInForImageHeader.next());
tblCheckedInForImage = $('#tblCheckedInForImage').dataTable();

console.log($.fn.dataTableSettings);
} //end initialize datatables
[/code]

allan

I've not hear of this before, so I'm not sure how much help I'll be able to offer, particularly if it can only be reproduced in Chrome Frame. But if you reduce all of the above code to `$('table.datatable').dataTable()` (with the `datatable') class on those tables you want to have as DataTables, do you get 11 tables?

You could also try putting your code into a `$(window).onload` block just incase the DOM ready timer is going funny.

Allan