DT in a jquery Dialog isn't an object?
DT in a jquery Dialog isn't an object?
wirikidor
Posts: 4Questions: 0Answers: 0
I have a page using a DataTable to display a list of customers (viewcustomers.php). I set my DT object as "oTable" so I can manipulate it and make it clickable to open a dialog window.
The dialog window (customers_edit.php) has some jqueryui tabs, and on one of the tabs I have another database I defined as 'zTable'. zTable loads data via ajax. However, when I try to tell zTable to reload its ajax data (using the fnReloadAjax plugin) I get "Uncaught ReferenceError: zTable is not defined" in the console.
I'm not getting any other errors, and the initial load is working... so I'm a bit confused. The thing I'm most unsure about in the dialog window is using $(document).ready. It seems to be working fine except for this one issue.
Here's a snippet from the dialog window code:
[code]
$(document).ready(function () {
var userId = <? echo $ACCT_NBR; ?>;
var zTable = $('#tblDIDs').dataTable({
"sDom": 't',
"bSort": false,
"sAjaxSource": 'atomicfunctions/getDID.php?ACCT_NBR='+userId,
"aoColumns": [
{ "mData": "COS" },
{ "mData": "CODE1" },
{ "mData": "CODE2" },
{ "mData": "FLAG_ACTIVE" },
{ "mData": "LAST_UPDATE_DTTM" }
]
});
});
[/code]
When I load the dialog window and look in the console, I can find oTable, but I can't find zTable... interestingly enough I can't find that userId variable either.
The dialog window (customers_edit.php) has some jqueryui tabs, and on one of the tabs I have another database I defined as 'zTable'. zTable loads data via ajax. However, when I try to tell zTable to reload its ajax data (using the fnReloadAjax plugin) I get "Uncaught ReferenceError: zTable is not defined" in the console.
I'm not getting any other errors, and the initial load is working... so I'm a bit confused. The thing I'm most unsure about in the dialog window is using $(document).ready. It seems to be working fine except for this one issue.
Here's a snippet from the dialog window code:
[code]
$(document).ready(function () {
var userId = <? echo $ACCT_NBR; ?>;
var zTable = $('#tblDIDs').dataTable({
"sDom": 't',
"bSort": false,
"sAjaxSource": 'atomicfunctions/getDID.php?ACCT_NBR='+userId,
"aoColumns": [
{ "mData": "COS" },
{ "mData": "CODE1" },
{ "mData": "CODE2" },
{ "mData": "FLAG_ACTIVE" },
{ "mData": "LAST_UPDATE_DTTM" }
]
});
});
[/code]
When I load the dialog window and look in the console, I can find oTable, but I can't find zTable... interestingly enough I can't find that userId variable either.
This discussion has been closed.
Replies
The first page has some static data in a DataTable... you click on a row and it opens a dialog window with another DataTable, which gets its data via AJAX. The problem is I need to be able to refresh that AJAX data on the fly and the second DataTable isn't showing up as an object. If I open the console in Chrome and try "zTable.fnReloadAjax();" I get "ReferenceError: zTable is not defined".
test_viewcustomers.php
[code]<!doctype html>
View Customers
$(document).ready(function () {
oTable = $('#tblRecords').dataTable({
"oLanguage": { "sSearch": "Search:" },
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bSort": false
});
oTable.fnSetColumnVis( 0, false ); // Hide the Agent ID
$('#tblRecords tbody').delegate( 'tr', 'click', function() {
var customerId = oTable.fnGetData( this, 0 );
var userName = oTable.fnGetData( this, 2 );
var Url = "test_customers_edit.php?customerid=" + customerId;
$.ajax({
url: Url,
success: function( result ) {
$('#dialog-customer-container').html( result );
$( "#dialog-customer-stats" ).dialog( "open" );
$('#dialog-customer-stats').dialog('option', 'title', 'Customer Detail - '+userName+'');
}
});
});
$('#tblRecords tbody').hover(
function() {
$(this).css('cursor', 'pointer');
},
function() {
$(this).css('cursor', 'auto');
});
$('#dialog-customer-stats').dialog({
autoOpen: false,
height: 600,
width: 850,
modal: true,
close: function() {
$('#dialog-customer-stats form input').val('').removeClass( 'ui-state-error' );
}
});
});
Customers
CustomerID
Agent
Business Name
First Name
Last Name
Phone
Email
21
Agent A Enterprises
TimCo
Tim
Whitaker
(888) 888-8888
wirikidor@gmail.com
22
Agent A Enterprises
TimCo
Tim
Whitaker
(888) 888-8888
wirikidor5@gmail.com
[/code]
test_customers_edit.php
[code]
$(document).ready(function () {
var zTable = $('#tblDIDs').dataTable({
"sDom": 't',
"bSort": false,
"sAjaxSource": 'getDID.json',
"aoColumns": [
{ "mData": "COS" },
{ "mData": "CODE1" },
{ "mData": "CODE2" },
{ "mData": "FLAG_ACTIVE" },
{ "mData": "LAST_UPDATE_DTTM" }
]
});
});
COS
Number
Rule/Group
Active
Last Updated
[/code]
getDID.json
[code]{"aaData":[{"COS":"COS_DID","0":"COS_DID","CODE1":"1231231234","1":"1231231234","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 21:57:50","4":"2013-11-06 21:57:50"},{"COS":"COS_DID","0":"COS_DID","CODE1":"5678901234","1":"5678901234","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 21:59:14","4":"2013-11-06 21:59:14"},{"COS":"COS_DID","0":"COS_DID","CODE1":"1112223344","1":"1112223344","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 22:21:23","4":"2013-11-06 22:21:23"},{"COS":"COS_DID","0":"COS_DID","CODE1":"5555555555","1":"5555555555","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 22:43:37","4":"2013-11-06 22:43:37"},{"COS":"COS_DID","0":"COS_DID","CODE1":"2222222222","1":"2222222222","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 22:47:20","4":"2013-11-06 22:47:20"},{"COS":"COS_DID","0":"COS_DID","CODE1":"6666666666","1":"6666666666","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 23:00:44","4":"2013-11-06 23:00:44"},{"COS":"COS_DID","0":"COS_DID","CODE1":"3331231234","1":"3331231234","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"Y","3":"Y","LAST_UPDATE_DTTM":"2013-11-06 23:06:26","4":"2013-11-06 23:06:26"},{"COS":"COS_DID","0":"COS_DID","CODE1":"4321234123","1":"4321234123","CODE2":"TestGroup","2":"TestGroup","FLAG_ACTIVE":"N","3":"N","LAST_UPDATE_DTTM":"2013-11-07 14:50:33","4":"2013-11-07 14:50:33"}]}[/code]
[code]$('#tblDIDs').dataTable().fnReloadAjax();[/code]
However that still doesn't explain why I cannot use zTable as an object.