I’m building this widget in an incremental way so after getting the layout and hooking it up to a data source I moved on to creating a column with an expand/contract link that would trigger the sub grid to expand and contract as required. I ran into a problem when trying to keep my formatting functions contained within the widget definition.

I setup my layout in the following way :

 _mainGridLayout : [
      { type : "dojox.grid._RowSelector" },
      {
        cells : [[
          { name : '', get : this._getBlank, formatter : this._formatExpander },
          { field : "customer_id", name: "Cust ID" },
          { field : "customer_name", name : "Customer" },
          { field : "job_number", name : "Job No." },
            ...
        ]]
      }
    ],

I had defined the get function and formatter function in my widget, but whenever I loaded the widget I’d get a blank column as if neither function had been run.

After some poking and prodding it seemed that whatever context this view was being built in, the ‘this’ object was not my widget as I originally expected. The ‘this’ object was actually an instance of dojox.grid.cell. That was okay as a cell has a reference to it’s grid, so what I needed to do was access this.grid._formatExpander and this.grid._getBlank.

I did it in the following way :

          { name : '', get : function() {return this.grid._getBlank(arguments);}, formatter : function() {return this.grid._formatExpander(arguments);} },

It worked perfectly, I’d like to say just as I expected, but alas I’m not that smart :)

It feels to me like there should be a cleaner way to do it, but at least for the time being it works fine and doesn’t required me to move my formatting functions out into some global namespace and outside of my widget’s nice pieces of logic.

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 presentation is in three parts and so far he’s covered a bunch of standard programming patterns and elements (singletons, private members, namespaces, constructors, etc…) implemented using Javascript as well as a detailed account of how the language is implemented. Rather than having to work out by trial and error what variables and functions are available where, or how to implement private functions or a singleton, he’s given you the first principles so you can work it out for yourself and a bunch of useful examples.

I highly recommend watching it. I find the more languages I learn the better I get at doing things across the board.

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.

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?

We have our strings and to build them up we merely start adding them together but as our code gets more elaborate this gets harder and harder. The biggest problem is usually trying to figure out how to escape quotes and inverted commas as we swap back and forth between plain strings and JavaScript variables.

I’ve often thought there must be a better way and working with the Dojo toolkit there is. It can be found in the method “dojo.string.substitute”. This mirrors the idea used in other languages of passing the method a template string and an object of values to substitute in. Whilst Dojo allows for numerous ways of passing the data such as arrays and functions the one that interests me the most is a standard JavaScript object which is effectively a hash map of name and value pairs.

Here’s a simplified version of the Dojo function that only uses objects for the value map.

var tfg = {
  string:{
    substitute: function(/*String*/ template, /*Object*/ valueMap){
      return template.replace(/\$\{([^\s\:\}]+)(?:\:([^\s\:\}]+))?\}/g, function(match, key){
            return (valueMap[key])?valueMap[key]:"";
        });
    }
  }
}

The old way of doing things might look like this:

var data = {name:"bob", occupation: "builder"};
var string = "His name is "+data.name+" and is occupation is "+data.occupation+".";

Here we merely add the different parts of the string and string values together. Simple enough in a string this size but as it grows and we start working with HTML syntax things get more complicated.

Using the substitute way:

var data = {name:"bob", occupation: "builder"};
var template = "His name is ${name} and is occupation is ${occupation}.";
var str = tfg.string.substitute(template, data);

Here anything surrounded by the format “${something}” is replaced with the value found in “data.something”.

A major advantage of this approach is when we start looking at fetching JSON data sets from a remote server via Ajax. We almost always have to process the return values into something to display and if it is looping through a list of objects we can now define the template once and repeatedly create a string with our substitute method. Here’s a simple idea using JQuery for the loop.

var result = [{name:"a",company:"1"},{name:"b",company:"2"}];
var template = "<tr><td>${name}</td><td>${company}</td></tr>";
var rows = $.map(result, function(index, item){
  return tfg.string.substitute(template, item);
})
var tableBodyString = rows.join("\n");

Here we looped through the items substituting each new set of values and pushing the result into an array. At the end we merge the array into a single string with “join” and have the body of a HTML table ready to be used in the page.

This approach is fast, easier to read and much cleaner to implement when looping through data.

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.

Now I would say I spend the majority of my time between writing server and client side presentation code, in other words I write a lot more time writing Javascript now than I ever have before and things don’t look like changing.

The majority of my work is with jQuery, but we have projects deployed using standard Javascript and Prototype as well so it pays to have as good an understanding of Javascript as possible. With that in mind I found a great site aimed at teaching some advanced uses of the language. It was written by John Resig who is one of the real leaders in using Javascript in interesting ways, he’s well known for developing the jQuery library but also has his finger in other pies most notable of which is probalby Firebug.

I remember when I started writing web applications that Javascript was almost laughed at, but now I absolutely enjoy writing it and is a massively important player on the web. I think people stopped expecting the user interaction of a web application to naturally lack that of a desktop application a little while ago and Javascript and frameworks like jQuery and Prototype allowed that to happen.