在jQuery对话框中创建JavaScript对象(Creating a JavaScript object in a jQuery dialog)

我有一个使用DataTables的页面来显示客户列表（test_viewcustomers.php）。我将我的DataTable设置为“oTable”，这样我就可以对其进行操作并使其可单击以打开对话框窗口。

对话框窗口（test_customers_edit.php）中有另一个DataTable，我将其定义为“zTable”。 zTable通过ajax加载数据，但我想用DataTables中的fnReloadAjax函数每隔几秒更新一次......问题是当我尝试引用zTable时我告诉它没有定义。在控制台中我可以找到oTable就好了，但zTable不存在。实际上，如果我尝试在对话框窗口中创建任何变量，它就不存在。

我觉得我只是以错误的方式做这件事。这是一些代码片段：

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

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"}]}

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

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"}]}