Clever Geek Handbook

Placing jQuery Refernce at the bottom of the HTML document breaks user control

Walter Rumsby gave a great answer Where to put JavaScript in your HTML file . He refers to 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 have followed for quite some time. In the same thread, Levi Rosol noted that "the best place for her [JavaScript] is just before you need it." This is the predicament I find myself in now.

I added a jQuery link at the end of my page, but ran into a problem with structuring a custom control to which I would like to add client-side functionality. In particular, I find it difficult to find the best way to account for dependencies. The custom control has a span tag containing a numeric value that I would like to update based on the number of checkboxes the user has checked in the custom control. I am using jQuery to find the span tag and update its text property.

Unfortunately, if my jQuery link doesn't appear in front of the custom control, I get JavaScript errors. This makes sense because the control is referencing features that have not yet been added. I can think of several solutions to the problem, but I'm looking for the best option.

  • Placing a link to the jQuery library inside a custom control.
    • Downside: If a custom control was placed in a relay, there will be multiple references to the jQuery library.
  • Don't put JavaScript in the custom control, and don't write all the code to update the span tag for the custom control on the page that contains the information.
    • Downside: I end up with the same code creating a potential maintenance nightmare.
  • Place the jQuery link in the chapter section of the page.

These are the options and disadvantages that I came up with when thinking about solutions to this problem. I am definitely open to suggestions for the best solutions and prohibits anyone from looking for recommendations on which of the three I should choose.

+2


source to share


3 answers


Another option is to dynamically generate the script link by registering the script run from your user control that wrote the script link to the head of the document.



The javascript function can check for an existing jQuery link and if it was not found then write the link. This will resolve multiple links. This thread has discussed a basic example .

+1


source


There is a Google project that aims to solve these problems, which you can look at in the name Jingo:

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

Another solution that I would recommend is a loader like the YUI Loader Utility.



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

This will allow you to manage dependencies, etc., and it is not just useful when you are using your own UI components. It can be used for anything; just look at the docs around addModule.

If you are using ASP.NET, the ScriptManager is another good solution.

+2


source


The simplest solution I have found is to use the accumulate Javascript snippets helper to be included in the page body when rendering other page elements. Then you can include jQuery first and then any Javascript deferred literals.

This requires maintaining some additional state during page generation, which can complicate the rendering pipeline a bit. However, it allows you to defer the inclusion of Javascript without requiring complicated DOM manipulation after page load to select any existing jQuery references.

0


source






More articles:


All Articles