I have a page using DataTables to display a list of customers (test_viewcustomers.php). I set my DataTable as "oTable" so I can manipulate it and make it clickable to open a dialog window.
The dialog window (test_customers_edit.php) has another DataTable in it that I defined as "zTable". zTable loads data via ajax, but I want to update it every few seconds with the fnReloadAjax function in DataTables... the problem is when I try to reference zTable I'm told it's not defined. In the console I can find oTable just fine, but zTable doesn't exist. In fact if I try to make any variable inside of the dialog window, it simply doesn't exist.
I feel like I'm simply doing this the wrong way. Here's some code snippets:
test_viewcustomers.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>View Customers</title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/datatables.fnReloadAjax.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(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' );
}
});
});
</script>
</head>
<body>
<table border="0px" cellpadding="2px" cellspacing="0px">
<tr>
<td class="topHeading"> Customers </td>
<td align="right"></td>
</tr>
<tr>
<td colspan="2" class="viewWidth"><table id="tblRecords" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th> CustomerID </th>
<th> Agent </th>
<th> Business Name </th>
<th> First Name </th>
<th> Last Name </th>
<th> Phone </th>
<th> Email </th>
</tr>
</thead>
<tbody>
<tr>
<td>21</td>
<td>Agent A Enterprises</td>
<td>TimCo</td>
<td>Tim</td>
<td>Whitaker</td>
<td>(888) 888-8888</td>
<td>wirikidor@yahoo.com</td>
</tr>
<tr>
<td>22</td>
<td>Agent A Enterprises</td>
<td>TimCo</td>
<td>Tim</td>
<td>Whitaker</td>
<td>(888) 888-8888</td>
<td>wirikidor5@yahoo.com</td>
</tr>
</tbody>
</table>
</tr>
</table>
<div id="dialog-customer-stats" title="Customer Info">
<div id="dialog-customer-container"> </div>
</div>
</body>
</html>
test_customers_edit.php
<script type="text/javascript">
$(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" }
]
});
});
</script>
<table border="0px" cellpadding="2px" cellspacing="0px">
<tr>
<td class="topHeading"> </td>
<td align="right"> </td>
</tr>
<tr>
<td colspan="2" class="viewWidth"><table id="tblDIDs" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th> COS </th>
<th> Number </th>
<th> Rule/Group </th>
<th> Active </th>
<th> Last Updated </th>
</tr>
</thead>
</table></td>
</tr>
</table>
getDID.json
{"aaData":[{"COS":"COS_DID","0":"COS_DID","CODE1":"aaaaaa","1":"aaaaaa","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"}]}