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

Mat's avatar
Mat committed
3
{% block title %}
Mat's avatar
Mat committed
4
    Ajax interroge API
Mat's avatar
Mat committed
5 6
{% endblock %}

Mat's avatar
Mat committed
7 8 9 10
{% block sidebar %}
    ici la sidebar qui contiendra un autre fragment ajax
{% endblock %}

Mat's avatar
Mat committed
11

Mat's avatar
Mat committed
12
{% block content %}
Mat's avatar
Mat committed
13 14 15 16
    {{ block('breadcrumb') }}

    <h1>{{ block('title') }}</h1>

Mat's avatar
hop  
Mat committed
17 18 19
    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>
Mat's avatar
Mat committed
20

Mat's avatar
Mat committed
21 22 23 24 25 26 27 28 29 30 31 32
    <table id="table-owners">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
33 34 35 36 37
{% endblock %}

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

38
    // L'URL de l'API
39
    let ownersURL = '{{ path('api_owner_read') }}';
40 41

    // Le tableau
42 43 44
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

45 46
    //console.log(ownersURL);
    //console.log(table);
Mat's avatar
Mat committed
47

48
    // La fonction AJAX
Mat's avatar
Mat committed
49 50 51 52
    function reloadTableOwner()
    {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
53 54 55

            //console.log(this);

Mat's avatar
Mat committed
56 57
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
58

Mat's avatar
Mat committed
59
                let json = JSON.parse(this.responseText);
60 61 62 63

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

65 66 67
                    let td1 = document.createElement('td');
                    td1.textContent = json[i].firstname;
                    tr.appendChild(td1);
68

69 70 71
                    let td2 = document.createElement('td');
                    td2.textContent = json[i].lastname;
                    tr.appendChild(td2);
72

73
                    let td3 = document.createElement('td');
74
                    td3.textContent = formatStringDate(json[i].created_at);
75
                    tr.appendChild(td3);
76

77
                    let td4 = document.createElement('td');
78 79 80 81
                    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>';

82
                    tr.appendChild(td4);
83 84 85
                    tbody.appendChild(tr);

                    console.log(json[i].firstname);
86 87
                }

Mat's avatar
Mat committed
88
            }
Mat's avatar
Mat committed
89 90 91 92
        };
        xhr.open('GET', ownersURL, true); // les données GET sont dans ownersURL
        xhr.send(null); // les données POST seraient ici
    }
93 94

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

97
</script>
Mat's avatar
Mat committed
98
{% endblock %}