:::: MENU ::::

Thursday, May 22, 2008

If you just want the annotated jQuery file download it here: jQuery with Intellisense comments. For more about it, read on!

I really like jQuery.  I might even say that I love jQuery.  It is a simple and elegant JavaScript framework.  The genius is that it realizes that what most people want to do with JavaScript is manipulate the DOM, and it makes doing that fun.  Look at this example from the jQuery home page:

 
$("p.surprise").addClass("ohmy").show("slow");

That will get all the p elements with the class surprise, add the class "ohmy", and then change the display to "block" with a slow animation. Go run it on the jQuery homepage.  Nice, eh?  The dollar function is magical.  You just give it a CSS selector, and it returns jQuery objects that you can do all kinds of cool things with.  Also, almost all the functions in the framework return this same jQuery object, so they are chainable like you see above.

Now, I also really like ASP.NET, and with the new ASP.NET MVC Framework coming out, I might even say that I love ASP.NET.  I would really like to use jQuery in my ASP.NET projects, but it has never worked too well.  The JavaScript intellisense features of VS 2008 wouldn't work right.  When Visual Studio 2008 was released, it came with better support for JavaScript.  Unfortunately, it did not work with jQuery, but after only a few months, Microsoft released a "Hot-Fix Roll-Up" patch.  This will make the intellisense work with jQuery, and fix some other things.

In order for you to get all the great hints in intellisense, you need to have XML comments in your JavaScript.  So I spent yesterday afternoon commenting jQuery, and it is awesome!  Download it yourself.

All you have to do to use it is include it in a script reference in your page, and add a reference comment in your .js file.  So in your HTML you'll have this under the head element:

 
  <script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>
  <script src="your.js" type="text/javascript"></script>

Then in your.js you'll need to tell VS about the jquery-1.2.3-intellisense.js file like so:

 
/// <reference path="jquery-1.2.3-intellisense.js" />

Now you'll have all the intellisense goodness for jQuery available in your.js.  You won't want to deploy the jquery-1.2.3-intellisense to production since it is quite a bit larger than the minified version, but for development it should work the same as jquery-1.2.3.  I didn't change any of the code, although in some cases it would have made for better intellisense.  Which brings me to my next point.

I couldn't get everything to work due to the way the library is written, and the JavaScript comments work.  For instance, some functions like append() in jQuery don't have parameters specified.  The functions still expect arguments, they just use the "arguments" array instead of formal parameters.  Another problem was that for serveral API functions, only one implemention is used.  For example the event helpers such as blur(), click(), focus(), etc. that fire events are the same function in jQuery.  For these, I've just written a generic XML comment.

I'll be speaking at Boise Code Camp on March 8th about using jQuery with ASP.NET.  It will be mostly an introduction, with a walk-through on changing a plain old contact form, into a fancy-schmancy AJAX one using jQuery.  So if you're around stop by and say hi.  This was my first blog post, and Code Camp will be my first speaking engagement so some things may still be a little rough around the edges.  The nice thing about Code Camp is that you don't have to be invited to speak :)

Update 5/20/2008

jQuery 1.2.4 was released yesterday.  I just posted the updated jquery-1.2.4-intellisense file.

Update 5/21/2008

jQuery 1.2.5 was released today.  jQuery 1.2.4 was a bad build.  I just posted the updated jquery-1.2.5-intellisense file.

 

More

Categories: