Bootstrap 模态确认删除
[英] Bootstrap modal confirmation delete
本文介绍了Bootstrap 模态确认删除的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我正在尝试使用模式删除确认从我的表中删除记录/行.这是我迄今为止尝试过的:
<table class="table table-bordered"><?php$stmt2 = $conn->prepare( "SELECT project_code, description从 tblprojects" );$stmt2->execute();for($i=0; $row2 = $stmt2->fetch(); $i++){$project = $row2['project_code'];$desc = $row2['description'];?><tr><td><a href="project-detail.php?code=<?php echo $project; ?>"><?php echo $project;?></a></td><td><?php echo $desc;?></td><td><a href="update-project.php?code=<?php echo $project; ?>"标题="更新记录"><i class="icon-edit icon-white"></i></a></td><td><a href="#<?php echo $project; ?>"id="<?php echo $project; ?>"data-id="<?php echo $project; ?>"class="btn-show-modal" data-toggle="modal" title="删除记录"><i class="icon-trash icon-white"></i></a></td><div class="modal hidefade" id="dialog-example"><div class="modal-header"><h5>确认删除</h5>
<div class="modal-body"><p class="modaltext">您确定要删除此记录吗?</p>
<div class="modal-footer"><a href="#" data-dismiss="modal" class="btn btn-info">否<a><a href="delete-project.php?code=<?php echo $project; ?>"class="btn btn-danger" id="btn-delete">是
</tr><?php}?>
但问题是，当我要删除最后一行时，被删除的是第一行.为什么会这样?有任何想法吗?非常感谢帮助.谢谢.
解决方案
问题出在模态生成和$project值的传递上.
您正在使用循环作为
for($i=0; $row2 = $stmt2->fetch(); $i++){$project = $row2['project_code'];$desc = $row2['description'];?>
在上面的循环中，你正在生成模态，所以基本上你会有很多模态，它们等于查询中的行数.
现在它们都具有相同的id"，即dialog-example"，一旦你点击删除，它就会从 DOM 中弹出第一个模态并删除错误的数据.
解决方案对于每个模态，您将 id 指定为
<div class="modal hidefade" id="dialog-example_<?php echo $project; ?>">
然后在吹码
$(".btn-show-modal").click(function(e){e.preventDefault();$("#dialog-example").modal('show');});
使用 attr("id") 获取元素的 id 并将其附加到
"dialog-example_"+{你收到的id}
您也需要为隐藏模式做同样的事情.
更新方法
将模态 div id 指定为
<div class="modal hidefade" id="dialog-example_<?php echo $project; ?>">
然后在点击函数中改为
$(".btn-show-modal").click(function(e){e.preventDefault();var id = $(this).attr('id');var modal_id = "dialog-example_"+id;$("#"+modal_id).modal('show');});
改变
<a href="delete-project.php?code=<?php echo $project; ?>"class="btn btn-danger" id="btn-delete">是
到
<a href="delete-project.php?code=<?php echo $project; ?>"class="btn btn-danger" id="<?php echo $project ;?>">Yes<a>
最后
$("#btn-delete").click(function(e) {$("#dialog-example").modal('hide');});
到
$(".btn btn-danger").click(function(e) {var id = $(this).attr('id');var modal_id = "dialog-example_"+id;$("#"+modal_id).modal('隐藏');});
Hello guys I'm trying to delete a record/row from my table using a modal delete confirmation. This is what I've tried so far:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<table class="table table-bordered">
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr>
<td><a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a></td>
<td><?php echo $desc; ?></td>
<td><a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white">
</i>
</a></td>
<td><a href="#<?php echo $project; ?>"
id="<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i></a></td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
But the problem is, when I am about to delete the last row the one that gets deleted is the first row. Why is it like that? Any ideas? Help is much appreciated. Thanks.
解决方案
The problem lies in the modal generation and passing the $project value.
You are using a loop as
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
And inside the above loop you are generating the modals so basically you will have many modals which are equal to the num of rows in the query.
Now all of them are having the same "id" i.e. "dialog-example" and once you click on the delete it pop ups the first modal from the DOM and is deleting wrong data.
Solution
For each modal you give the id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the blow code
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
Get the id of the element using attr("id") and append this at the end of
"dialog-example_"+{id you received}
The same thing you need to do for the hide modal as well.
UPDATE ON HOW TO DO IT
Give the modal div id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the click function to as
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
Change
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
to
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="<?php echo $project ;?>">Yes<a>
AND finally
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
to
$(".btn btn-danger").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('hide');
});
这篇关于Bootstrap 模态确认删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
