display a dialog window for each element of table when clicking on a button in twig view

I have this code in my twig view for my symfony project:

<table>
  <thead>
    <tr>
      <th>DATA 1</th>
      <th>DATA 2</th>
      <th>DATA 3</th>
      <th>DATA 4</th>
      <th>DATA 5</th>
      <th>DATA 6</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for currentData in arrayData %}
      <tr>
        <td>{{ currentData.data1}}</td>
        <td>{{ currentData.data2}}</td>
        <td>{{ currentData.data3}}</td>
        <td>{{ currentData.data4}}</td>
        <td>{{ currentData.data5}}</td>
        <td>{{ currentData.data6}}</td>
        <td>
          <a><button class="btn btn-info btn-xs" id="show">Show Details</button></a> <!-- for open dialog window -->
          <a href="{{ path('editData', {'idData': currentData.idData }) }}"><button class="btn btn-warning btn-xs">Edit</button></a>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- dialog window-->
<dialog id="window">
  <div class="header">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
          <a>Detail</a>
        </li>
        <button class="btn btn-danger btn-sm pull-right" id="exit">Close</button>
    </ul>
  </div>
  <div class="panel-body page-header">
    <!-- my content here -->
  </div>
</dialog>

<script>
  (function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
      dialog.show();
    };
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();
</script>

As you can see, it’s a basic html page. I display all my datas in a table in my loop {% for currentData in arrayData %}.
On this table, there are two types of button: Show Details button and Edit button. The Edit button works well, there’s no problem, my redirection works for all datas in my table and I can edit data I chose.

For the button Show Details: the desired behavior is that a window dialog opens in my page and contains every datas I need to display for each lines. But in fact, my dialog window works just on the first line of my table when clicking on Show Details, and when I click on another Show Details button of another line, nothing happened (really nothing).

Where am I wrong?


Source: html

Leave a Reply