Miscellany

here is my onClick function, fire bug shows it returns a response, all valid not errors. however

onClick: function(node) {
 var urlProducts = 'mootable.php?cPath=' + (node.id);
 debug.log( 'Selected Action =  Expanding:' + urlProducts);
 new Ajax(urlProducts, {
     method: 'get',
     update: $('loadProducts')
     }).request();
    }

This is my page im trying to load in.


<?php require('includes/application_top.php'); ?>
<html>
	<head>
		<link rel='stylesheet' href='includes/mootable.css' type='text/css' />
		<script type='text/javascript' src='includes/javascript/mootools.v1.11.js'></script>
		<script type='text/javascript' src='includes/javascript/mootable.js'></script>
  <script type='text/javascript' src='includes/javascript/Debugger.js'></script>
                                 
		<?php //Setup the query, check for products
		$query = "SELECT DISTINCT p.*, pd.*, p2c.*
								FROM " . TABLE_PRODUCTS . " p
								LEFT JOIN " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c
								WHERE p.products_id = pd.products_id
								AND (p.products_id = p2c.products_id
        AND p.master_categories_id = " . $_GET['cPath'] . ")";
		
		$data = mysql_query($query);
				$rows = 0;
    while ($record = mysql_fetch_array($data) ) {
								$rows++; 
        $records[] = $record; 
    } 
				//echo 'Begin Array Testing<br /> ';
				//echo display($records);
				//exit();
				?>
		<script type='text/javascript'>
var headers = [{"text":"ID","key":"ID","sortable":false,"fixedWidth":true,"defaultWidth":"30px"},{"text":"Price","key":"Price"},{"text":"Title","key":"Title"},{"text":"Status","key":"Status"}];


	
var data = [	<?php 
	$i = 0; foreach ($records as $id=>$row) { $i++;
	//echo '{"id":0,"ID":129,"Price":"$12.01","Title":"James and the Giant Peach","Author":"Nietzsche"}<br />';
	$data = '{"id":"' . $i . '","ID":"' . $$i . '","Price":"' . $row['products_price'] . '","Title":"' .  htmlspecialchars($row['products_name'], ENT_QUOTES) . '","Status":"' . $row['products_status'] . '"},';
	echo $data;

 } 	//	exit();
	?>];
	
		window.addEvent('load',function(){
						//mootable = new MooTable( $('test'), {debug: true, height: '200px', headers: headers, data: data, sortable: true, useloading: false, resizable: true } );
				function exampleClick(ev){
					//debug.log( 'You picked row ' + (this.data.id+1) );
					var url = "<?php echo 'product_list.php'; ?>";
					new Ajax(url, {
						method: 'get',
						update: $('edit')
					}).request();
				}
				mootable = new MooTable( 'products', {debug: false, height: '400px', headers: headers, sortable: true, useloading: false, resizable: true});
				mootable.addEvent( 'afterRow', function(data, row){
					//debug.log( row );
					row.cols[0].element.innerHTML = ( data.id + 1);
					row.cols[2].element.setStyle('cursor', 'pointer');
					row.cols[2].element.addEvent( 'click', exampleClick.bind(row) );
				});
				mootable.loadData( data );
				});
		</script>
	</head>
	<body>
 <div>test</div>
		<div id='products' style='width:600px;'>&nbsp;</div>
	</body>

</html>