Search code examples
javascripthtmljsonajaxbootstrap-4

Dynamic data reloading with Ajax and pagination

I'm trying to get information about animals and their speeds from an API.

enter image description here

The information should be saved in a table with 5 columns. it should look something like this:

enter image description here

you will find the code that I have written so far underneath. The problem is that only the two buttons load, but not the table with the information. Do you have an idea what the error could be?

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
        integrity="sha384-1srTifKwwmIWHsyIaapyeJQY2XxzfjIHpftPvwHSi97Mfm4cZNKDBAdVSrtRvti5" crossorigin="anonymous">
    <script> src = "https://code.jquery.com/jquery-3.7.1.min.js"
        integrity = "sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
        crossorigin = "anonymous"
    </script>
</head>

<body class="text-center">
    <br />
    <button class="btn btn-primary btn-lg" id="prev">Prev</button>
    <button class="btn btn-primary btn-lg" id="next">Next</button>
    <br />
    <table id="table" class="table table-striped table-striped table-hover">
        <tbody id="tableBody" />
    </table>
    <script src=" myScript.js">
    </script>
</body>

</html>

//Below the myScript.js

$(document).ready(function () {

    /*Variablen  */
    var counter = -5;
    var end = false;

    $("#next").click(function () {
        if (!final) {
            counter = counter + 5;
        }
        $.get("http://localhost:8080/webService/api/velocitiespagination?start=" + counter, function (velocities) {
            createTable(velocities);
        });
    });
    $("#prev").click(function () {
        counter = counter - 5;
        if (counter < 5){
            counter = 0;
        }
        $.get("http://localhost:8080/webService/api/velocitiespagination?start=" + counter, function (velocities) {
            createTable(velocities);
        });
    });


    createTable(velocities);
});

function createTable(velocities) {
    var text = "<tbody><tr><th>Tier<>/th><th>Maximalgeschwindigkeit Tier</th></tr>";
    $.each(velocities, function (key, velocity) {
        text = text + "<tr><td>" + velocity.animal + "</td><td>" + velocity.velocity + "</td></tr>";
    });
    text += "</tbody>"
    $("#myTable").html(text);

    end = velocities.length === 0;
}
Solution

  • I imagine if you look at the console you'll see errors about $(...).ready() not being a function because you're not loading jQuery.

    You are declaring variables src, integrity and crossorigin when you do this

    <script> src = "https://code.jquery.com/jquery-3.7.1.min.js"
        integrity = "sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
        crossorigin = "anonymous"
    </script>

    You want them as attributes on the script tag, like this

    <script src = "https://code.jquery.com/jquery-3.7.1.min.js"
        integrity = "sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
        crossorigin = "anonymous" >
    </script>