[英]Bootstrap Modal Confirmation
我有一個表格,每行顯示用戶詳細信息,以及一個啟動 Bootstrap 模式確認對話框的刪除按鈕。
我的目標是讓確認按鈕觸發一個事件,該事件將刪除該特定用戶。
我如何將表行中的 jsmith22 傳遞到我的 Javascript 函數中?
表格
<tr>
<td>jsmith22</td>
<td>John Smith</td>
<td>555-555-5555</td>
<td>test@gmail.com</td>
<td><button type="button" class="btn btn-default btn-lg btn-block roster-button active" data-toggle="modal" data-target="#removeUser">Remove</button></td>
</tr>
模態對話框
<div aria-labelledby="myModalLabel" class="modal fade" id="removeUser"
role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Remove Employee</h4>
</div>
<div class="modal-body">
<p>Are you sure you wish to remove this user?</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-danger" id="remove-button" type="submit">Remove</button>
</div>
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end modal -->
Javascript
// Remove button event trigger
$('#remove-button').click(function() {
$.post('/API/removeUser', {} );
});
可以使用Bootstrap Modal 事件偵聽器來完成
將數據屬性data-id
添加到模態觸發按鈕
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
將 input type="hidden"
添加到模態,並在顯示時將id
值傳遞給模態隱藏輸入
隱藏輸入
<input type="hidden" id="RowId" value="">
模態事件show
腳本
$(document).ready(function(){
$('#removeUser').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
$('#RowId').val(id);
});
});
現在有click
事件
$('#remove-button').click(function() {
var delid = $('#RowId').val();
//Do what ever you like to do
$.post('/API/removeUser', {} );
});
替代解決方案
您可以跳過hidden
的輸入並創建一個全局變量
具有數據屬性data-id
的模態觸發按鈕到模態觸發按鈕
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
模態事件,帶有全局變量腳本的點擊功能
$(document).ready(function() {
var delid = ''; //global variable
$('#removeUser').on('show.bs.modal', function(e) {
delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable
alert(delid);
});
$('#remove-button').click(function() {
alert(delid); //Use the global variable here to del the record
//Do what ever you like to do
//$.post('/API/removeUser', {} );
});
});
您可以通過以下方式獲取按鈕行的第一個td
的內容:
var person = $(this).closest('tr').find('td').eq(0).html()
小提琴: https ://jsfiddle.net/7j4bmgbv/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.