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.
- 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.
- 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.
- 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.
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.