Why does it make a difference where I include the jQuery script file?

Question

On my master page (for all pages in my site) I have a ToolkitScriptManager.

On my content page, there are a series of hyperlinks and divs for collapsible functionality.

The code to show/hide the panels work like the following:

$(document).ready(function() {
// Hookup event handlers and execute HTML DOM-related code
$('#nameHyperLink').click(function() {

        var div = $('#nameDiv');
        var link = $('#nameHyperLink');
        if (div.css('display') == 'none') {
            link.text('Hide Data');
            div.show('100');
        }
        else {
            link.text('Show Data');
            div.hide('100');
        }

    });
});

If I include a ScriptReference to the jQuery 1.4.2 file in the toolkitscriptmanager, the javascript code is executed incorrectly on the page (only the text for the hyperlink is changed, the div is not actually shown.) However, if I don't include the jQuery file in the ToolkitScriptManager and instead include it in the content page, it works correctly.

I'm a Javascript/jQuery newbie, and this makes no sense at all. What's going on here?

Answer 1

Positioning of the script include is important for the jQuery ref. If you look at your generated source I would bet the tag is below the script function(). You should make sure that the jQuery reference comes as early as you can get it in the page source.

Try moving the jQuery library reference into the head of your master page, that should work. Otherwise post up some source!

Answer 2

Like Tj says... should probably be in the head section of your master page. Also, it's nice to link to Google's version of this library, because chances are your users will already have it cached. For instance, look at the source for this very page.

The two most probable causes here are $ not being defined yet (see Tj's answer) and $ getting defined by another library, such as prototype.

I would highly suggest you look into using Firebug's javascript debugger, or at least take a look at Firefox's built in error console (Tools -> Error console). That will give you a much better clue what is going on other than "it's not working."