Brennan’s Blog

These days I write more JavaScript than C#, or at least it seems like it sometime. To make my work a little easier I have started using the JavaScript support in Visual Studio 2008 that provides Intellisense support if you put Xml Doc into your JavaScript. The problem with working with jQuery in Visual Studio 2008 is that it fails due to how the jQuery script is written. For reasons why Intellisense fails, you can read more from Jeff King. Adjusting jQuery to make Visual Studio happy is not really a priority and not even necessary. I can simply reference the real jQuery script from the web pages and within my scripts I can reference a stub for jQuery that is simply a shell with Xml Doc.

[ Update: Hotfix for Visual Studio 2008 to fix jQuery Intellisense ]

I copied the documentation right from the jQuery website and put it all into the following stub named jquery.intellisense.js, shown below:

// jQuery Intellisense Stub
// SmallSharpTools.com

// Xml Doc for JavaScript:
// http://weblogs.asp.net/bleroy/archive/2007/04/23/the-format-for-javascript-doc-comments.aspx
// http://blogs.msdn.com/webdevtools/archive/2007/03/02/jscript-intellisense-in-orcas.aspx

var jQuery = function(expression, context)
{
    /// <summary>jQuery</summary>
    /// <param name="expression" type="String">string</param>
    /// <param name="context" type="jQuery">jQuery</param>
    /// <returns type="jQuery">jQuery</returns>
};

var $ = jQuery;

jQuery.prototype = {
    each : function(callback) {
    /// <summary>Execute a function within the context of every matched element.</summary>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    size : function() {
    /// <summary>The number of elements in the jQuery object.</summary>
    /// <returns type="jQuery">jQuery</returns>
    },
    length : function() {
    /// <summary>The number of elements in the jQuery object.</summary>
    /// <returns type="jQuery">jQuery</returns>
    },
    eq : function(position) {
    /// <summary>Reduce the set of matched elements to a single element.</summary>
    /// <param name="position" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    get : function(index) {
    /// <summary>Access all matched DOM elements.</summary>
    /// <param name="index" type="int">number</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    index : function(subject) {
    /// <summary>Searches every matched element for the object and returns the index of the element, if found, starting with zero.</summary>
    /// <param name="subject">object</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    attr : function(key, value) {
    /// <summary>Set a single property to a value, on all matched elements.</summary>
    /// <param name="key" type="String">string</param>
    /// <param name="value" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    addClass : function(className) {
    /// <summary>Set a single property to a value, on all matched elements.</summary>
    /// <param name="className" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    removeClass : function(className) {
    /// <summary>Removes all or the specified class(es) from the set of matched elements.</summary>
    /// <param name="className" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    toggleClass : function(className) {
    /// <summary>Adds the specified class if it is not present, removes the specified class if it is present.</summary>
    /// <param name="className" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    html : function(val) {
    /// <summary>Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).</summary>
    /// <param name="val" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    text : function(val) {
    /// <summary>Set the text contents of all matched elements.</summary>
    /// <param name="val" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    val : function(val) {
    /// <summary>Set the value attribute of every matched element.</summary>
    /// <param name="val" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    ready : function(fn) {
    /// <summary>Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.</summary>
    /// <param name="fn" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    bind : function(type, data, fn) {
    /// <summary>Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.</summary>
    /// <param name="type" type="String">string</param>
    /// <param name="data" type="String">string</param>
    /// <param name="fn" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    unbind : function(type, data) {
    /// <summary>This does the opposite of bind, it removes bound events from each of the matched elements.</summary>
    /// <param name="type" type="String">string</param>
    /// <param name="data" type="String">string</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    click : function(fn) {
    /// <summary>Binds a function to the click event of each matched element.</summary>
    /// <param name="fn" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    show: function(speed, callback) {
    /// <summary>Displays each of the set of matched elements if they are hidden.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    hide: function(speed, callback) {
    /// <summary>Hide all matched elements using a graceful animation and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    toggle: function() {
    /// <summary>Toggles each of the set of matched elements.</summary>
    /// <returns type="jQuery">jQuery</returns>
    },
    slideDown: function(speed, callback) {
    /// <summary>Reveal all matched elements by adjusting their height and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    slideUp: function(speed, callback) {
    /// <summary>Hide all matched elements by adjusting their height and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    slideToggle: function(speed, callback) {
    /// <summary>Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    fadeIn: function(speed, callback) {
    /// <summary>Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    fadeOut: function(speed, callback) {
    /// <summary>Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    fadeTo: function(speed, opacity, callback) {
    /// <summary>Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.</summary>
    /// <param name="speed" type="int">number</param>
    /// <param name="opacity" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    animate: function(params, duration, easying, callback) {
    /// <summary>A function for making your own, custom animations.</summary>
    /// <param name="params">object</param>
    /// <param name="duration" type="int">number</param>
    /// <param name="easying" type="int">number</param>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    stop: function() {
    /// <summary>Stops all the currently running animations on all the specified elements.</summary>
    /// <returns type="jQuery">jQuery</returns>
    },
    queue: function(callback) {
    /// <summary>Adds a new function, to be executed, onto the end of the queue of all matched elements.</summary>
    /// <param name="callback" type="Function">function</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    dequeue: function() {
    /// <summary>Removes a queued function from the front of the queue and executes it.</summary>
    /// <param name="PARAM">PARAMDESC</param>
    /// <returns type="jQuery">jQuery</returns>
    },
    ajax: function(options) {
    /// <summary>Load a remote page using an HTTP request.</summary>
    /// <param name="options">object</param>
    /// <returns type="XMLHttpRequest">request</returns>
    },
    serialize: function() {
    /// <summary>Serializes a set of input elements into a string of data. This will serialize all given elements.</summary>
    /// <returns type="jQuery">jQuery</returns>
    },
    serializeArray: function() {
    /// <summary>Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.</summary>
    /// <returns type="jQuery">jQuery</returns>
    }
};

Then in any script that uses it I can drop in the following comment to reference the stub.

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

A problem I had with the initial version of this jQuery stub was that I had defined the methods in the jQuery object as static functions. I had the return values defined as the jQuery type, but it was not working when I chained together methods. What I changed to make it work was to define all of the methods within the context of the object prototype where all methods must be defined in order for them to be used within an instance of the object. Now I can do the method chaining with Intellisense support.

An issue that I do not know how to get around is method overloading. In jQuery a method can take various parameters like in C# but there can only be one function name defined at a time, so that seems there can only be one set of Xml Doc for a method. So what I did with this stub was define the most common parameter combinations that would be used.

Using this stub should be useful since I am going to be integrating a lot of ASP.NET AJAX work with jQuery functionality. They compliment each other very well.

Now that I have a working stub I am interested in augmenting it with more stubs to cover the popular jQuery plugins like dimensions and jQuery UI.