The general pattern for me these days has become :

var callback = function CallBack(data) {
    ... Do Some Processing ....
}

var input_data = GatherData();
MakeRequest(target_url, data, callback);

I tend to use jQuery and so my callback is passed in the returned data from the target_url. My call back function then generally performs some tasks on the UI based on what it receives.

The problem though is that in this pattern you can’t get any data from the context when MakeRequest() is called into the scope of CallBack. It’s a scoping issue that falls outside of this little post, but if you’d like an explanation of how Javascript handles scope of variables then you can Google for Javascript scope chain or take a shortcut to this article. Essentially when the call is made to CallBack() all it will have is it’s own variables and any globally accessible (window) variables.

This week though I had a thought and worked through it with one of my work mates, Tony. If you passed in a function that had the scope that included the context you wanted to pass, then maybe you’d be able to access whatever data from the callee you wanted. It turns out that this does work.

The way to do this is pretty simple, and I used it to create a simple function that would grab data and then populate a select element with options. In this case the context I’d like to keep is which select element is the target.

Say that I needed to run this over a bunch of select elements in quick succession then as the callbacks were issued they may end up out of the initial execution order, so the target element isn’t reliable if it’s been stored in a global variable. I could pass it in as a variable that would come back from the page that is returning the data but that just smells bad to me. I think potentially JSONP is an alternative too, but this felt like the right way.

