[jQuery] Sort contents alphabetically

Question

So I am appending the following after an AJAX call, and this AJAX call may happen several time, returning several data items. And I am trying to use Tinysort [http://plugins.jquery.com/project/TinySort] to sort the list everytime, so the new items added are integrated nicely and sorted alphabetically.

It unfortunately doesn't seem to be working. Any ideas? I mean, the data itself is being correctly appended, but unfortunately the sorting isn't occurring.

var artists = [];

$.each(data.artists, function(k, v) {
 artists.push('<section id="artist:' + v.name + '" class="artist"><div class="span-9"><img alt="' + v.name + '" width="34" height="34" class="photo" src="' + v.photo + '" /><strong>' + v.name + '</strong><br/><span>' + v.events + ' upcoming gig');

 if (v.events != 1) {
  artists.push('s');
 }

 artists.push('</span></div><div class="span-2 align-right last">Last</div><div class="clear"></div></section>');
});

$('div.artists p').remove();
$('div.artists div.next').remove();
$('div.artists').append(artists.join('')).append('<div class="next"><a href="#">Next</a></div>');
$('div.artists section').tsort('section[id]', {orderby: 'id'});

Thanks!

Answer 1

I suggest to sort data on the server side. Not sure what is your data source but in most cases it should be much easier to move sorting logic to the server.

With sorting in Javascript you may face problems in different browsers when your data will contain non-ascii characters (some browsers can sort such data and some not). This leads to different behavior between browsers which is not expected as I think.