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!