Placing jQuery Refernce at the bottom of HTML Document breaks User Control

Question

Walter Rumsby provided a great answer to Where to place JavaScript in an HTML file. He references the work done by the Yahoo Exceptional Performance team and their recommendation to place scripts at the bottom of the page. Which is a hard and fast rule that I've been following for quite sometime now. In the same thread Levi Rosol pointed out "the best place for it [JavaScript] is just before you need it an no sooner." That is the predicament that I now find myself in.

I've added my reference to jQuery at the end of my page but have run into an issue with how to structure a user control that I'd like to add client side functionality to. Specifically, I am having a hard time working out the best way to accommodate dependencies. The user control has a span tag containing a numeric value that I'd like to update based on the number of check boxes the user has checked in the user control. I am using jQuery to find the span tag and update its text property.

Unfortunately, unless my reference to jQuery appears prior to the user control I receive JavaScript errors. This makes sense because the control is referencing functions that have not yet been added. I can think of several solutions to the issue but am looking for a best practice option.

1. Placing a reference to the jQuery library inside of the user control.
   • Downside: if the user control was placed into a repeater multiple references to the jQuery library would be made.
2. Put no JavaScript in the user control and write all code to update the span tag for the user control in the containing page.
   • Downside: I'd end up with the same code in multiple places creating a potential maintenance nightmare.
3. Place the jQuery reference in the head section of the page.
   • Downside: I've violated the recommendation to place scripts at the bottom of the page and have created an unusable user control if the page does not include a reference to jQuery.

Those are the options and downsides I came up with when thinking about solutions to this problem. I am certainly open to suggestions for better solutions and barring none looking for a recommendation of which of the three I should choose.

Answer 1

Another option would be to dynamically generate the script reference by registering a startup script from your usercontrol that wrote a script reference to the document head.

The javascript function could check for an existing jQuery reference, and if none was found, write the reference out. This would solve the multiple references. A basic example was discussed in this thread.

Answer 2

The simplest solution to this I've found is to use a helper to accumulate Javascript fragments to be included at the page body while rendering other page elements. Then, you can include jQuery first, followed by any deferred literal Javascript fragments.

It does require maintaining some extra state during page generation, which can complicate your rendering pipeline just a bit. However, it allows you to get deferred Javascript inclusion, without requiring complex DOM manipulation after the page is loaded to pick out any existing references to jQuery.

Answer 3

There's a Google project that aims to solve these pains you may want to look at called Jingo:

http://code.google.com/p/jingo/

Another solution I'd recommend is a loader like YUI Loader Utility.

http://developer.yahoo.com/yui/yuiloader/

It will allow you to manage dependencies etc. and it's not just useful when you're using their UI components. It can be used for anything; just look at the docs around addModule.

If you're using ASP.NET the ScriptManager is another good solution.