laravel 5.4 datatables not working jquery $ referenceError

Question

I have this code on my dashboard.index view

<table class="table table-striped" id="artists-table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>Name</th>
                        <th>Created_at</th>
                        <th>Updated_at</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#artists-table').DataTable({
                processing: true,
                servedSide: true,
                responsive: true,
                ajax: '{{route('admin.data')}}',
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'name'},
                    {data: 'created_at', name: 'created_at'},
                    {data:  'updated_at', name: 'updated_at'}
                ]
            });
        });

and this is my dashboardController code

class dashboardController extends Controller
{
    //



    public function __construct(){
        $this->middleware('auth');
    }

    public function getIndex(){
        return view('admin.dashboard.index');
    }

    public function getArtists(){
        return Datatables::of(artist::query())->make(true);
    }
}

and i have also wrote these two routes, the problem is this is not displaying the data from datatables as ajax only table headings is displayed. Auth::routes();

Route::get('/admin', 'dashboardController@getIndex')->name('admin');
Route::get('/admin.data', 'dashboardController@getArtists')->name('admin.data');

this code when I inspect the console I see it displays $ referenceError.

in my admin.blade.php master page I loaded all jquery and assets of datatables. like this as I am using Bootstrap 3.

<script src="{{ asset('theme/js/jquery-3.1.1.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('theme/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{asset('theme/js/select2.min.js')}}"></script>

at the footer of the master page.

this means the browser does not recognize $ in your code so make sure to include the jquery before you use it. — Amr Aly
– Amr Aly, Commented Oct 20, 2017 at 1:01
@AmrAly i edited my question please look again as I added the last section how I added scripts in the master page of admin. — eng qaayo
– eng qaayo, Commented Oct 20, 2017 at 1:50

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-10-20 11:38:22Z

The issue is that the DOM-ready callback, i.e.

   $(document).ready(function(){
            $('#artists-table').DataTable({

... is being called before the jQuery library has loaded.

The best way to correct this is to include the javascript for your view with a @yield blade tag:

Example: admin.dashboard.index

@section('content')

...

        <table class="table table-striped" id="artists-table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Name</th>
                    <th>Created_at</th>
                    <th>Updated_at</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


...


@endsection

@section('footer_scripts')

    <script type="text/javascript">
        $(document).ready(function(){
            $('#artists-table').DataTable({
                processing: true,
                servedSide: true,
                responsive: true,
                ajax: '{{route('admin.data')}}',
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'name'},
                    {data: 'created_at', name: 'created_at'},
                    {data:  'updated_at', name: 'updated_at'}
                ]
            });
        });
    </script>

@endsection

And then in your admin.blade.php have the area you outlined in your question look something like:

...

        @yield('content')

    </div>

    {{-- Scripts --}}
    <script src="{{ asset('theme/js/jquery-3.1.1.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('theme/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{asset('theme/js/select2.min.js')}}"></script>

    @yield('footer_scripts')

</body>

Changing to structure above will allow you include javascript in the order you want.

Here are a few examples of what you want to do in action:

@developemator i did as you mentioned and i also removed <script src="{{ asset('js/app.js') }}"></script> script and it worked well.

Collectives™ on Stack Overflow

laravel 5.4 datatables not working jquery $ referenceError

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related