jQuery – Freedom?!

Yes it should have been discovered sooner. But now that it has been…jQuery+jQueryUI is sheer brilliance.

I can immediately see this freeing me from the demands of stakeholders – I can just give them the ThemeRoller tool (since like most developers, I tend to have a terrible sense of UI design) and tell them to choose how they want the site to look and get them to send me the URL or files back. (Of course the hard part has always been getting the site to work and keeping it alive and secured from DDoS/XSS/CSRF and other attacks, but now I don’t have to worry about things like the style of datepickers!)

So why is it so good? Simply put – an excellent pluggable framework for Javascript that unlocks the power of JS, gives the developer great flexibility, and provides better cross-browser support than I probably ever could!

An example related to my current work, building an ASP.NET MVC2 site on .NET 3.5 (c’mon people, .NET 4.0 has been out for a while now).

All I need to do is include in the Site.Master file something like:

<link href="<%= Url.Content("~/Content/jquery-ui-1.8.5.custom.css")%>" rel="stylesheet" type="text/css" />

http://%=%20Url.Content(

http://%=%20Url.Content(

obviously the actual URLs may be different depending on your project setup, the above come out to something like ../../Scripts/jquery-1.4.2.min.js, but that depends on the context of the request.

Whenever the stakeholders decide to redesign part of the site – it’s update 3 files/references and voila! Whenever performance and security fixes come down the pipeline, same quick update! And in web development, it’s all about taking DRY to the limit =)

So for an actual example, let’s try making a datepicker:

  1. Add the javascript for the datepicker itself, for a basic Aussie date format:

      $(document).ready(function () {
          $(".datepicker").datepicker({
              dateFormat: 'dd/mm/yy',
        });
    });

  2. Add the “datepicker” class to the relevant div or input type=”text” area

    <input type="text" id="releaseDate" class="datepicker"/>

Of course for full details of what’s possible, see the jQuery DatePicker page. http://docs.jquery.com/UI/Datepicker

But remember I said ASP.NET MVC2 ?
That’s something like (simplified):

        model.Title) %>


i.e. using auto-generated view code (literally right-click on a controller ActionResult and click “Add View”) which uses lambda expressions to reference model attributes, or something like that.

The key point is MVC2 abstracts the HTML using the built-in (and extensible) HTML helper classes. Seems like it’s time to write one of those to take advantage of jQuery!

Update 5:29PM – An excellent post by Steve Michelotti covers this very well:
http://geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: