Trying to create DataTable in a Jquery UI dialog... no luck

bigdaddyv

On my main page, I have a simple HTML table. Once the DOM is ready, I initialize DataTable just fine on that HTML table. A link in one of the cells in that table causes a Jquery UI Dialog to be "opened" by calling a javascript function (OpenTheDialog())

OpenTheDialog() makes a ajax call to my server and builds the Jquery UI Dialog's html perfectly. At this point, I basically have just another HTML table within the Jquery UI Dialog. Example:
[code]
$("#my_selector").html( $("whatever",xml).text() )
[/code]
After this new table is loaded, I simply want to turn it into a DataTable for obvious reasons... DataTable rocks!

I've tried just about everything I can think of and cannot get DataTable to take over on that table.
[code]
oTable2 = $("#my_selector").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
});
oTable2.fnDraw();
[/code]
Any other ideas on how to make this work as expected?

Thanks so much,
V

allan

Hi V,

What is the ID of the table you want to use DataTables on? It is the "my_selector"? If so, is it inserting HTML in the format DataTables needs (i.e. with a THEAD and TBODY)? It isn't "my_selector", then something like this would probably do the trick:

[code]
oTable2 = $("#my_selector table").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
});
oTable2.fnDraw();
[/code]
Allan

bigdaddyv

Brilliant! Thanks Allan... I couldn't see the forest because of all the trees! I was referring to the outside wrapper DIV's id and not the table. I will give that a try.

bigdaddyv

That fell over as well.

Here is what I am trying to do...

My main page creates a list of what we call 'assets' This list is merely a HTML table that I now display using DataTable. That works perfectly.

At the end of the row in this new table (oTable), I have a link that says, "view details" When the user clicks on this link, my javascript code makes the ajax call to my server to get another table of all the detail records for this given asset. I then put the code returned by the ajax call into the DIV tag on that dialog before opening it.

I have tried creating oTable2 both before and after the ajax call. When I create oTable2 once DOM is ready and then just update it after the ajax call, I get the following error reported in the browser....

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Tue, 4 Jan 2011 22:43:29 UTC

Message: 'asSorting' is null or not an object
Line: 143
Char: 171
Code: 0
URI: http://tad.localhost.com/js/jquery.dataTables.min.js

Any thoughts?

bigdaddyv

I have did some research. This error ONLY occurs when I have two DataTables on the same page in this fashion. Is this true?

allan

Hi V,

What version of DataTables are you using? There was a bug with 1.7.2 (or 1.7.1 can't quite remember now) with multiple pages on a page, with a different number of columns - but that was fixed. If you run the non-minified version of DataTables, what line is the error there?

If you are creating the table for DataTables to use in the Ajax callback, the DataTables initialisation must also be in the Ajax callback - after the table has been inserted into the DOM. Can you post some of the Javascript which you are using to do this - specifically the Ajax and DataTables initialisation stuff?

Thanks,
Allan

bigdaddyv

Hi Allan,

I'm using 1.7.5. Here is some of my code...

[code]

var oTable;
var oTable2;

function details(asset_id) {
$("#please-wait").dialog( "open" );
$.ajax({
type: "GET",
url: "/ajax/get_asset_details&asset_id=" + asset_id,
async: false,
cache: false,
success: function(xml){ $("#dlgDetails #detail_html").html( $("message",xml).text() ); },
error: function() { alert('Ajax Error!') }
});
$("#please-wait").dialog( "close" );
oTable2.fnDraw();
$("#dlgDetails").dialog( "open" );
}

$(document).ready(function() {

$("#please-wait").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
resizable: false,
autoResize: true,
modal: true,
overlay: { backgroundColor: "#000", opacity: 0.5 },
title: 'Processing...',
});
$('#please-wait').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();

oTable = $("#tbl").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});

oTable2 = $("#tblComponents").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});

$("#dlgDetails").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
resizable: false,
autoResize: true,
modal: true,
title: 'Asset Details',
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: {
Close: function() {
$(this).dialog("close");
}
}
});

})





Please wait




Some extra language goes here...
testtest







Id
Name
Action



<?php
foreach( $asset_list as $a ) {
echo "\r\n";
echo "". $a['id'] ."\r\n";
echo "". $a['name'] ."\r\n";
echo ''. "\r\n";
echo "\r\n";
}
?>





[/code]

The ajax typically looks like this....

[code]

The extra language for this particular asset would be here.
Serial NumberNote123Bob's laptop123-ABob's carrying case

[/code]

allan

If you use this for your 'details' function - does it help any?:

