Bootstrap 模态无法获取用户 ID

Question

我的 bootstrap 模态有问题。我正在使用 PHP.

在管理面板中有一个 table，其中包含用户列表以及编辑或删除用户个人资料的可能性。对于删除，我想创建一个模态来确认删除，但是，当我单击模态内的“确认”按钮时，模态默认获取 table 中第一个用户的用户 ID，而不是所选用户的用户 ID。

代码如下：

<?php foreach ($utenti as $utente) { ?>
<tr>

  <th scope="row"> <?php echo $utente['idUser']?> </th>

  <td><?php echo $utente['nome']." ".$utente['cognome']?></td>
  <?php if($_SESSION['role'] == 1) {?>
  <td><?php echo $utente['az']?></td>
  <?php } ?>

  <td><?php echo $utente['email']?></td>

  <td class="text-warning"><a
    href="<?php echo 'editUser.php?user='.$utente['idUser']?>"><i
    class="fas fa-edit text-warning"></i></a></td>
  <!--    <td class="text-warning"><a href="  "><i class="fas fa-trash-alt text-danger"></i></a></td> -->
  <td class="text-danger">
    <button type="button" class="btn" data-toggle="modal"
            data-target="#confirmDelete"><i
      class="fas fa-trash-alt text-danger"></i><?php var_dump($utente['idUser']); ?>
    </button>
  </td>

  <div class="modal" tabindex="-1" role="dialog" id="confirmDelete">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">
            Attenzione <?php var_dump($utente['idUser']); ?></h5>

          <button type="button" class="close" data-dismiss="modal"
                  aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p>Continuando eliminerai l'utente in maniera irreversibile</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger "
          ><a
            class="text-white btn-modal-confirm"
            href="<?php echo '?action=delete&user='.$utente['idUser']?>"
          >Elimina</a>
          </button>

          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Indietro
          </button>
        </div>

      </div>

    </div>

  </div>

</tr>

<?php }?>

如果我在模式前创建 $utente['idUser'] 的 var_dump，它会获得正确的用户 ID。如果我把它放在模态里面，它会默认获得第一个 ID，正如我所说的。

Answer 1

请注意，每个模式触发按钮都有一个 data-target 属性来定义将打开哪个模式。

在你的例子中，你用来触发模式的每一行的按钮都有相同的data-target，即#confirmDelete。后面的这些模态也有相同的 id 称为 #confirmDelete，所以每次你点击模态触发按钮（都有相同的 data-target）然后最终它会显示第一个模态元素.

为了更好地理解，请将我的代码与您的代码进行比较并查看差异。

<?php foreach ($utenti as $utente) { ?>
<tr>

  <th scope="row"> <?php echo $utente['idUser']?> </th>

  <td><?php echo $utente['nome']." ".$utente['cognome']?></td>
  <?php if($_SESSION['role'] == 1) {?>
  <td><?php echo $utente['az']?></td>
  <?php } ?>

  <td><?php echo $utente['email']?></td>

  <td class="text-warning"><a
    href="<?php echo 'editUser.php?user='.$utente['idUser']?>"><i
    class="fas fa-edit text-warning"></i></a></td>
  <!--    <td class="text-warning"><a href="  "><i class="fas fa-trash-alt text-danger"></i></a></td> -->
  <td class="text-danger">
    <button type="button" class="btn" data-toggle="modal"
            data-target="#confirmDelete_<?php echo $utente['idUser']; ?>"><i
      class="fas fa-trash-alt text-danger"></i><?php var_dump($utente['idUser']); ?>
    </button>
  </td>

  <div class="modal" tabindex="-1" role="dialog" id="confirmDelete_<?php echo $utente['idUser']; ?>">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">
            Attenzione <?php echo $utente['idUser']; ?></h5>

          <button type="button" class="close" data-dismiss="modal"
                  aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p>Continuando eliminerai l'utente in maniera irreversibile</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger "
          ><a
            class="text-white btn-modal-confirm"
            href="<?php echo '?action=delete&user='.$utente['idUser']?>"
          >Elimina</a>
          </button>

          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Indietro
          </button>
        </div>

      </div>

    </div>

  </div>

</tr>

<?php }?>

在上面的代码中，我给每对模态元素（模态触发按钮和模态 ID）一个唯一的 data-target 值和一个唯一的元素 ID。

...
<button type="button" class="btn" data-toggle="modal"
            data-target="#confirmDelete_<?php echo $utente['idUser']; ?>">
...
<div class="modal" tabindex="-1" role="dialog" id="confirmDelete_<?php echo $utente['idUser']; ?>">
...

现在每对模态元素都有自己的ids，它们应该按照您想要的方式工作。

Bootstrap 模态无法获取用户 ID

Bootstrap modal doesn't get user ID

php

html-table

modal-dialog

twitter-bootstrap