locked
Error- Uncaught ReferenceError: $ is not defined at Employee.js:2 RRS feed

  • Question

  • User1979860870 posted

    Hi

      In _Layout,cshtml i have defined Js files like below. But it is giving me above error

    <html>
    <body>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script> 
        @*<script src="~/Scripts/jquery-1.10.4.min.js"></script>*@
        <script src="~/Scripts/jquery-ui-1.11.4.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="~/vendor/datatables/jquery.dataTables.js"></script>
    </body>
    </html>
    
    
    
    $(document).ready(function () {
        $("#delete-dialog").hide;
        $('#tblEmployee').DataTable({
            "pageLength": 10,
            order: [],
            columnDefs: [{ orderable: false, targets: [3, 4] }]
        });
        loadData();
    });

    Thanks

    Friday, February 26, 2021 5:13 PM

Answers

  • User-474980206 posted

    the error means <script src=Employee.js> comes before the jquery include. view page source to see order. 

    also you should not mix jquery-ui (dead project) with bootstrap. whatever component you wanted, you should get a bootstrap compatible version.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 26, 2021 7:42 PM

All replies

  • User475983607 posted

    This is a very common programming mistake.  The code tries to reference jQuery but jQuery is not loaded.   You did not share any details related to the jQuery code like where or when it is loaded.   But the error is very clear.  

    Also, the code shown above shows you are loading two different version of jQuery.

        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script> 
        @*<script src="~/Scripts/jquery-1.10.4.min.js"></script>*@
        <script src="~/Scripts/jquery-ui-1.11.4.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="~/vendor/datatables/jquery.dataTables.js"></script>

    Friday, February 26, 2021 6:15 PM
  • User-474980206 posted

    the error means <script src=Employee.js> comes before the jquery include. view page source to see order. 

    also you should not mix jquery-ui (dead project) with bootstrap. whatever component you wanted, you should get a bootstrap compatible version.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 26, 2021 7:42 PM
  • User1979860870 posted

    Hi Bruce

      I have defined in _Layout.CsHtml head . If i define like below then it works o.k

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>

    but if i comment above line & i write below then it gives same error

    <script src="~/Scripts/jquery-1.10.4.min.js"></script>

    <!DOCTYPE html>
    <html>
    <head>
        <title>SB Admin - Start Bootstrap Template</title>
        <!-- Bootstrap core CSS-->
        <link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Custom fonts for this template-->
        <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <!-- Page level plugin CSS-->
        <link href="~/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
        <!-- Custom styles for this template-->
        <link href="~/css/sb-admin.css" rel="stylesheet" />
    
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>
        @*<script src="~/Scripts/jquery-1.10.4.min.js"></script>*@
        <script src="~/Scripts/bootstrap.js"></script>
        <script src="~/vendor/datatables/jquery.dataTables.js"></script>
    </head>

    Thanks

    Saturday, February 27, 2021 5:29 AM
  • User475983607 posted

    I have defined in _Layout.CsHtml head . If i define like below then it works o.k

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>

    but if i comment above line & i write below then it gives same error

    <script src="~/Scripts/jquery-1.10.4.min.js"></script>

    It sounds like /Scripts/jquery-1.10.4.min.js does not exist in your project.  Open the browser's dev tools and look for a 404 error in the network view.

    Saturday, February 27, 2021 11:08 AM