datatables drill-down Uncaught TypeError: Object (object Object) has no method 'live'
datatables drill-down Uncaught TypeError: Object (object Object) has no method 'live'
I'm a MVC/datatables newbie and am modeling a drill-down table on the excellent example at http://datatables.net/blog/drill-down_rows. I've got the ajax binding working and the first level of the table renders. I haven't applied any formatting as yet until I get the drill-down rows to work. This is an ASP.Net MVC3 project.
When I click the image to open the drill down rows I get an uncaught error for no method 'live' of the td.control. I think my problem is the lack of the css file that defines [code]"sClass": "control center",[/code].
I'd really appreciate if someone can point me in the right direction and also let me know if I've got my drill down rows code set up properly. I'm binding a List collection of Batch objects. A Batch object contains several properties including a List collection of Transaction objects. The Transaction objects will be displayed in the drill down rows on demand.
Thanks in advance for both help and patience! I could have done this in a traditional ASP.Net project type in which I'm expert but I want to master this new pattern. Datatables look like the cat's pajamas! (whatever that means!) :)
The includes for the project are defined in _Layout.vbhtml as follows:
[code]
<!DOCTYPE html>
@ViewData("Title")
@RenderBody()
[/code]
The View code is defined as follows:
[code]
@ModelType MVC3Test.BatchCollection
@Code
ViewData("Title") = "Batchlist2"
End Code
Batchlist2
BatchID
Transmitted Date/Time
Completed Date/Time
Created By
Created Date/Time
// This will run the code instead the function() {} as soon as the page is ready.
// Hence: Document.ready
$(document).ready(function () {
var anOpen = [];
var oTable;
var sImageURL = "/Images/"; //path to image files
// AJAX call to get batch list
// it will return into the data object
$.ajax(
{
type: "GET",
url: '@Url.Action("FetchBatchList", "Batch")',
error: function (xhr, statusText, errorThrown) {
if (statusText === 'timeout')
alert('The server is not responding');
if (statusText === 'error')
alert("Error: " + errorThrown);
}, //end of ajax error block
success: function (data) {
//"sAjaxSource": "",
// Create Data Table
oTable = $('#batch_table').dataTable(
{
"bProcessing": true,
"aaData": data.BatchList, // Initialize datatables with data object
"aoColumns": [ // Bind table columns with properties
{
"mData": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mData": "BatchID" },
{ "mData": "Transmitted_DateTime" },
{ "mData": "Completed_DateTime" },
{ "mData": "Created_EmpID" },
{ "mData": "Created_DTTM" }
]
}); // End dataTable()
debugger;
} //end of ajax success block
}); // end $.ajax call
}); // end $(document).ready(....
// animation control code
$('#batchGrid td.control').live('click', function () {
debugger;
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
if (i === -1) {
$('img', this).attr('src', sImageURL + "details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slidedown();
anOpen.push(nTr);
}
else {
$('img', this).attr('src', sImageURL + "details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideup(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
// detail table row html goes in the following section
function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
debugger;
var tranData; //this will contain an instance of a transaction object from the transactions collection
for (tranData in oData.GetTranCollection) {
var sOut = '' +
'' +
'' +
'TransactionID:' + tranData.ID + '' +
'SOR_ID:' + tranData.SystemOfRecordID + '' +
'PostingFlag:' + tranData.PostingFlag + '' +
'Posting_DTTM:' + tranData.Posting_DTTM + '' +
'PostingMessage:' + tranData.PostingMessage + '' +
'PostingMessage:' + tranData.XMLTransactionData + '' +
'' +
'' +
'';
return sOut;
}
}
[/code]
When I click the image to open the drill down rows I get an uncaught error for no method 'live' of the td.control. I think my problem is the lack of the css file that defines [code]"sClass": "control center",[/code].
I'd really appreciate if someone can point me in the right direction and also let me know if I've got my drill down rows code set up properly. I'm binding a List collection of Batch objects. A Batch object contains several properties including a List collection of Transaction objects. The Transaction objects will be displayed in the drill down rows on demand.
Thanks in advance for both help and patience! I could have done this in a traditional ASP.Net project type in which I'm expert but I want to master this new pattern. Datatables look like the cat's pajamas! (whatever that means!) :)
The includes for the project are defined in _Layout.vbhtml as follows:
[code]
<!DOCTYPE html>
@ViewData("Title")
@RenderBody()
[/code]
The View code is defined as follows:
[code]
@ModelType MVC3Test.BatchCollection
@Code
ViewData("Title") = "Batchlist2"
End Code
Batchlist2
BatchID
Transmitted Date/Time
Completed Date/Time
Created By
Created Date/Time
// This will run the code instead the function() {} as soon as the page is ready.
// Hence: Document.ready
$(document).ready(function () {
var anOpen = [];
var oTable;
var sImageURL = "/Images/"; //path to image files
// AJAX call to get batch list
// it will return into the data object
$.ajax(
{
type: "GET",
url: '@Url.Action("FetchBatchList", "Batch")',
error: function (xhr, statusText, errorThrown) {
if (statusText === 'timeout')
alert('The server is not responding');
if (statusText === 'error')
alert("Error: " + errorThrown);
}, //end of ajax error block
success: function (data) {
//"sAjaxSource": "",
// Create Data Table
oTable = $('#batch_table').dataTable(
{
"bProcessing": true,
"aaData": data.BatchList, // Initialize datatables with data object
"aoColumns": [ // Bind table columns with properties
{
"mData": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mData": "BatchID" },
{ "mData": "Transmitted_DateTime" },
{ "mData": "Completed_DateTime" },
{ "mData": "Created_EmpID" },
{ "mData": "Created_DTTM" }
]
}); // End dataTable()
debugger;
} //end of ajax success block
}); // end $.ajax call
}); // end $(document).ready(....
// animation control code
$('#batchGrid td.control').live('click', function () {
debugger;
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
if (i === -1) {
$('img', this).attr('src', sImageURL + "details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slidedown();
anOpen.push(nTr);
}
else {
$('img', this).attr('src', sImageURL + "details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideup(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
// detail table row html goes in the following section
function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
debugger;
var tranData; //this will contain an instance of a transaction object from the transactions collection
for (tranData in oData.GetTranCollection) {
var sOut = '' +
'' +
'' +
'TransactionID:' + tranData.ID + '' +
'SOR_ID:' + tranData.SystemOfRecordID + '' +
'PostingFlag:' + tranData.PostingFlag + '' +
'Posting_DTTM:' + tranData.Posting_DTTM + '' +
'PostingMessage:' + tranData.PostingMessage + '' +
'PostingMessage:' + tranData.XMLTransactionData + '' +
'' +
'' +
'';
return sOut;
}
}
[/code]
This discussion has been closed.