jquery error with different versions tablesorter and ui dialog

Question

I am quite new to jquery so hope this stuff isnt obvious. I searched for a solution but did not find one specific to my question.

I have a classic asp page which has a table that is updated every 15seconds using jquery .get and then append the table elements.

$(document).ready(function() {
refresh();
var int = self.setInterval("refresh()",15000);});

function refresh(){
$("table").tablesorter();
$("table tbody tr").remove();
//$("#ajax-append").click(function() {
 $.get("assets/ajax-content.asp", function(html) {
    // append the "ajax'd" data to the table body
    $("table tbody").append(html);
    // let the plugin know that we made a update
    $("table").trigger("update");
});
return false;}

This works fine, I used the example here as a guide: http://tablesorter.com/docs/example-ajax.html

The only problem is that in one of the columns in the "ajax'ed" table is an img tag with onclick

function openMessage(strID){
if (strID != ""){
    id = strID;
    //alert(id);
    $('#dialog').dialog('open');  
}

} I use the id variable in the dialog. I know this code works because before the jquery tablesorter (yesterday) it was being used for a few months, and still is (in production).

The error I get from FireBug is:

$("#dialog").dialog is not a function [Break On This Error] $('#dialog').dialog('open');

I am using the same version of jquery that they recommend from the tablesorter demo: http://tablesorter.com/jquery-latest.js Which isnt very new. I noticed if I use my jquery file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>

The sorter does not work. Plus if I add the ui includes:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">/script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

the sort does not work. If i switch out the jquery includes (not the ui) then the .get() does not work and only a table header shows up.

My question is, are the version of jquery and ui discriminate to which they can work with? My msg dialog is quite simple just opens a dialog which also uses ajax to post read/write to a db depending on the button clicked. Why would tablesorter's version of jquery not work when I include the ui? Any workarounds?

Is there anything in my code that could be breaking it?

Thanks very much for any help in advance!

Answer 1

We are using jquery 1.4.2 together with the tablesorter plugin without issues. You can see this in action here: http://www.bet-mate.com

We are not using jquery UI however.

In general, the dialog method is a method of jquery UI. So to exclude that does not make sense. Make sure you have a version of jquery UI that is compatible with the jquery version that you are using.

If that does not help try to get a jquery UI version that works with jquery 1.4.2 and use those to test if this solves the issue.