Laravel Uncaught ReferenceError: $ is not defined

Question

I'm combining backpack Laravel 's @extends('backpack::layout') with the Ajax CRUD together and I encountered the problem I mentioned in the title.

This is the blade file.

<script type="text/javascript">
    $(document).ready(function() {
     $('#domain_table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('ajaxdata.getdata') }}",
            "columns":[
                { "data": "Domain" },
                { "data": "Registrar" },
                { "data": "Login_ID" },
                { "data": "Password" },
                { "data": "New_Mobile" },
                { "data": "Mobile" },
                { "data": "Email" },
                { "data": "Email_Password" },
                { "data": "action", orderable:false, searchable: false}
            ]
        });
         });
</script>

This is part of the library that is listed in @extends('backpack::layout')

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

Answer 1

try this

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>    
<script type="text/javascript">
    $(document).ready(function() {
     $('#domain_table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('ajaxdata.getdata') }}",
            "columns":[
                { "data": "Domain" },
                { "data": "Registrar" },
                { "data": "Login_ID" },
                { "data": "Password" },
                { "data": "New_Mobile" },
                { "data": "Mobile" },
                { "data": "Email" },
                { "data": "Email_Password" },
                { "data": "action", orderable:false, searchable: false}
            ]
        });
         });
</script>

You have to declare jquery.min.js before actual use of $ .

Answer 2

尝试使用jQuery代替$，例如jQuery（document）代替$（document）