根据模态点击显示数据
Posted
技术标签:
【中文标题】根据模态点击显示数据【英文标题】：Show data based on modal click 【发布时间】：2021-12-30 18:06:09 【问题描述】：我制作了一个while循环以将数据显示为表格格式，我准备了<a>，点击它会打开一个模式。
我希望每个模态在单击时都有关于该特定数据的更多信息。
我是这样准备的：
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
$selectquery = "SELECT * FROM cases_reports";
$query = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($query);
while($res = mysqli_fetch_array($query))
?>
<tr>
<td class="name mb-0 text-sm"> <?php echo $res['cccEmployee']?> </td>
<td> <?php echo $res['irNumber']?> </td>
<td> <a href="#" data-toggle="modal" data-target="#modal-default"><?php echo $res['caseType']?></a> </td>
<td> <?php echo $res['startDateTime']?> </td>
<td> <?php echo $res['endDateTime']?> </td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"> <?php echo $res['caseType']?> </h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
echo $res['caseType'];
?>
</div>
</div>
<?php ?> <!-- End php While -->
当然，模态显示第一个可用数据，在这种情况下是“意外”。单击模态URL时如何显示每个数据的信息？
【问题讨论】：
【参考方案1】：只需从 js 以编程方式调用您的模态，并在显示模态之前加载/替换其相应数据。
<a href="#" id="modalLuncher"><?php echo $res['caseType']?></a>
在你的 js 文件中：
$(document).ready(function()
$("#modalLuncher").click(function()
$("#modal-title-default").html('read from #modalLuncher data-* tag');
// $("#other-replacements") ;
$("#modal-default").modal();
);
);
【讨论】：
谢谢！它正在显示数据，但只有表格的第一个链接打开了一个模式，其余的不会 因此将 .modalLuncher 类赋予您想要打开 modal 的任何链接，将 $("#modalLuncher").click( ... ) 更改为 $(".modalLuncher").click( .. .) 并从一个特定标签读取/加载/替换模态数据。 好的，模态显示在所有标签中，但是....模态显示第一个数据的信息 在打开模态之前替换模态数据。我在给你的答案中举了一个例子。在该示例中，您将根据单击的行更改模态标题。 对不起...我尝试了不同的方法但无法弄清楚:(【参考方案2】：我想显示模态，以便我可以通过 Ajax 编辑表格。
我做了什么：
脚本：
$(document).ready(function()
// Append values in input fields
$(document).on('click', 'a[data-role=update]', function()
var id = $(this).data('id');
var cccEmployee = $("#"+id).children('td[data-target=cccEmployee]').text();
var irNumber = $("#"+id).children('td[data-target=irNumber]').text();
var caseType = $("#"+id).children('td[data-target=caseType]').text();
var startDateTime = $("#"+id).children('td[data-target=startDateTime]').text();
var endDateTime = $("#"+id).children('td[data-target=endDateTime]').text();
//Append the variables
$('#cccEmployee').val(cccEmployee);
$('#IR_number').val(irNumber);
$('#case_type').val(caseType);
$('#startDate').val(startDateTime);
$('#endDate').val(endDateTime);
$('#caseId').val(id);
$('#reportsModal').modal('toggle');
);
//Create event to get data from fields and update.
$('#save_report_changes').click(function()
var id = $('#caseId').val();
var cccEmployee = $('#cccEmployee').val();
var irNumber= $('#IR_number').val();
var caseType = $('#case_type').val();
var startDateTime = $('#startDate').val();
var endDateTime = $('#endDate').val();
$.ajax(
url: '/edit-report',
method: 'post',
data:
id: id,
cccEmployee: cccEmployee,
irNumber: irNumber,
caseType: caseType,
startDateTime: startDateTime,
endDateTime: endDateTime
,
success: function(response)
$("#"+id).children('td[data-target=cccEmployee]').text(cccEmployee);
$("#"+id).children('td[data-target=irNumber]').text(irNumber);
$("#"+id).children('td[data-target=caseType]').text(caseType);
$("#"+id).children('td[data-target=startDateTime]').text(startDateTime);
$("#"+id).children('td[data-target=endDateTime]').text(endDateTime);
$('#reportsModal').modal('toggle');
,
);
);
);
然后在php中创建了一个while循环来显示数据+将编辑按钮链接到ajax：
<!-- Start PHP While -->
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
if( isset($_POST['id']) )
$id = $_POST['id'];
$ccc_employee = $_POST['cccEmployee'];
$IR_number = $_POST['irNumber'];
$case_type = $_POST['caseType'];
$caseLocation = $_POST['caseLocation'];
$startDate = $_POST['startDateTime'];
$endDate = $_POST['endDateTime'];
$case_description = $_POST['caseDesc'];
$action_taken = $_POST['actionsTaken'];
$details = $_POST['caseDetails'];
$notes = $_POST['caseNotes'];
$recommendation = $_POST['caseRecommendation'];
// Query to update data
$result = mysqli_query($mysqli, "UPDATE cases_reports SET
cccEmployee='$ccc_employee',
irNumber='$IR_number',
caseType='$case_type',
caseLocation='$caseLocation',
startDateTime='$startDate',
endDateTime='$endDate',
caseDesc='$case_description',
actionsTaken='$action_taken',
caseDetails='$details',
caseNotes='$notes',
caseRecommendation='$recommendation'
WHERE id='$id'");
if( $result )
return "Data updated successfully";
$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($table);
while($res = mysqli_fetch_array($table))
?>
<tr id="<?php echo $res['id']?>">
<td data-target="cccEmployee"> <?php echo $res['cccEmployee']?> </td>
<td data-target="irNumber"> <?php echo $res['irNumber']?> </td>
<td data-target="caseType"> <?php echo $res['caseType']?> </td>
<td data-target="startDateTime"> <?php echo $res['startDateTime']?> </td>
<td data-target="endtDateTime"> <?php echo $res['endDateTime']?> </td>
<td class="table-actions">
<a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
<i class="fas fa-edit"></i>
</a>
<!-- <a href="#!" class="table-action table-action-delete" data-toggle="tooltip" data-original-title="Delete product">
<i class="fas fa-trash"></i>
</a> -->
</td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<div class="modal fade" id="reportsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"> Case Details </h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="case-data">
<div class="form-row">
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="cccEmployee">CCC Employee</label>
<input type="text" class="form-control" id="cccEmployee" name="cccEmployee">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="IR_number">IR Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="IR_number">IR#</span>
</div>
<input type="number" class="form-control" name="IR_number" id="IR_number">
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_type">Case Type</label>
<select class="form-control" name="case_type" id="case_type" data-toggle="select">
<option value="" disabled selected>Select Case Type</option>
<option value="Accident">Accident</option>
<option value="Theft">Theft</option>
<option value="Death">Death</option>
<option value="Harrasment">Harrasment</option>
<option value="badBehaviour">Bad Behaviour</option>
<option value="Drugs">Drugs</option>
<option value="Drunk">Drunk</option>
<option value="Fight">Fight</option>
<option value="Medical">Medical</option>
<option value="illegalEntry">Illegal Entry</option>
<option value="illegalWorker">Illegal Worker</option>
<option value="Fire">Fire</option>
<option value="Electric">Electric</option>
<option value="illegalHunting">Illegal Hunting</option>
<option value="oilLeak">Oil Leak</option>
<option value="petrolLeak">Petrol Leak</option>
<option value="Kidnapping">Kidnapping</option>
<option value="Blackmail">Blackmail</option>
<option value="Misunderstanding">Misunderstanding</option>
<option value="propertyDamage">Property Damage</option>
<option value="smoke_NoFire">Smoke, No Fire</option>
<option value="stuck_InElevator">Stuck in Elevator</option>
<option value="Scooter">Scooter</option>
<option value="Drifting">Drifting</option>
<option value="LostPerson">Lost Person</option>
<option value="Fraud_Forgery">Fraud/Forgery</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="caseLocation">Location</label>
<select class="form-control" name="caseLocation" id="caseLocation" data-toggle="select">
<option value="" disabled selected>Select Location</option>
<option value="Baylasun">Baylasun</option>
<option value="Baylasun Hotel">Baylasun Hotel</option>
<option value="AL-Waha">AL-Waha</option>
<option value="Al-Morooj">Al-Morooj</option>
<option value="Royal Green">Royal Green</option>
<option value="Beach Towers">Beach Towers</option>
<option value="Emmar Building">Emmar Building</option>
<option value="Industrial Area (East)">Industrial Area (East)</option>
<option value="Industrial Area (West)">Industrial Area (West)</option>
<option value="Hejaz Gate">Hejaz Gate</option>
<option value="Gate 3">Gate 3</option>
<option value="Marina 1">Marina 1</option>
<option value="Marina 2">Marina 2</option>
<option value="Marina 3">Marina 3</option>
<option value="Tala Garden">Tala Garden</option>
<option value="AL-Shorooq">AL-Shorooq</option>
<option value="Yam Beach">Yam Beach</option>
<option value="Sales Center">Sales Center</option>
</select>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="startDate">Start Date & Time</label>
<input class="form-control" type="datetime-local" name="startDate" id="startDate">
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label class="form-control-label" for="endDate">End Date & Time</label>
<input class="form-control" type="datetime-local" name="endDate" id="endDate">
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="case_description">Case Description</label>
<textarea class="form-control" name="case_description" id="case_description" rows="3"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="action_taken">Actions Taken</label>
<textarea class="form-control" name="action_taken" id="action_taken"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="details">Details</label>
<textarea class="form-control" name="details" id="details"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="form-control-label" for="recommendation">Recommendations</label>
<textarea name="recommendation" id="recommendation" class="form-control"></textarea>
</div>
</div>
<input type="hidden" id="caseId" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<button type="button" id="save_report_changes" class="btn btn-primary">Save changes</button>
</div>
<?php //End php While
【讨论】：
以上是关于根据模态点击显示数据的主要内容，如果未能解决你的问题，请参考以下文章
Qt如何使用模态(exec())实现等待效果，并同时进行其他操作？（先显示等待，再进行其他操作！）