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.

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"

D-talk (Entries tagged as ajax)

Click many, call once with jQuery

Javascript unordened list sorting