Uncaught ReferenceError: $ is not defined at 10:503

Posted 7 months ago by dextersiah1998

I'm trying to include my script files in my master layout and whenever i try to use a jquery function there will be an error

Uncaught ReferenceError: $ is not defined at 10:503

I have double checked that my file path are correct and when i check the source code and ctrl+ left-click it does link me to my jquery file. Does this problem have to do with the skeleton and structure that i have laid out?

Master.blade.php

<!DOCTYPE html>
<html lang="en" data-textdirection="ltr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>{{config('app.name','Manage Me')}}</title>


    <script src="{{asset('js/core/libraries/jquery.min.js')}}" type="text/javascript" defer></script>
    <script src="{{asset('vendors/js/ui/tether.min.js')}}" type="text/javascript" defer></script>
    <script src="{{asset('js/core/libraries/bootstrap.min.js')}}" type="text/javascript" defer></script>
    <!-- END VENDOR JS-->

    <!--External SCRIPT-->
    <script src="{{asset('js/scripts/dashboard.js')}}" type="text/javascript" defer></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript" charset="utf8" defer></script>
    <script src="{{asset('js/scripts/clock/jquery.countdown.js')}}" type="text/javascript" defer></script>

    <link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-extended.css')}}">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

     <!--END External CSS-->
    
</head>
<body class="vertical-layout vertical-menu 2-columns">
    <br>
    @include('layouts.header')
    @include('layouts.sideBar')
    @yield('content')
    
</body>

layout files

@extends('layouts.master')
@section('content')
    
    @include('tableData')   << location of table that has #table_id

<script type="text/javascript">
    $(document).ready(function () {   //error here << 
        $('#table_id').DataTable({
            "info": false,
            "paging": false,
            "searching": false
        });

        $('#table_id_archive').DataTable({
            "info": false,
            "paging": false,
            "searching": false
        });

        $('#clock').countdown('2020/10/10', function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });

        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    });

</script>
@endsection


Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.