JQuery tablesorter Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

Question

EDIT 3: It's working now. Thanks to @Dimitar's suggestion, include reordering and apache restart looks it's now solved. Thank you all. The include order shown in edit 2 is the actual order.

EDIT 2:

Checking documentation I saw that includes where always in the same order, so I reordered my includes. Now there is no error but it doesn't work either. Anyone knows why?

New order:

<?php use_helper('Javascript','Form') ?>
<?php use_javascript('toggleTabActive') ?>
<?php echo javascript_tag("toggleTabActive(15)"); ?>
<?php use_javascript('/sfProtoculousPlugin/js/prototype.js'); ?>
<?php use_javascript('/sfProtoculousPlugin/js/effects.js'); ?>
<?php use_javascript('/sfProtoculousPlugin/js/controls.js'); ?>
<?php use_javascript('jquery-1.3.2.min.js'); ?>
<?php use_javascript('jquery-latest.js'); ?>
<?php use_javascript('jquery.tablesorter.min.js'); ?>
<?php use_stylesheet('tablesorter/style.css') ?>

EDIT 1: Following @Dimitar suggestion I used noconflict for jquery. Now:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".urTable" ).tablesorter();
});
</script>

The errors shown are:

1: GET http://sdbweb/css/tablesorter/bg.gif 404 (Not Found)

2: Uncaught TypeError: Object #<Object> has no method 'dispatchEvent'

"1" must be some path problem related to one of the images included by tablesorter CSS. I'll look into it afterwards.

"2" is related to prototype.js. I guess it uses JQuery too, so the conflict may be caused there. Any recommendation on best practice to solve this clash?

ORIGINAL:

This is my first time using JQuery, so sorry if I'm asking something pretty obvious.

I just started a new job and my boss asked me to make some changes to an internal webapp and I want to add sorting capabilities to one of the tables. I found out about tablesorter and followed the getting started.

It is not working right now and I don't know why. Inspecting the chromium javascript console the following message appears: Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

I've googled for similar problems and it usually was bad JQuery includes or permissions. I'm sure it's not permissions, the includes I don't know.

The app uses symfony 1.2 and upgrading is not an option right now.

My header is as follows:

<?php use_helper('Javascript','Form') ?>
<?php use_javascript('toggleTabActive') ?>
<?php use_javascript('jquery-latest.js'); ?>
<?php use_javascript('jquery.tablesorter.min.js'); ?>
<?php use_javascript('jquery-1.3.2.min.js'); ?>
<?php echo javascript_tag("toggleTabActive(15)"); ?>
<?php use_javascript('/sfProtoculousPlugin/js/prototype.js'); ?>
<?php use_javascript('/sfProtoculousPlugin/js/effects.js'); ?>
<?php use_javascript('/sfProtoculousPlugin/js/controls.js'); ?>
<?php use_stylesheet('tablesorter/style.css') ?>

<script type="text/javascript">
$(document).ready(function(){
$(".urTable" ).tablesorter();
});
</script>

And the table:

<table class="tablesorter urTable" width="100%" cellspacing="0" cellpadding="1" border="0">
        <thead>
        <tr class="collection-as-table">
          <th class="collection-as-table"></th>
          <th class="collection-as-table">Access</th>
          <th class="collection-as-table">Name</th>
          <th class="collection-as-table">Activity</th>
          <th class="collection-as-table">Machine</th>
          <th class="collection-as-table">Activation Date</th>
          <th class="collection-as-table">Mail</th>
          <th class="collection-as-table">UR</th>
        </tr>
        </thead>
        <tbody>
        [...]
        </tbody>
      </table>

Any insights, recommendations, tutorials, explanations...?

Thank you for your time.

Answer 1

It appears that you're loading Prototype and it overrides $. Try to remove one or the other or look into jQuery's noconflict mode.

From the link:

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j(".urTable" ).tablesorter();
});