[code]
function details(asset_id) {
$("#please-wait").dialog( "open" );
$.ajax({
type: "GET",
url: "/ajax/get_asset_details&asset_id=" + asset_id,
async: false,
cache: false,
success: function(xml){
$("#dlgDetails #detail_html").html( $("message",xml).text() );

oTable2 = $("#tblComponents").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});
},
error: function() { alert('Ajax Error!') }
});
$("#please-wait").dialog( "close" );
oTable2.fnDraw();
$("#dlgDetails").dialog( "open" );
}
[/code]
Before you were trying to initialise a table which wasn't yet available!

Allan

bigdaddyv

I'll try it and report back. The table did exist in the original code though. Look at line 74 in the first bit of code.

bigdaddyv

I tried the code as you suggested. It no longer errors out as before, but it also never comes back from the success function. I put an alert() in front of the call to oTable2 initialization to see what the $("message",xml).text() returned. Here is what I am sending back...

[code]




TitleA.C.E. It - Opening Montage/Perspectives/Set the Stage
Short DescriptionAcknowledging the variety of tough situations that can arise in the workplace
Industry SettingIndustrial & Manufacturing, Office & General
Diversity Profile1 Hispanic male, 1 Middle Eastern female, 1 Asian male
Main TopicInterpersonal Skills
Other TopicsChange, Communication, Leadership, Sales & Service
Target AudienceEmployees
LanguageEnglish
Trainer CommentsWhen using a series of vignettes from A.C.E. It, use this opening to help position why the skill is needed and introduce the three-step model.
Source ProgramA.C.E. It! How to Solve Tough Workplace Problems
Price1.00
KeywordsProblem Solving







Id #FormatFile NameTypeRun TimeLanguagePlayDownload
15Video with graphics and narratorACEIT_VBS1intro_CG.wmvwmv2:44EnglishPlayDownload
16Video with graphics and narratorACEIT_VBS1intro_CG.flvflv2:44EnglishPlayDownload
17Video without graphicsACEIT_VBS1intro_NOCG.wmvwmv2:44EnglishPlayDownload
18Video without graphicsACEIT_VBS1intro_NOCG.flvflv2:44EnglishPlayDownload

[/code]

I also put an alert after the call to oTable2 = $("tblComponents").dataTable(...) and it never comes back. When I try to initialize oTable2 it simply freezes my browser and never it comes back from the call to dataTable()

bigdaddyv

I just did some further testing. I took the ajax call out entirely. I then built the tblComponents in my main code and initialized otable2 at the same time I initialized otable.

The same error occurred as yesterday. Apparently the dataTable just doesn't like two calls to it. I get the same JavaScript error as before in IE. In firefox, it simply trashes the Jquery stuff altogether. ie: menu's are loaded, dialogs are created and hidden, etc.

I sure hope this info helps you help me. I'm lost at this point.

bigdaddyv

Here is the error I get WHENEVER I have two or more calls to dataTable().

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Wed, 5 Jan 2011 20:07:28 UTC


Message: 'asSorting' is null or not an object
Line: 6779
Char: 6
Code: 0
URI: http://blah.blah.blah.com/js/jquery.dataTables.js

bigdaddyv

OH MY GOSH! I think I just spotted my error. It looks like the ajax isn't putting in the and tags. Argh! I'll try it now and get back to you.

bigdaddyv

I have never been so embarassed in all my days as a programmer. ;) The main problem was the and tags missing. It was also a problem that because of the position changing within the DOM that I had to do as you suggested and move the oTable2 initialization to the Details() function as well. The two combined has fixed my problem. Thanks again for your wonderful product and your support. Without your prodding me down the path, I might never have found this error in my code.

I find it interesting though... how you reference the position within the DOM of the table. According to my understanding of your .js code, it looks like you are keeping a reference to where the table exists and if I change the html() of a container class, it blows away your pointer. That's good information to have and helps me understand your code a bit better too. Thanks!

allan

Heh - an inner monologue... ;-). Great to hear you got it sorted - nice one!

> [...] how you reference the position within the DOM of the table [...]

Basically the way DataTables works is that when you initialise a table, it will look through it's cache to see if that table has already been defined - if it has, it will operate on that one (i.e. retrieve an already initialised object), if not it will create it. The matching is done on the table node, is if the table node is removed and replaced, the match cannot succeed.

One thing that is worth noting - you might want to call fnDestroy in order to free up the memory taken up by tables that you are destroying. Otherwise, although the reference has been removed from the DOM, it won't have been removed from the Javascript pointer - thus effectively giving a memory leak.

Allan

bigdaddyv

Thanks Allan... the memory leak is how I found out when I needed to call the initialization. I traced that backwards in your code and found it.