当单击分支视图中的按钮时，为表的每个元素显示一个对话框窗口

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

本文关键字：显示 元素 窗口 一个 对话框 视图 分支 单击 按钮      更新时间：2023-09-26

我的symfony项目的分支视图中有以下代码：

<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>

正如您所看到的，这是一个基本的html页面。我在循环{% for currentData in arrayData %}中的表中显示所有数据。在该表中，有两种类型的按钮：Show Details按钮和Edit按钮。编辑按钮工作得很好，没有问题，我的重定向适用于表中的所有数据，我可以编辑我选择的数据。

对于按钮Show Details：所需的行为是在我的页面中打开一个窗口对话框，其中包含我需要为每行显示的所有数据。但事实上，当单击Show Details时，我的对话框窗口只在表的第一行工作，当我单击另一行的另一个"显示详细信息"按钮时，什么都没有发生（实际上什么都没有）。

我哪里错了？

请注意，目前，我不在窗口对话框中传递数据，而是通过Ajax和Symfony Controller进行传递

因为id用于获取单个dom元素，而不应该在多个dom元素上使用相同的id，所以应该添加一个类似show的类：<a><button class="btn btn-info btn-xs show" id="show">Show Details</button></a>，然后使用document.getElementsByClassName('show')获取所有具有类show的按钮，然后可以向每个按钮添加Eventlistener:

(function() {
    var dialog = document.getElementById('window');
    // Array of the buttons.
    var showButtons = document.getElementsByClassName('show');
    // Event handler
    var showDialog = function() {
      // Now you have to use the show button as base , to find the data you want
      // to display...
      console.log(this);
      dialog.show();
    };
    var i, len = showButtons.length;
    for(i = 0; i < len; ++i) {
        showButtons[i].onclick = showDialog;
    }
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();

jsFiddle

您在循环的主体中使用此行：

<button class="btn btn-info btn-xs" id="show">

这将导致id属性不唯一——这是无效的，也不会起作用。您可以将{{ loop.index }}附加到当前的id值以生成唯一的ID，或者（更好）使用jQuery并执行类似。。。

$('button.btn.btn-info.btn-xs').on(
    'click',
    function() {
        var clickedButton = $(this);
        // do something ...
    }
)

这是因为您试图为所有按钮设置相同的id。不要这样做，这不是有效的HTML。您应该使用一个类，并使用getElementsByClassName获取所有按钮，如下所示：

var buttons = document.getElementsByClassName("show"); 
for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        alert("Why hello there!");
    };
}

这是一个小提琴的例子https://jsfiddle.net/0qaht3ry/

相关文章：