I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error) https://i.sstatic.net/ZuTwv.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?
Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');