Why am I getting a jQuery Reference error after jQuery has loaded

Question

I am getting an error on a simple jQuery test. Please see the image to show the order of files loading and the fact that the jQuery is loaded before the error happens.

Here is my Content Page:

    <asp:Content
    ID="Content1"
    ContentPlaceHolderID="HeadContent"
    runat="server">
</asp:Content>
<asp:Content
    ID="Content2"
    ContentPlaceHolderID="MainContent"
    runat="server">

    <textarea id="txtArea"> hi </textarea>

    <script type="text/javascript">
        // Shorthand for $( document ).ready()
        $(function () {

            $('txtArea').val = "bye";
        });
    </script>
</asp:Content>

I have my scripts loaded at the end of my Master page, before the closing tag.

Anyone know what is causing this simple error?

I don't think my image is uploading. Here is the firebug results showing the library is loaded.

GET TestFolder/TestLoadingScriptsFromDifferentFolderLevel.aspx [HTTP/1.1 200 OK 1351ms]
GET Styles/Site.css [HTTP/1.1 200 OK 4ms]
GET WebResource.axd [HTTP/1.1 200 OK 351ms]
GET http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js [HTTP/1.1 200 OK 405ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js [HTTP/1.1 200 OK 417ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/le-frog/jquery-ui.css [HTTP/1.1 200 OK 338ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/mint-choc/jquery-ui.css [HTTP/1.1 200 OK 285ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js [HTTP/1.1 200 OK 394ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js [HTTP/1.1 200 OK 380ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js [HTTP/1.1 200 OK 419ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css [HTTP/1.1 200 OK 61ms]
GET http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css [HTTP/1.1 200 OK 57ms]
GET http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js [HTTP/1.1 200 OK 129ms]
ReferenceError: $ is not defined TestLoadingScriptsFromDifferentFolderLevel.aspx:45
GET WebResource.axd [HTTP/1.1 200 OK 2ms]

Answer 1

the line "I have my scripts loaded at the end of my Master page, before the closing tag." makes me think there in lies your issue.

Load the scripts at the top of your master page, this will fix your issue.