javascript - 在动态 ID 的 Bootstrap 4 模式中选择不填充
问题描述
我现在在哪里
我有一个 HTML 表,其中许多行由 SQL 语句中的 PHP foreach 循环填充。表格的最后一列包含一个下拉按钮列表,其中之一是“分配车辆”。此按钮触发带有选择框的 bootstrap-4 模式。该表是车辆列表,模态中的选择框是员工列表。
我想要发生的事情
用户点击表格中的“分配车辆”。弹出模式允许用户选择要分配的员工。然后将 vehicle_id 和 employee_id 传输到另一个页面进行处理。
编码
<table id="example23" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%" data-order='[[ 3, "asc" ]]' data-page-length='25'>
<thead>
<tr>
<th class="text-center">Year</th>
<th class="text-center">Make</th>
<th class="text-center">Model</th>
<th class="text-center">Unit #</th>
<th class="text-center">Asset #</th>
<th class="text-center">Assignee</th>
<th class="text-center">Admin</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center">Year</th>
<th class="text-center">Make</th>
<th class="text-center">Model</th>
<th class="text-center">Unit #</th>
<th class="text-center">Asset #</th>
<th class="text-center">Assignee</th>
<th class="text-center">Admin</th>
</tr>
</tfoot>
<tbody>
<?php
$a = 0;
$u = 0;
foreach ($vehicle->fetchAll() as $row){
$a++;
$u++;
?>
<tr>
<td style="text-align: center; vertical-align: middle;"><?php echo $row['Veh_Year']; ?></td>
<td style="text-align: center; vertical-align: middle;"><?php echo $row['Vehicle_Make_Make']; ?></td>
<td style="text-align: center; vertical-align: middle;"><?php echo $row['Vehicle_Model_Model']; ?></td>
<td style="text-align: center; vertical-align: middle;"><?php echo $row['Veh_Unit_No']; ?></td>
<td style="text-align: center; vertical-align: middle;"><?php echo $row['Veh_Asset_No']; ?></td>
<!--Creates Unassigned Tag for Vehicle if Database doesn't return a value for Assignee First Name -->
<?php if (!empty($row['First_Name'])) { ?>
<td style="text-align: center; vertical-align: middle;"><a href="#"><?php echo $row['First_Name']; echo ' ' . $row['Last_Name']; ?></a></td>
<?php } else { ?>
<td style="text-align: center; vertical-align: middle;"><strong>Unassigned</strong></td>
<?php } ?>
<td style="text-align: center;">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin Action
</button>
<div class="dropdown-menu">
<?php if (!empty($row['First_Name'])) { ?>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#Unassign_<?php echo $u; ?>">Unassign Vehicle</a>
<?php } else { ?>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#Assign_<?php echo $a; ?>">Assign Vehicle</a>
<?php } ?>
<a class="dropdown-item" href="https://mailmelater.com/modify-vehicle.php?vehid=<?php echo $row['Veh_ID']; ?>">Modify Vehicle</a>
<a class="dropdown-item" href="https://mailmelater.com/retire-vehicle.php?vehid=<?php echo $row['Veh_ID']; ?>">Retire Vehicle</a>
</div>
</td>
</tr>
<div class="modal fade" id="Unassign_<?php echo $u; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Unassign Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you certain that you would like to unassign the
<span class="font-weight-bold"><?php echo $row['Vehicle_Make_Make']; echo ' ' . $row['Vehicle_Model_Model']; ?></span>
from
<span class="font-weight-bold"><?php echo $row['First_Name']; echo ' ' . $row['Last_Name']; ?></span>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect waves-light" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-info waves-effect waves-light">
<a class="text-white" href="https://mailmelater.com/includes/functions/fn-unassign-vehicle.php?vehid=<?php echo $row['Veh_ID']; ?>">Confirm</a>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Assign_<?php echo $a; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Assign Vehicle to User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<select name="check" class="select2 form-control custom-select" style="width: 100%;">
<?php foreach ($assign->fetchall() as $assignrow) { ?>
<option value="<?php echo $assignrow['Emp_ID']; ?>">
<?php echo $assignrow['First_Name']; echo ' ' . $assignrow['Last_Name']; ?>
</option>
<?php } $assign->closeCursor(); ?>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect waves-light" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-info waves-effect waves-light">
<a class="text-white" href="https://mailmelater.com/includes/functions/fn-assign-vehicle.php?vehid=<?php echo $row['Veh_ID']; ?>">Confirm</a>
</button>
</div>
</div>
</div>
</div>
<?php } $vehicle->closeCursor(); ?>
</tbody>
</table>
问题
您会从代码中注意到“分配”模式 ID 是动态分配的。我觉得这似乎是必要的,以便将相应行的车辆 ID 传递给模态。不幸的是,只要动态分配模态 ID,此解决方案仅适用于第一条记录(或当 Veh_ID = 1 时),对于任何其他行,模态显示与选择框但没有结果,选择盒子是空的。
即使使用动态分配的 ID,“取消分配”模式也可以正常工作。从我的角度来看,这似乎只是选择框的问题,尽管我充其量只是一个新手编码器。
例子
在上面链接的页面上,对于表格中的任何行,如果您将鼠标悬停在“修改车辆”上,您可以在地址栏中看到 ID。在没有 vehicle_id = 1 的任何车辆上单击“分配车辆”将导致模式中的选择框为空。根据需要随意分配或取消分配。
解决方案
查看示例页面的源代码,我看到您的模式等都已正确创建,唯一的问题是选择中的员工列表仅第一次出现。所以,看看它是如何产生的 - $assign
。这就是问题所在。
fetchAll() 返回一个包含结果集中所有剩余行的数组
注意剩余。在第一个表行中的第一次完整迭代之后,您已经检索了所有结果。没有什么可取的了。所以在下一次迭代中没有剩余的结果要获取,你得到一个空的<select>
.
如果您想再次从同一查询中获取所有内容,则需要重新execute()
执行该语句。
你<select>
的每一行都是一样的。因此,与其重复检索结果,不如在主$vehicle
表循环之外检索它们一次,然后设置一个$select
变量,然后echo
在每一行上设置一个变量,这样会简单得多。
如果您想在每一行上预先选择合适的员工,以显示当前分配的人员,您可以preg_replace()
在每一行上做一些 ing。
另一个注意事项 - 您还使用:
$assign->closeCursor();
因此,也许您打算使结果集可滚动。 文档描述了如何做到这一点,并确保在到达终点后滚动回集合的开头。尽管 AFAIK 通常仅在您打算仅检索部分结果时才需要此功能,或者在完成第一个查询之前切换到处理不同的查询。您没有做任何这些事情,所以我不确定是否需要使用光标。
请注意,您的问题有一些元素,但它们中的每一个或多或少在 SO 上都有重复。值得通读以下问题的所有答案,因为其中许多都是有帮助的,并突出了问题的不同部分。
推荐阅读
- python - 如何说服鼠标右键单击弹出菜单在wxPython中显示鼠标光标位置附近?
- git - 管道#37652在阶段准备索引中的主控失败
- json - 如何正确地 JSON 编码/解码 Flutter 中的 Duration 字段
- sql - 加入与父母和祖父母的关系
- javascript - 不确定如何在 useEffect 中集成功能
- angular - 有什么方法可以优化 Docker Image 的大小吗?
- c# - 从 UWP 应用程序重新启动 Windows 平板电脑?
- html - 如何使按钮固定位置
- java - 计算特定用户 jda 的消息数
- gcc - `cmse_check_address_range` 通过编译器升级改变行为