Trying to create DataTable in a Jquery UI dialog... no luck
Trying to create DataTable in a Jquery UI dialog... no luck
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
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
This discussion has been closed.
Replies
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
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?
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
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]
[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
[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()
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.
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
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!
> [...] 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