Jak Charlton - Insane World : JQuery

ASP.NET MVC in the Wild

Jak Charlton — Tue, 09 Feb 2010 11:02:00 GMT

Just before I emigrated to Australia, I took on a small contract to build a website for a UK company who wanted to start up a new kind of UK recruitment site, one where employers could advertise directly, and more specifically one where recruitment agencies couldn’t.

The result was Empty Lemon (www.emptylemon.co.uk) – I leave you to figure out why it is called Empty Lemon, took me a fair while to be honest!

This site was built in around 4 weeks, using ASP.NET MVC2, NHibernate, Fluent NHibernate, Windsor, JQuery, Automapper, and a host of other great tools and libraries.

The site is actually, despite the occasional bit of code I’m not too delighted with, a great example of how fast a site can be developed with ASP.NET MVC and the chosen tooling. In just four weeks we went from more or less nothing, to a full domain model (all be it a fairly simple one) running over a SQL Server 2008 database, using a combination of NH, Fulltext search and the Spatial services from SQL Server 2008.

I also want to thank James Gregory, Steve Strong and Hadi Hariri for (sometimes unknowingly) helping me write the site, with useful snippets of code, and even in Steve’s case a lot of work on getting NH to play fair with the spatial services.

So, if you are looking for a job in the UK, or if you are looking to employ someone, I strongly suggest you take a look at www.emptylemon.co.uk. It’s a little empty right now, but some large employers are coming on board soon, and other companies are signing up day by day – these things are always chicken and egg, so if you like the site, feel free to tell others about it – after all, who really likes recruitment agents anyway ;)

jQuery Gotcha - Functions in Events

Jak Charlton — Thu, 09 Oct 2008 10:43:00 GMT

I just spent way too long wondering why my silly page kept refreshing itself, one of the forms on the page was submitting itself over and over ... I had been refactoring some Javascipt to allow me to use it generically across pages.

My orginal code to bind an ajax call to the submit of the form was as follows:

$("#SearchForm").submit(function() { ... previous ajax code inline here ... ; return false; });

And all was fine ... except I wanted to reuse the inline code, so I put it into a function:

$("#SearchForm").submit(GetTableContent(controller, displaySelect));

And suddenly the page started refreshing automatically, making debugging it rather hard to even find the mistake. After 20 mins scanning through the jQuery documentation on form submit I noticed that "submit()" reads "Trigger the submit event of each matched element" but that "submit(fn)" reads "Bind a function to the submit event of each matched element" ... clearly the first version was being used by jQuery, where as my code should have been the second one - after all I had a function in there now?

Then I twigged it, the jQuery (fn) wants a plain basic function with no parameters ... so a quick change wrap my new function with a parameterless function resolved the problem:

$("#SearchForm").submit(function() { GetTableContent(controller, displaySelect); return false; });

Annoying ... I hate wasting 20 mins on silly things like this ...

ASP.NET MVC, JQuery and Cross-View Javascript Events

Jak Charlton — Wed, 17 Sep 2008 12:50:00 GMT

I wrote a nice little charting component for our site recently, and needed to call a Javascript function in one View (the one that was the main page for charting), from another View (one that went off to the server using Ajax to load up a list of feeds that could be charted).

This would have been traditionally done by putting a function on one View and calling it from another, but this is just a little bit "messy" and prone to breaking. Luckily I decided fairly early on to use JQuery on this site (mostly as I hate writing Javascript and JQuery makes it a doddle). With JQuery I can define a Javascript event across the two views, thereby providing me with a loosely coupled way of achieving my objective.

On my main index page I have:

$('#graphFeeds').bind("add", function(e, feedId, description){
        for(i=0;i<graphedFeeds.length;i++){
            if(feedId==graphedFeeds[i].feedId) return null; }
        var theFeed = new feed(feedId, description, "Green", "Line", 0, 1);
        $('#graphFeeds #table tbody').append(createFeedTableRow(theFeed));
        graphedFeeds.push(theFeed);
   });

And on the view that contains the list of feeds I have:

function addFeed(feedId, description) {
$('#graphFeeds').trigger('add', [feedId, description]);}

Now by calling the addFeed() function on my list of feeds (I have a little "add to chart" link to the right of each feed), the Javascript event will be fired for the #graphFeeds div ... and the listening handler defined on the index view will go off on it's merry way and add the selected feed into the chart.

Much as I hate Javascript, I love JQuery