Making results returned by AJAX call live for sorting

Question

I have an initial page (program_finder.asp) that makes an AJAX call for some results:

        $('#filtersForm').submit(function(){
      $('#resultsPane').load('program_finder_backend.asp',$('#filtersForm').serializeArray());
      return false;

This works just fine. I submit parameters, the backend page runs some SQL, and dumps to my front end resultsPane area just fine. The returned info is a table.

What I want to do is make the table of returned information sortable by column. I like this function and want to use it:

http://www.kryogenix.org/code/browser/sorttable/

For a a table with a class of sortable, the user can click on the column heads to sort the content. I think that is user friendly. it works fine is a static page.

I load that with

  script src="sorttable.js"></script

in the head of initial document.

I am pretty sure the problem is that the returned table contents don't exist in the DOM on initial page load and therefore sorttable.js can't find them. I'm pretty sure I need a .live() or a .on() or a .delegate() someplace to make the returned table results visible to initial page, but I don't know how to do that.

I think I want something like:

 $('table.sortable').on('click', function(){
       // but here I don't know how to call sorttable();
        });

If this isn't clear I will add more informaton.

EDIT: I should have added that the sorttable documentation says this:

Sorting a table added after page load

Once you've added a new table to the page at runtime (for example, by doing an Ajax request to get the content, or by dynamically creating it with JavaScript), get a reference to it (possibly with var newTableObject = document.getElementById(idOfTheTableIJustAdded) or similar), then do this:

sorttable.makeSortable(newTableObject);

but that doesn't help me any. I don't understand it.

EDIT#2: Putting this up here to make it easier to read. I tried:

 $('#filtersForm').submit(function(){
     $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($("#resultsPane").find("table")[0]);
      return false});
    });

per Dogbert with no luck. That transfers away from the initial page directly to the backend page.

EDIT#3

Adding in Adeneo's code from the referenced fiddle:

 $('#filtersForm').submit(function(e){
e.preventDefault();
$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
     sorttable.makeSortable($(this).find("table").get(0));
});
});

This seems to work.I would have never figured that out. Thanks to Dogbert as well.

Answer 1

You'll have to prevent the default action of submitting the form, load the table, and then get the table as a plain DOM element and pass it to the makeSortable() function, like so:

$('#filtersForm').submit(function(e){
    e.preventDefault();
    $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($(this).find("table").get(0));
    });
});​

Answer 2

This should work:

$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
  sorttable.makeSortable($("#resultsPane").find("table")[0]);
}

Answer 3

Thought I'd post this here because it might help someone out.

Sorttable works great until you change the content of the table (maybe through an AJAX return) and then it doesn't know about this new content and no longer sorts properly.

The function makeSortable(table) works fine if you are pumping a fresh table into it as sorttable will now run through the table and make it sorttable. If, however, you have an existing table that has already been put through makeSortable(table) - maybe on page load - this tables header cells may already have a sorttable event handler attached which will just cause you grief if you simply call pass the table into makeSortable again.

This caused me a bit of hassle today with a table containing AJAX changeable content and I figured out that sorttable really needed a "reload" function after the AJAX response. So here it is

reload: function (table) {
  // get the head row and iterate each header cell
    headrow = table.tHead.rows[0].cells;
    for (var i=0; i<headrow.length; i++) {
        // use the provided removeEvent function to get rid of the current handler
        removeEvent(headrow[i], 'click', sorttable.innerSortFunction);

        // check if there is a currently sorted col and remove class
        if (headrow[i].className.search(/\bsorttable_sorted\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted','');
        }
        if (headrow[i].className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted_reverse','');
        }
    }
    // remove any sort indicating arrows
    sortfwdind = document.getElementById('sorttable_sortfwdind');
    if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
    sortrevind = document.getElementById('sorttable_sortrevind');
    if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
    // now we can make the table sortable with it's new content
    sorttable.makeSortable(table);
}

Just put that function in under the shaker_sort function in sorttable.js (not forgetting a comma after the final curly bracket of shaker_sort). Now if you change the content of your previously sorted table pass it into reload to get it sortable again:

sorttable.reload(document.getElementById('#MyTableID'));

Important

For the above reload function to work you must break out the sorttable.innerSortFunction function so that it is globally accessible or the remove event handler will not work. To do this just cut out and paste the innerSortFunction so that it is a function on sorttable just like reload and sort_shaker. After you cut and paste the innerSortFunction function make sure that it is still being attached to headers as an event handler like this:

dean_addEvent(headrow[i],"click", sorttable.innerSortFunction);