[SOLVED] JQuery sorttable in combination with ajax giving problems.

[Axeia]

I got a little problem with the jquery tablesorter plugin. although it works great for the firs time the first page loads.. I added some ajax to the mix so that the <tbody> contents get replaced by a click on a link.

 

When I sort after the ajax request, the contents that had been replaced show up again all of a sudden.

So I'm guessing I need to execute that $("#files").tablesorter( {sortList: [[0,0]]} ); again once the ajax request has been completed, but I don't know how.

If anyone knows how do fire the tablesorter again once the request is complete please do tell. (If that's even the solution to the problem as I only got guesswork to go by atm.)

 

HTML

<table id='files' class='sorttable' style='width: 100%' cellspacing='0' cellpadding='0'>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
    <tr>
        <th><div class='bgA'>Filename</div></th>
        <th><div class='bgA'>Type</div></th>
        <th><div class='bgA'>Size</div></th>
    </tr>
</thead>
<tbody id='#filesTableContent'>
</tbody>
</table>

 

Javascript

    <script type='text/javascript'>
        $(document).ready(function() 
        { 
            $("#files").tablesorter( {sortList: [[0,0]]} );
            
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    $('#filesTableContent').load( 'ajax.php?fileInfoFromDir='+href.substr( href.lastIndexOf('/') +6 ) );
                }
            });
        } ); 	
    </script>

 

Now the intention is to have the ajax request load into the <tbody></tbody>

[Ken2k7]

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter( {sortList: [[0,0]]} );
           
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').tablesorter( {sortList: [[0,0]]} ); });
                }
            });
        } );    
    </script>

 

What about that? I'm not sure what #filesTableContent supposed to be, but that's the best I can do with the little information I know. =(

[Axeia]

Thanks for the try, seems like executing tablesorter again doesn't overwrite its previous values, it just appends them to the table now.

 

Guess I'll need to dig trough the sourcecode of the plugin itself and see what's going on with it.

Iit seems to store the .innerHTML, sorts its, and append its. Or something similar to that.. as the old values keep popping back up.

[Axeia]

Guess this is what causing it

			/* utils */
		function buildCache(table) {

			if(table.config.debug) { var cacheTime = new Date(); }


			var totalRows = (table.tBodies[0] && table.tBodies[0].rows.length) || 0,
				totalCells = (table.tBodies[0].rows[0] && table.tBodies[0].rows[0].cells.length) || 0,
				parsers = table.config.parsers, 
				cache = {row: [], normalized: []};

				for (var i=0;i < totalRows; ++i) {

					/** Add the table data to main data array */
					var c = table.tBodies[0].rows[i], cols = [];

					cache.row.push($(c));

					for(var j=0; j < totalCells; ++j) {
						cols.push(parsers[j].format(getElementText(table.config,c.cells[j]),table,c.cells[j]));	
					}

					cols.push(i); // add position for rowCache
					cache.normalized.push(cols);
					cols = null;
				};

			if(table.config.debug) { benchmark("Building cache for " + totalRows + " rows:", cacheTime); }

			return cache;
		};

Now to find out with my limited javascript/ (and even more limited jquery knowledge) where to reset this "main data array".

[Ken2k7]

jQuery is open sourced. You can remove all calls to that function. That would stop caching. The only problem with that is very slow speed.

 

Can you try this:

  <script type='text/javascript'>
       $(document).ready(function()
       {
           $("#files").tablesorter( {sortList: [[0,0]]} );
          
           $('#folders').click(function(e){
               e.preventDefault();
               if( e.target.href )
               {
                   var href = e.target.href;
                   jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); new jQuery('#files').tablesorter( {sortList: [[0,0]]} ); });
               }
           });
       } );   
   </script>

 

I'm not familiar with tablesorter, so bare with me.

[Axeia]

Exact same result as with the previously posted code, it appends rather than replaces when sorting.

Thanks for the help though, if you need to see the entire code of the sorttable I posted it on pastebin for syntax highlighting/not spamming this thread too much.

[Ken2k7]

Please try.

 

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter( {sortList: [[0,0]]} );
          
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').trigger('update'); $('#files').tablesorter( {sortList: [[0,0]]} ); });
                }
            });
        } );  
    </script>

[Axeia]

Mmmh well it works, but it wrecks the sortable functionality.. or it might work for like one second before using some order sorting.

Something is changing, but can't really see the order as it's popping back in the blink of an eye.

 

You can see it on http://www.diggurl.com/3aa56d (but I don't know for how long)

Click a link on the right and then try sorting the info on the left a couple of times.

 

[Ken2k7]

I see it. I don't know why, but give this a try:

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter();
         
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').trigger('update'); $('#files').tablesorter( {sortList: [[0,0]]} ); });
                }
            });
        } ); 
    </script>

[Axeia]

Same effect, this code seems to work though, which ended up with somewhere in the middle undo'ing my changes.

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter( {sortList: [[0,0]]} );
         
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').trigger('update'); $('#files').tablesorter( {sortList: [[0,0]]} ); });
                }
            });
        } ); 
    </script>

Not quite sure where it differs.. but so far so good.

 

 

EDIT

That didn't work either (prolly the same code), seems to be quite random in when it bugs out and when it does not..

 

EDIT2

Okay not random, it doesn't work every odd try to click a link on the right, it does on every even try.

so like this

1st link you click on the right it bugs out

2nd link you click on the right it works.

3rd link you click on the the right it bugs out

4th link you click on the right it works.

[Ken2k7]

I think trigger function is a bit odd.

 

I apologize for making you try so many of these. Thanks for your patience. =) Try this:

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter( {sortList: [[0,0]]} );
         
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').triggerHandler('update'); $('#files').tablesorter( {sortList: [[0,0]]} ); });
                }
            });
        } );
    </script>

[Axeia]

Same as before, bugs out every odd try.

I should thank you instead for all these attempts

 

I did manage to find this http://groups.google.com/group/jquery-en/browse_thread/thread/6af7b5a21bcc8ab2?pli=1 in the meantime

[Ken2k7]

You know the drill. =P

 

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter();
         
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), function (data) { $('#filesTableContent').html(data); $('#files').triggerHandler('update'); $('#files').trigger('sorton', [[0,0]]); });
                }
            });
        } );
    </script>

[Axeia]

Brilliant! Working perfectly .. and just in time for dinner

Thanks for the time you spend on this.

 

Think I had just worked out something myself as well (worked with the very limited testing) but it looked like a mess.

[Axeia]

Heh cheered too soon.

Error: s[1] is undefined

Source File: http://77.248.3.182/EpiLeech/javascript/jquery.tablesorter.min.js

Line: 421

But luckily I copied over my code that I said I had working that didn't look all that pretty, and it does work without error.

 

   <script type='text/javascript'>
        $(document).ready(function()
        {
            $("#files").tablesorter( {sortList: [[0,0]]} );
         
            $('#folders').click(function(e){
                e.preventDefault();
                if( e.target.href )
                {
                    var href = e.target.href;
                    jQuery.get('ajax.php?fileInfoFromDir=' + href.substr(href.lastIndexOf('/') + 6), 
                    function (data) { 
                       $('#filesTableContent').html(data); 
                       $('#files').triggerHandler('update'); 
                       
                       $("#files").tablesorter( {sortList: [[0,0]]} );
                       $('#files').trigger('update');
                       $('#files').tablesorter( {sortList: [[0,0]]} ); 
                    });
                }
            });
        } );
    </script>

[Ken2k7]

What does the last trigger and tablesorter do?

[Axeia]

no clue, but when I take them out it starts acting weird every odd click again.

Taking anything out either prevents it from working at all, or bugs it out