How to avoid Uncaught ReferenceError: $ is not defined in jQuery

Sometimes while developing an existing Web Application, I wanted to use jQuery function and I get this error "Uncaught ReferenceError: $ is not defined".

There are some reasons causing it and ways to avoid them:

• Make sure the references to the jQuery scripts is loading first, but them in the head of master page or the page you are using.
• Sometimes the references to the jQuery scripts is loading twice, make sure it loads only once.
• If you have external js files with your function, which depend on other jQuery libraries, you have to load that library first, and then dependent JS file with your functions.

Example:

This will not work:

<script src="customlib.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

But this will work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="customlib.js"></script>

How to get Drop Down List Selected Text in ASP .NET by using jQuery

The Following code sample shows how to get selected text out from ASP .NET Drop Down List.

<script type="text/javascript">

    function GetSelectedText() {
        var ddlID = '#' + '<%= ddlEmployees.ClientID %>';
        var selectedText = $(ddlID + " option:selected").text();
        return selectedText;
    }

</script>

<asp:DropDownList ID="ddlEmployees" runat="server">
    <asp:ListItem Text="Employee Name 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Employee Name 2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Employee Name 2" Value="2"></asp:ListItem>
</asp:DropDownList>