$.getJSON(url, input_data,
	(function(target_element) {
		return function(response_data) {
			var html = [];

			for (var i = 0; i < response_data.length; i++) {
				item = response_data[i];

				html.push('
' + item['value'] + '

');
			}

			target_element.children(':gt(0)').remove();
			target_element.append(html.join(''));
		};
	})(target_element)
);

Essentially the main thing that has changed is that we are now running an anonymous function at the time that the AJAX call is issued. This anonymous function itself returns a function that matches the signature that jQuery is expecting for the callback function. The scope in which this function runs contains the target_element because it was passed into the anonymous function as a parameter. I’m tempted to say that it’s all crazy Javascript scoping, but in reality it’s very cool and very powerful.

If you want to see the execution order of this then just put a some logging into the anonymous function and the callback function and you’ll see what I mean. It will probably make it easier to see what is going on too.

I’ve run into issues trying to get around these problems before and thankfully as mine and the team’s knowledge of Javascript increases I’m finding better and better solutions. I thought my previous method of approaching this problem was quite hacky but now I don’t feel so dirty.

Thanks to Tony too for working through this with me!

The map is implemented using jQuery and seems to pull the content for the clickable items in the map from pages within the existing CMS. This allows the content management team to update information for the map without having to know a bit of Javascript or programming in general.

The tutorial that I found this demonstration through goes into the nitty gritty of how this map was implemented.

Essentially it gives you a curl in the corner of your page that can be dragged back to reveal another ‘page’ underneath. In the author’s example the under-page is the HTML code for the example.

There are examples in the article of how to use jQuery.Firebug() so I suggest taking a peak.

If you are looking to get a better handle on jQuery and more importantly how to use it well, I haven’t seen many better places to start.

It’s possible technologies such as Prism and Gears will help with this in the future. Unfortunately, it is the present.

This time I think I have a solution that I’m pretty happy with though. On the server side it involves using the existing HTTP response codes to indicate to the requester what happened with their request. On the client side the ajaxComplete() event is used to handle these codes.

jQuery will automatically call the function you specify as your callback in an AJAX request if the request is successful, so I’m only interested in handling failures. At the moment I’m assuming that all of my calls use JSON for their data format, but the alternative is a case I can handle later if need be. Only do what is necessary right now is a great credo I think.

So here is my event handler, it’s very simple but the documentation on the arguments to the event are a little slight. The success() call just makes a call to the function specified in the original call, hence passing in an empty array, simulating no records returned. The code I’m handling is for 401: Unauthorized, which in this case is the truth. This code will be sent back when I determine that the user is trying to access some data they aren’t supposed to. HTTP codes handle the majority of cases you’ll run into.

(function() {
	if (typeof(jQuery) != 'undefined') {
		jQuery().ajaxComplete(function(ev, req, settings) {
			if (req.status == 401) {
				settings.success([]);
				alert('You have insufficient privileges.');
			}
		});
	}
})();

The server side code is simple, it’s just a matter of sending back the appropriate header:

	header('HTTP/1.0 401 Insufficient Privileges', false, 401);

This function is specified in a global include where part of the website uses prototype, I’ve been slowly integrating jQuery. Therefore the first thing I do is check if jQuery has been defined, if it has then I register my function as the handler for the ajaxComplete event. Since it’s declared globally this will happen on every AJAX call. If the response code is 401 then first I pass back and empty array to my success handler so that the little loading notifier disappears, and then I notify the user of the error.

It seems to be a trend lately, but again this is just a very simple idea but I hope it saves someone some hassle. I know I’ve searched high and low on the topic and haven’t found a nice generic solution.

Today I wanted to slide a row up, and then when it had finished sliding I wanted to remove it from the DOM. Essentially giving it a nice effect when something is deleted.

Given that the height of a row is controlled by it’s content, I figured the easiest way to do this would be to wrap all of the content inside each column with a block element, in this case a div, and then resize those.

jQuery makes this extremely easy :

var el = $(options.element_prefix + id);
el.children("td").each(function() {
    $(this).wrapInner("< div />").children("div").slideUp(function() {el.remove();})
});

NOTE : The div tag in the wrapInner() is malformed because it won’t display properly otherwise. Please remove the space between the opening bracket and ‘div’.

It’s all pretty easy to understand. Essentially my root element is a row, and so for each td in that row wrap it’s content in a div. Then for the child divs in each td, run the slideUp() method. The callback in the slideUp() method says after the animation is done, remove the row. Given the speed of computers these days, no one will notice that the last few columns quite likely just vanish instead of complete their animation.

One of the more interesting articles I’ve seen in relation to Rails Rumble analysed the prevalence of various plug-ins and gems that teams utilised.

After a quick look there are a few points that specifically interest me :

• jQuery is the most used Javascript library, even though it isn’t the default included with Rails. I think this says a lot about where jQuery fits in the client side coding space these days. Under further scrutiny it seems clear that jQuery had an even larger base of use than shown in that graph, as explained here.
• 1 in 3 teams used a skeleton application. All of those teams used Bort. That’s a pretty overwhelming statistic for two reasons. Firstly it means you should be looking at using skeleton applications if you aren’t already. Secondly anything that you develop that could be used in other applications should possibly be a gem or plug-in. Reuse doesn’t seem to be something you just talk about anymore.
• Over 50% of people wrote tests as part of their application, and the majority of people used a Behaviour Driven Development framework such as Shoulda or rSpec (they got rSpec!). Keep in mind that even on a tight schedule most people using Rails are writing tests!
• Over a third of applications offered OpenID support for authentication. Given I don’t even remember where I signed up for OpenID this surprises me. Maybe it’s time to join this bandwagon?

I think the article gives a good indicator where you should look to implement certain parts of your application. Generally speaking, if a lot of passionate developers are using a particular library or piece of code then you’d be wise to make the same choice.

I was writing some code today and I wanted to prompt the user to check if they wanted to delete a row of data only if there was some data they might not want deleted. Typically to do this I would loop through all the input fields and if any of them weren’t blank I would run the check. I figured that there must be a better way with callbacks or selectors, and after a little thinking I wrote this jQuery snippet :

row.find('input[value!=""]').length > 0

This basically says count the number of inputs with a non-blank value you find, inside the given row.

Just like my last post, it’s nothing amazing but it sure is a better way of doing things. If you look into the andSelf() method then you could also easily chain selects and other input types.

I’m also interested if someone has a better way to approach this problem?

John Resig, the creator of jQuery is also a bit of a proponent for another framework called MochiKit. The idea of MochiKit is to “Make Javascript Suck Less” and as such doesn’t really offer many out there features that others might, it more concentrates on filling in functionality gaps that are present in the Javascript language.

These things include better comparator functions, which enable sorting and so on, also there are handy formatting functions, asynchronous functions and data functions for handling JSON. DOM manipulation looks to be very good, though whether it’s easier than jQuery is probably up to personal choice. Basically MochiKit seems to fill in the gaps of Javascript and do exactly what it says it does, make programming with Javascript suck less by giving you the functions you always wished you had.

I plan on checking this out and feel like it’s probably a worth addition to anybodys’ toolbox that is writing client side code.