D-talk (Entries tagged as jquery)

Sorting of lists in jQuery

nospam@example.com (Mark van der Velden) — Tue, 06 Oct 2009 13:00:00 +0200

A while back I posted a simple sorting algorithm for number sorting, but it doesn't really do the trick for regular strings (e.g. anchors). But since I needed one recently I wrote another small and very simple sorting solution.

For a working example, see: http://dynom.nl/jquery/listsort.php

My.List = {
Sort : function (listSelector) {
var sortedElements, left, right;

// If we have any list items to sort on
if ($(listSelector + ' li').length > 0) {

// Remove the items from the DOM
sortedElements = $(listSelector + ' li').remove();

// Sort, using a custom sorting and compare by anchor contents
sortedElements.sort(function (a, b) {
left = $(a).children('a').html();
right = $(b).children('a').html();

if (left > right) {
return 1;
} else if (right < left) {
return -1;
} else {
return 0;
}
});

// Place the items back on the DOM
$(listSelector).append(sortedElements);
}
}
};

Again, the source should be self explanatory

Click many, call once with jQuery

nospam@example.com (Mark van der Velden) — Tue, 06 Oct 2009 12:28:00 +0200

Recently I wanted to improve they way some anchors where handled in my recent project, it works a bit like adding and removing items to/from a list. But it was possible to trick the interface by quickly clicking multiple times on a link before the AJAX request was finished, while the back-end handled this without any problems, the interface for the visitor couldn't. And since I'm a neat freak and I had a few minutes to spare, I came up with the following.

A working example: http://dynom.nl/jquery/clickmanycallonce.html.

My.items = {
init : function () {
// Bind the real item only once, and the dummy item permanently
// This way the *real* item is only called once, regardless of the amount of clicks
// And the link remains clickable but doesn't trigger the browser to follow it.
$('ul>li>a.item').one('click', My.items.real_action).bind('click', My.items.dummy_action);
},

dummy_action : function () {
$(this).html( $(this).html() + '.' );
return false;
},

real_action : function () {
/* Fancy AJAX call, that shouldn't be executed more then once for every click */
$('div#frame').html($('div#frame').html() + "<br>\nCalling 'real_action' for anchor: " + $(this).html());
return false;
}
};

// When the DOM is ready
$(document).ready(function () {

// Attach the filter to our input and list
My.items.init();

});

While the code is fairly self explanatory and quite simple here the steps in a bit more detail:

Unobtrusively binding, as soon as the DOM is ready.
Binding the real action handler on 'click' action with jQuery's 'one()' event handler
Binding the dummy action handler on 'click' action with the 'bind()' event handler

This situation is probably only favorable if the item you click is removed from the DOM (or has actions re-bound after the call) else it might not be what you want.

jQuery simple unordered list filter

nospam@example.com (Mark van der Velden) — Wed, 24 Jun 2009 15:50:21 +0200

I needed a simple filter system on a unordered list. The goal is to filter 'realtime' based on what a user is typing. I came up with the following, if you have any suggestions and/or performance tips feel free to drop a line!

The HTML:

The blog software is messing with the HTML, for a working example with ungarbled code. Look at the bottom of this post.

</p><div>
<input name="filter" id="search_filter" type="text">
</div><div id="titles">
<ul>
<li><a href="http://blog.dynom.nl/path/to/item/1">Item 1</a></li>
<li><a href="http://blog.dynom.nl/path/to/item/2">Item 2</a></li>
<li><a href="http://blog.dynom.nl/path/to/item/3">Item 3</a></li>
</ul>
</div>

The Javascript

Working example

Visit http://dynom.nl/jquery/list.php for a working example.

Javascript unordened list sorting

nospam@example.com (Mark van der Velden) — Mon, 11 May 2009 15:19:35 +0200

I spent some time figuring out a way to sort unordened lists, when dynamically (AJAX) adding/removing items. I had some problems with the typical '10 being greater then 1, but lesser then 2', so I took a simple bubblesort algorithm and tweaked it with the string length. It's probably not the fastest or most elegant way of doing it, but it works like a charm. If you have any improvement points, don't be shy and drop a line.

The algorithm:
This is the search algorithm I used, (which I found here) and I simply added the difference in string length to the equation to make sure that '10' is greater then '1', causing human-natural sorting.

// Search algorithm, if lesser then 0 it's smaller then the current item.
// If it's greater then 0, it's "larger" then the current item.
cmpr = (
(newItem > curListItem) - (curListItem > newItem)
+
(newItem.length - curListItem.length)
);

Before: Title 1, Title 10, Title 13, Title 2, Title 3, Title 4
After: Title 1, Title 2, Title 3, Title 4, Title 10, Title 13

Read on to see a implementation example...

Continue reading "Javascript unordened list sorting"