I am pretty new to jQuery. I encountered a problem when referencing to jQuery in masterpage of my project (you can find part of my masterpage below). I wanted to use datepicker in a page, so I added a set of references (jQuery ui and css) in head above another set of references (for any other jquery throughout my project), but when I ran it, it kept giving me “jQuery undefined” alert.
The interesting thing was if I move the set of refs for datepicker down after the other set (just like the order shown below), it worked properly. I don’t know if its about the order when rendering the page. Any info would be appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.min.js"></script>
<link href="../../Content/Site.css" rel="Stylesheet" type="text/css"/>
<!--date picker-->
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.22.custom.min.js"></script>
<link href="../../Content/jquery-ui-1.8.22.custom.css" rel="Stylesheet" type="text/css"/>
<!--date picker-->
</head>
JavaScript is executed (by default) in the order the
scripttags are encountered in the DOM – if you load some library which has a dependency before you load its dependency you will get errors (as you discovered)See: http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-async
Emphasis mine