The power of jquery

Added on: Wednesday 4th March 2009

With the recent rise in popularity of online applications and the subsequent drive to create rich user interfaces comes a host of powerful javascript libraries.

There are now numerous javascript libraries available to help simplify the more mundane tasks involved in writing your code.

I'm not going to recommend any particular library over another but as a developer I've decided to pick one and stick to it rather than trying to use the best features from each of them. This is a practical approach as I simply don't have the time to learn the syntax for each of them and keep abreast of developments.

I'm also not going to get into why I eventually chose jQuery but suffice to say that at the time it seemed to have everything that I wanted for the sort of projects I was working on.

Anyway, if you haven't looked at jQuery yet then it might be worth your while because once you get to grips with the syntax, I promise you it will take your javascript to new heights.

I'm writing this because yesterday I revisited some code (originally written with jQuery) for an application where I wanted to enhance the usability even further.

The application is based on our CRM software but has a module that creates a seating plan for members going to monthly lunch meetings.

The client is a networking organisation so one of the rules is that where possible no members should sit with someone they have sat with before. The software automatically checks back a certain number of lunches and tries to place people according to this rule.

It also takes into account any specific seating requests from members and ensures that no two people from the same business category are on the same table.

Once the calculation has been done the administrators are able to go in and use a drag and drop interface to make any final changes and this is where jQuery comes in handy.

Although there is a warning message whenever a person is dragged to a table and the resultant move violates any of the above rules, I wanted some visual feedback when the mouse hovers over the person to be moved.

To do this I got the server side PHP to create a table of which guests have sat with each other. When the page loads, the ids of each of the people a person has sat with are added to the class for the html element for that person.

So a typical class might look like class="2401 345 6750..."

I then created an 'over' class (red border) and got jQuery to apply this class to each element containing the class corresponding to the id of the element the mouse is over. The code is below:

$("li.block").mouseover(function(){
var el = $(this).attr("id");
$("."+el.addClass("over");
});

Just 4 lines of code (and thats to make it easy to read!) and all the people who have previously sat with a person are highlighted on the mouse over event.

(There is a corresponding mouse out event as well to remove the highlight).

Following some comments from users who said it would be nice to know not just that two people have sat together but also how long ago this was. I initially thought that this might just be something that pops up in the warning message rather than on mouse over but after a bit of thought I realised it was quite easy.

I altered the PHP code so that in addition to storing the ids it also stored how many lunches ago the two guests sat together. As the page loads this number is appended to the id and separated by an underscore so the class now looks more like - class="2401_2 345_1 6750_2..."

I then created the classes for the number of lunches ago that the clash occured - simply over1, over2 etc.  These could be styled with different borders or backgrounds but I've chosen to add an image of the number on the right hand side of the element.

The revised jQuery is just:

$("li.block").mouseover(function(){
var el = $(this).attr("id");
for(i=0;i<6;i++){
$("."+el+"_"+i).addClass("over"+i);
}
});

I'm sure this can be streamlined further. I think I can probably remove the for loop and use the jQuery each function but I'm still learning and this does the trick at the moment.

Pretty powerful stuff though and it just shows how easy it is to add some impressive functionality to your application.

comments powered by Disqus