AJAX appended collapsible rows to a jQuery/javascript Tablesorter table lack needed attributes

Question

I'm trying to append rows upon scrolling of a table using a modified version of Tablesorter.js: http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm. It is modified in the sense that it allows for collapsible rows.

The problem I'm having is that upon scrolling and an AJAX call to load new rows, these new rows are lacking the attributes of the other rows that allow them to be toggleably collapsed/expanded.

Here's some issues with the HTML for these appended rows:

1. the clickable <a> tag class name isn't being toggled from "expanded" to "collapsible"
2. the toggled <td> columns style attributes aren't defaulting to "display:none" and don't toggle to "display: table-cell".

Here's the JS to trigger AJAX request upon scrolling and for Tablesorter. I've kept the HTML exactly as in the demo in the pengoworks.com link i mentioned above.

    $(function(){   
        $(document).endlessScroll({ 
            callback: function(i) { 
            loaded += 10;
                $.post("/more/" + loaded, function(data){
                    $("#table"+ " tbody").append(data);
                    $("#table").trigger("update");
                }); 
            } 
        }); 

        $("#table").collapsible("td.collapsible", {
                collapse: true
            }).tablesorter({
            sortList: [[1,0]],      
            headers: {0: {sorter: false}}
            , widgets: ['zebra']
                , onRenderHeader: function (){
                    this.wrapInner("<span></span>");
                }
            });
  });

UPDATE Please see the following jsfiddle which aims to get at AJAXifying the collapsible tablesorter table: http://jsfiddle.net/Lcztc/8. It's not true AJAX but you get the idea. Also, here's a link to the collapsible.js code: http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js. According to Amar (see below), It is pretty clear I need to fix the parts of that plugin that relate to table element bindings such that they recognize appended elements.

Unfortunately, the above jsfiddle still has 2 major issue with it: 1) the collapsibility of the original rows is lost every other time you click the "clickAJAX" button; 2) appended rows are never collapsible or expandable. Still some progress...

Answer 1

You can check this, not sure but this may be the probable cause.

When you retrieve the data and append it to the table, the binding of the a tags in the new html is not happening. In other words, if you have 10 anchor tags in beginning(which are toggelable), after scrolling, you get new 5 tags, these tags are not binded to the handler, and because of this they are not getting toggled. This might be the issue with td.

You can explore .on() jQuery function.

In OP's case, he is using older version of jQuery(1.6.4), so he will need to use .live()

I hope this info helps you. If you could have provided more info, I could have helped more accurate answer.