CODEWITHSUNDEEP
javascriptjquerymootools
Emanuel Permane
Emanuel Permane

Reputation: 53

Jquery Object #<Object> has no method 'getElement'

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?

Upvotes: 1

Views: 855

Answers (2)

plalx
plalx

Reputation: 43718

Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50149

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');

Upvotes: 1

Related Questions