mainDisplay.html.twig 2.46 KB
Newer Older
Mat's avatar
Mat committed
1 2 3
{% extends "@Techno/layout.html.twig" %}

{% block body %}
Mat's avatar
hop  
Mat committed
4 5 6
    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>
Mat's avatar
Mat committed
7 8 9 10 11 12 13 14 15 16 17 18
    <table id="table-owners">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
19 20 21 22 23
{% endblock %}

{% block customJS %}
<script type="text/javascript">

24
    // L'URL de l'API
25
    let ownersURL = '{{ path('api_owner_read') }}';
26 27

    // Le tableau
28 29 30
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

31 32
    //console.log(ownersURL);
    //console.log(table);
Mat's avatar
Mat committed
33

34
    // La fonction AJAX
Mat's avatar
Mat committed
35 36 37 38
    function reloadTableOwner()
    {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
39 40 41

            //console.log(this);

Mat's avatar
Mat committed
42 43
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
44

Mat's avatar
Mat committed
45
                let json = JSON.parse(this.responseText);
46 47 48 49

                for (let i = 0; i < json.length; i++)
                {
                    let tr = document.createElement('tr');
50

51 52 53
                    let td1 = document.createElement('td');
                    td1.textContent = json[i].firstname;
                    tr.appendChild(td1);
54

55 56 57
                    let td2 = document.createElement('td');
                    td2.textContent = json[i].lastname;
                    tr.appendChild(td2);
58

59 60 61
                    let td3 = document.createElement('td');
                    td3.textContent = json[i].created_at;
                    tr.appendChild(td3);
62

63
                    let td4 = document.createElement('td');
64 65 66 67
                    td4.innerHTML =
                          '<a class="btn btn-primary" href="#"><i class="fas fa-edit fa-fw"></i> Editer</a>'
                        + '<a class="btn btn-danger" href="#"><i class="fas fa-trash fa-fw"></i> Supprimer</a>';

68
                    tr.appendChild(td4);
69 70 71
                    tbody.appendChild(tr);

                    console.log(json[i].firstname);
72 73
                }

Mat's avatar
Mat committed
74
            }
Mat's avatar
Mat committed
75 76 77 78
        };
        xhr.open('GET', ownersURL, true); // les données GET sont dans ownersURL
        xhr.send(null); // les données POST seraient ici
    }
79 80

    // dans la console JS, recharger la fonction suivante pour voir apparaitre le debug Ajax de Symfony
Mat's avatar
Mat committed
81 82
    reloadTableOwner();

83
</script>
Mat's avatar
Mat committed
84
{% endblock %}