Issue when refreshing - Object doesn't support this property or method.

adsarasin

I have been trying to solve this for days now. I am hoping that finally posting on this forum will be the last ditch effort that gets rid of this annoying bug.

I am currently building an ASP.NET application. I've been using DataTables to render the .NET gridviews and everything has been working beautifully....most of the time.

I am finding that sometimes when I load the application, or when I hit refresh in the browser I get an error saying "Object doesn't support this property or method"

[code]
//Build Data Table
var gv = $('#gvFiles');
var tr = gv.find('tr:first').detach();
gv.prepend($('').append(tr));
gv.dataTable({
'fnDrawCallback': function (oSettings) {
if (oSettings.aiDisplay.length == 0) {
return;
}
var nTrs = $('#gvFiles tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for (var i = 0; i < nTrs.length; i++) {
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[1];
if (sGroup != sLastGroup) {
var nGroup = document.createElement('tr');
var nCell = document.createElement('td');
nCell.colSpan = iColspan;
nCell.className = 'ui-state-default';
nCell.innerHTML = sGroup;
nGroup.appendChild(nCell);
nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
sLastGroup = sGroup;
}
}
},
'aaSortingFixed': [[1, 'asc']],
'aaSorting': [[1, 'asc']],
'bJQueryUI': true,
"sDom": '<"toolbar"><"H"fr>t<"F"lip>',
'aoColumnDefs': [
{ 'bVisible': false, 'aTargets': [0, 1] }
],
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
});
[/code]

It is almost as if the dataTables script file hasn't loaded completely by the time this function is fired. Is this a timing issue? Are my script files conflicting with one another? Any ideas?

Thank you,

Adam

adsarasin

Oh btw this line of code wrapped in $(document).ready(function () {....}

adsarasin

I suspect that the issue has to do with multiple .js files downloading and running in parallel. In an attempt to resolve the issue, I tried using head.js (http://headjs.com/). Head.js allows you to set an order for which you want your script files to load. This seemed to solve the issue, but the entire application locked up when I tried running it in an older IE7 browser.

Should I try using a different script loader like LabJS or RequireJS(http://net.tutsplus.com/articles/web-roundups/for-your-script-loading-needs/)?

Maybe there is a more simple solution that I am missing. I am fairly new with this stuff.

allan

I haven't used either of those script loaders, but it might be worth asking in their forums / support what the issue might be. If you have a look at the page with IE's developer tools when you get the error, you should be able to see what scripts have been loaded and in what order. The only thing DataTables requires is jQuery, and you should only have the jQuery and DataTables scripts included just once on a page.

Allan

adsarasin

Hello Allan,

Thank you for your response! I just wanted to let you know that I have resolved this issue. Turns out, it had nothing to do with the code. It was just a quirk that was occuring when developing locally in Visual Studio. I went ahead and deployed the application to an actual web server and everything seems to be golden.

Thank you,

Adam