0

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( function () {
            $('#item_list').DataTable();
        });
    </script>
    
    <!-- Styles -->
    <link href="/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <table class="table table-striped" id="item_list">
                    <thead class="thead-dark">
                        <tr>
                            <th class="all">Position</th>
                            <th class="all">Name</th>
                            <th class="all">Club</th>
                            <th class="all">Value</th>
                            <th class="all">Points</th>
                            <th class="all">Add</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                                <td>S</td>
                                <td><a data-id="88" class="player-info">Andreas Cornelius</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>0</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                                                    <tr>
                                <td>G</td>
                                <td><a data-id="1190" class="player-info">Etrit Berisha</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>11</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                                                    <tr>
                                <td>G</td>
                                <td><a data-id="1191" class="player-info">Marco Carnesecchi</a></td>
                                <td>Atalanta</td>
                                <td>4.50</td>
                                <td>0</td>
                                <td><a class="btn-sm btn btn-success" href="http://127.0.0.1:8019/my-team">Add</a></td>
                            </tr>
                    </tbody>
                    </table>
</body>
</html>

I am getting this error:

Uncaught TypeError: $(...).DataTable is not a function

This is my code:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $('#item_list').DataTable();
    });
</script>

I literally removed all the other scripts I had to make sure there are no conflicts or anything. jQuery works otherwise, so this works for example:

$(document).ready( function () {
    console.log('What is going on');
});

Does anyone have any idea whatsoever what might be the problem here?

I got the latest version of both jQuery and Datatables from their respective CDNs.

This is the actual table:

<table class="table table-striped" id="item_list">
                <thead class="thead-dark">
                    <tr>
                        <th class="all">Position</th>
                        <th class="all">Name</th>
                        <th class="all">Club</th>
                        <th class="all">Value</th>
                        <th class="all">Points</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($players as $player)
                        <tr data-id="{{ $player['id'] }}">
                            <td>{{ $player['position']['short_name'] }}</td>
                            <td>{{ $player->name }}</td>
                            <td>{{ $player['club']['name'] }}</td>
                            <td>{{ $player->value }}</td>
                            <td>{{ $player->season_score }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

All the rows have correct data displayed, it's just Datatables that's the problem.

sveti petar
  • 3,637
  • 13
  • 67
  • 144
  • 2
    Check your *rendered* output for any and all script includes. Many frameworks add jquery to the layout/master page *at the end* which will overwrite your manually added script. – freedomn-m Jul 23 '19 at 08:57
  • @freedomn-m Just checked. Looks correct to me. jQuery is included once at the top and not mentioned anywhere below, except for one place where it says `` but I don't think that could be a problem, could it? – sveti petar Jul 23 '19 at 09:00
  • 1
    The next step is to create a reproducible example, ideally here in a snippet but possibly in jsfiddle or similar. [mcve] – freedomn-m Jul 23 '19 at 09:01
  • @freedomn-m You're right, in the code snippet it works. But jQuery is definitely not (directly) included in the page source. Do you have any suggestion for how I can go about debugging this then? – sveti petar Jul 23 '19 at 09:06
  • First, move your 2x includes + script to just before the closing `

    ` - it that works, then you definitely have something overriding your scripts. If it still doesn't work, then check the network tab for errors.

     – freedomn-m Jul 23 '19 at 09:08
  • Try using doing `console.log($('#item_list'))`, to see if the the table has been properly rendered (although it should be since you are using `ready`). If it is not yet rendered either move the script to the footer, or use `addEventListener("ready", function(){})` – nick zoum Jul 23 '19 at 09:08
  • Did you read about [`jQuery.noConflict(true);`](https://api.jquery.com/jQuery.noConflict/)? It is used to have jQuery on an other variable name (instead of `$`). So I would do `var myJQ = jQuery.noConflict(true);` and use `myJQ(document).ready({...})` --- But simply try removing that line first. ;) – Louys Patrice Bessette Jul 23 '19 at 09:34

0 Answers0