英文:
using a Modal to view data in @foreach loop
问题
我想通过ID在模态框中显示数据,但模态框始终显示相同的数据。不管我点击哪一行,它总是显示来自相同行的数据。我不知道为什么它不能传递正确的数据。
这是代码。
<table class="table table-bordered table-hover table-striped" id="mitabla" border="1">
<thead>
<tr>
<th class="text-center" style="width: 40px;">#</th>
<th><p>Marcar</p><input type="checkbox" id="casilla"></th>
<th>Host Name </th>
<th>Nº de Serie </th>
<th>Modelo</th>
<th>Cargador</th>
<th>Maletín</th>
<th>Docking</th>
<th>Ratón / Teclado</th>
<th>Observaciones</th>
<th>Usuario
<details>
<summary>英文:</summary>
I would like to show data in a Modal by the ID, but the Modal always shows the same data. It does not matter the row I click, it shows always data from the same row. I don´t know why it is not passing the correct data.
This is the code.
<table class="table table-bordered table-hover table-striped"id="mitabla" border="1">
<thead>
<tr>
<th class="text-center" style="width: 40px;">#</th>
<th><p>Marcar</p><input type="checkbox" id="casilla"></th>
<th>Host Name </th>
<th>Nº de Serie </th>
<th>Modelo</th>
<th>Cargador</th>
<th>Maletín</th>
<th>Docking</th>
<th>Ratón / Teclado</th>
<th>Observaciones</th>
<th>Usuario</th>
<th class="text-center" style="width: 100px;">Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<?php foreach($all_informatica as $infor): ?>
<td class="text-center"><?php echo (int)$infor['id'];?></td>
<td><input type="checkbox" class="casilla" name="casilla[]" value="<?php echo $infor['id'];?>"></td>
<td><?php echo remove_junk(ucwords($infor['hostName']))?></td>
<td><?php echo remove_junk(ucwords($infor['nSerie']))?></td>
<td><?php echo remove_junk(ucwords($infor['modelo']))?></td>
<td><?php echo remove_junk(ucwords($infor['cargador']))?></td>
<td><?php echo remove_junk(ucwords($infor['maletin']))?></td>
<td><?php echo remove_junk(ucwords($infor['docking']))?></td>
<td><?php echo remove_junk(ucwords($infor['ratonTeclado']))?></td>
<td><?php echo remove_junk(ucwords($infor['notas']))?></td>
<td>
<select class="form-control" name="usuario" disabled>
<option value="">Usuarios</option>
<?php foreach ($all_users as $users): ?>
<option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
<?php echo remove_junk($users['name']); ?></option>
<?php endforeach; ?>
</select>
</td>
<td class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary btn-view" id="viewID" name="viewID" data-toggle="modal" data-target="#modal-ver" value="<?php echo $infor['id'];?>" title="Ver">
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<a href="edit_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-warning" data-toggle="tooltip" title="Editar">
<i class="glyphicon glyphicon-pencil"></i>
</a>
<a href="#" data-href="delete_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete" title="Eliminar">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</td>
<?php endforeach;?>
</tr>
</tbody>
</table>
</form>
<div class="pull-left">
<a href="export_informatica.php" class="btn btn-danger" target="_blank">Exportar PDF</a>
</div>
<!-- modal -->
<?php foreach($all_informatica as $infor): ?>
<div class="modal fade" id="modal-ver" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Informacion del equipo</h4>
</div>
<div class="modal-body" id="nombre">
<div class="row">
<div class="col-xs-12">
<h2><strong>Host Name portátil : </strong> <?php echo $infor['hostName']; ?> </h2>
<table class="table table-bordered">
<tbody>
<tr>
<th style="background-color: #f4f4f4;">Host Name</th>
<td><?php echo $infor['hostName']; ?></td>
<th style="background-color: #f4f4f4;">Nº de Serie</th>
<td><?php echo $infor['nSerie']; ?></td>
</tr>
<tr>
<th style="background-color: #f4f4f4;">Modelo</th>
<td><?php echo $infor['modelo']; ?></td>
<th style="background-color: #f4f4f4;">Cargador</th>
<td><?php echo $infor['cargador']; ?></td>
</tr>
<tr>
<th style="background-color: #f4f4f4;">Maletín</th>
<td><?php echo $infor['maletin']; ?></td>
<th style="background-color: #f4f4f4;">Docking</th>
<td><?php echo $infor['docking']; ?></td>
</tr>
<tr>
<th style="background-color: #f4f4f4;">Ratón / Teclado</th>
<td><?php echo $infor['ratonTeclado']; ?></td>
<th style="background-color: #f4f4f4;">Observaciones</th>
<td><?php echo $infor['notas']; ?></td>
</tr>
<tr>
<th style="background-color: #f4f4f4;">Usuario</th>
<td>
<select class="form-control" name="usuario">
<option value="">Usuarios</option>
<?php foreach ($all_users as $users): ?>
<option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
<?php echo remove_junk($users['name']); ?>
</option>
<?php endforeach; ?>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre')" ><span class="fa fa-print"> </span>Imprimir</button>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal-default -->
</div>
<?php endforeach; ?>
I have tried different things, but I always have the same result. Same data every time in the Modal.
</details>
# 答案1
**得分**: 0
这是因为您正在循环内生成具有相同 `ID`(`modal-ver`)的多个模态对话框。`ID` 必须是唯一的。
所以您需要在每个 `infor` 项目上附加一个新的 `ID`,以确保唯一性。
<!-- 开始代码片段:js 隐藏: false 控制台: true babel: false -->
<!-- 语言:lang-html -->
<!-- 在循环内删除模态代码 -->
<!-- 模态 -->
<div class="modal fade" id="modal-ver">
<!-- 模态内容在这里 -->
</div>
<!-- 模态结束 -->
<table class="table table-bordered table-hover table-striped" id="mitabla" border="1">
<!-- 表格内容在这里 -->
</table>
<!-- 为每个 infor 项目生成唯一的模态 -->
<?php foreach($all_informatica as $infor): ?>
<div class="modal fade" id="modal-ver-<?php echo $infor['id']; ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Informacion del equipo</h4>
</div>
<div class="modal-body" id="nombre">
<div class="row">
<div class="col-xs-12">
<!-- 模态内容在这里 -->
<h2><strong>Host Name portátil: </strong><?php echo $infor['hostName']; ?></h2>
<table class="table table-bordered">
<tbody>
<!-- 表格内容在这里 -->
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre')">
<span class="fa fa-print"></span> Imprimir
</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- 更新按钮以针对具有唯一 ID 的特定模态 -->
<?php foreach($all_informatica as $infor): ?>
<button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id']; ?>" title="Ver">
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<?php endforeach; ?>
<!-- 结束代码片段 -->
通过使用 `-<?php echo $infor['id']; ?>` 作为 `data-target` 属性,按钮将与该特定模态关联,该模态属于特定的 `infor` 项目。
<details>
<summary>英文:</summary>
That's because you are generating multiple modal dialogs with the same `ID` (`modal-ver`) inside your loop. `ID` must be unique.
So you need to append a new `ID` on each `infor` item every interaction.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!-- Remove the modal code inside the loop -->
<!-- modal -->
<div class="modal fade" id="modal-ver">
<!-- Modal content here -->
</div>
<!-- End of modal -->
<table class="table table-bordered table-hover table-striped" id="mitabla" border="1">
<!-- Table content here -->
</table>
<!-- Generate a unique modal for each infor item -->
<?php foreach($all_informatica as $infor): ?>
<div class="modal fade" id="modal-ver-<?php echo $infor['id']; ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Informacion del equipo</h4>
</div>
<div class="modal-body" id="nombre">
<div class="row">
<div class="col-xs-12">
<!-- Modal content here -->
<h2><strong>Host Name portátil : </strong><?php echo $infor['hostName']; ?></h2>
<table class="table table-bordered">
<tbody>
<!-- Table content here -->
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre')">
<span class="fa fa-print"></span> Imprimir
</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- Update the button to target the specific modal using the unique ID -->
<?php foreach($all_informatica as $infor): ?>
<button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id']; ?>" title="Ver">
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<?php endforeach; ?>
<!-- end snippet -->
With this each modal will have a unique `ID` based of the `infor` item. Every times the loops runs the `ID` will be different form the previous.
Then you need to update the button. So that you are trigger the right item with help of the `ID`.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id']; ?>" title="Ver">
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<!-- end snippet -->
With `-<?php echo $infor['id']; ?>` to the `data-target` attribute the button will associate with that specific modal with that `infor` item.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论