What is the best way to reference jquery in asp.net?

Question

I watched a pdc session by Stephen Walther and in the presentation he was referencing the JQuery js file like the following:

<asp:ScriptManager id="sm1" runat="server">
<Scripts>
    <asp:ScriptReference Path="~/Scripts/JQuery.js" />
</Scripts>
</asp:ScriptManager>

Is there a advantage or disadvantage to doing it the above way instead of just using a link in the head section of the page.

He was also putting the following into the javascript section of his sample pages to run JQuery:

<script type="text/javascript">

function pageLoad()
{
   $(":text").css("background-color","yellow");
}
</script>

Is the pageLoad necesary above? He mentioned that it is from the Microsoft AJAX library and it waits for the DOM to be finished loading, but I thought the $ symbol in JQuery is just a shorthand for waiting for the DOM to be finished loading.

Answer 1

$(document).ready() and pageLoad() are not the same!

http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/

From the article:

pageLoad() is called just after the DOM has finished loading. this isn’t the only point at which pageLoad() is called though: It is also called after every partial postback.

In the case of initialization code that should run once, $(document).ready() is the ideal solution.

Answer 2

Adding your scripts through ScriptManager in that way has the advantage of making it easy to concatenate+minify your files by using CompositeScript. Unfortunately, that means they'll be referenced on the page through ScriptResource.axd, which I have always found to be an extremely ugly solution.

I'm much more interested in integrating something like juicer into my build process, but you can't beat ScriptManager for convenience.

Answer 3

Using the ScriptManager, ASP.NET can create a single Composite Script to reduce the number of browser requests, and also if the browser supports it, compress the script.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/Script1.js" />
            <asp:ScriptReference Path="~/Scripts/Script2.js" />
            <asp:ScriptReference Path="~/Scripts/Script3.js" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

Answer 4

If you are looking at how to reference the jQuery file, this is what I am doing:

<script type="text/javascript" src="Scripts/jquery.js"></script>

Since you will have the ScriptManager on your page, you will also be able to tap into PageLoad.

function pageLoad() {
    //MSAJAX Stuff...  If Needed
}

$(document).ready(function() {
    $.datepicker.setDefaults($.datepicker.regional[$("#<%= hfCultureAbbreviation.ClientID %>").val()]);
});

Answer 5

Don't forget to register the Intellisense file as well! Sometimes can be pretty handy.