[英]How to pass parameters to a modal
我正在尝试创建一个模态,询问用户是否愿意从表中删除记录。 如果他们同意,则选择“删除用户”按钮,然后从数据库中删除记录。 我试图将'id'的值从表传递给模式,但不起作用。 当用户单击删除时,应将“ id”传递给模式,然后当用户确认时,应删除记录。 我该如何实现。 这是我的代码片段。
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach ($data as $datas)
<tr>
<td>{{ $datas->name }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
<a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
删除用户模态
<div class="modal fade" id="delete-modal">
<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" align="center"><b>Delete User</b></h4>
</div>
<div class="modal-body">
<h4 align="center">Are you sure you want to delete this user?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete User</button>
</div>
</div>
</div>
</div>
从更改锚标签
<a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash" title="Delete"></i>
</a>
至
<a href="#" data-href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash" title="Delete"></i>
</a>
接下来,在模态中,添加一个form
,或将“提交”按钮包含在form
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<form id="deleteResource" method="post">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger">Delete User</button>
</form>
</div>
在显示模态时,您可以使用event.relatedTarget
$('#delete-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var href = button.data('href'); // Extract info from data-* attributes
$("#deleteResource").attr('action', href);
});
首先将用户ID添加到该行中,以便可以通过脚本进行抓取:
<div class="btn-group">
<a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
<a href="#" class="delete-btn" id="{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
</div>
// add a hidden form to the modal
<form id="delete-user-form" method="post" action="">
{{ csrf_field() }}
{{ method_field('delete') }}
</form>
// add a script to grab the user's id from the row clicked, set
// the form's action and another event listener for the confirm delete click
<script>
document.querySelector('.delete-btn').forEach(el => {
var userId = el.id
el.addEventListener('click', e => {
var form = document.getElementById('delete-user-form')
form.setAttribute('action', '/users/' + userId)
var btn = document.querySelector('.modal-footer .btn-danger')[0]
var listener = () => { form.submit(); btn.removeEventListener(listener) }
btn.addEventListener('click', listener)
})
</script>
在数据字段中设置ID:
<a href="/delete/{{ $datas->id }}" data-toggle="modal" class=".delete" data-id="{{ $datas->id }}" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
在js中打开模式并在该模式字段中设置ID:
$(document).on("click", ".delete", function () {
var delid = $(this).data('id');
$('#deleteThis').data('deleteThis', delid); //setter
$('#delete-modal').modal('show');
});
更改按钮ID以删除ID :
<button type="button" id="deleteThis" class="btn btn-danger">Delete User</button>
在单击删除按钮时,通过ajax调用路由以删除该用户:
$(document).on("click", "#deleteThis", function(){
var id = $(this).data("deleteThis");
loaderShow();
$.ajax(
{
url: "delete/"+id,
type: 'POST',
data: {
"id": id,
"_method": 'DELETE',
},
success: function (data)
{
$('#delete-modal').modal('hide');
},
error: function(data) {
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.