如何使用jQuery UI对话框确认数据库行删除? [英] How to confirm a db row deletion with jQuery UI dialog?
问题描述
我使用此jQuery UI进行注销的确认对话框:
I use this jQuery UI for confirmation dialog for logout:
$(function() {
$("#opener").click(function() {
$("#dialog").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Logout": function()
{
location = "logout.php";
},
Cancel: function()
{
$(this).dialog( "close" );
}
}
});
});
});
<img src="cross.png" border="0" alt="Logout" id="opener" />
<div id="dialog" title="Logout">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
logout?
</p></div>
它工作正常,但是:
我有一张表,所有行都来自数据库.每行都有一个链接到?action=delete&id=x
的十字图标
X是数据库中的行ID.
用从数据库中获取的foreach()
数据创建表时,我在每行的一列中有此信息以确认行删除:
I have a table that all rows come from database. Each row has a cross icon linked to ?action=delete&id=x
X is the row id in database.
when creating a table with foreach()
data fetched from db, I have this in a column of each row to confirm row deletion:
<a href="<?=$_SERVER['PHP_SELF']?>?action=delete&id=<?=$user['id']?>" onclick="return confirm('Are you sure you want to delete?')">
<img src="cross.png" width="16" height="16" alt= "Delete" border="0" />
</a>
我想使用jQuery对话框进行迁移.确认后,如何使用blah.php?action = delete& id = 94
I want to migrate with jQuery dialog. After confirm, how to set location with something like blah.php?action=delete&id=94
94是数据库中该行的ID.在上面的示例中,仅重定向到logout.php很容易,但是: 1)如何传递$ user ['id']的值将其附加到位置url? 2)就像在foreach()中那样,如何一次又一次地避免使用相同的jQuery UI函数?
94 is id of the row in database. In sample above redirecting to just logout.php is easy, but: 1) How to pass the value of $user['id'] to append it to the location url? 2) As this is in foreach() how to avoid the same jQuery UI function again and again?
推荐答案
以下是我建议的一个基本示例.
Here is what I would advise, using a basic example.
我的工作示例: https://jsfiddle.net/Twisty/mafnxaxq/
HTML
<div class="header">
<img src="cross.png" border="0" alt="Logout" id="opener" />
</div>
<div class="content">
<table>
<thead>
<tr>
<th>Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data Row 1</td>
<td class="actions">
<span data-id="1" class="ui-icon ui-icon-minus remove" title="Delete"></span>
</td>
</tr>
<tr>
<td>Table Data Row 2</td>
<td class="actions">
<span data-id="2" class="ui-icon ui-icon-minus remove" title="Delete"></span>
</td>
</tr>
<tr>
<td>Table Data Row 3</td>
<td class="actions">
<span data-id="3" class="ui-icon ui-icon-minus remove" title="Delete"></span>
</td>
</tr>
<tr>
<td>Table Data Row 4</td>
<td class="actions">
<span data-id="4" class="ui-icon ui-icon-minus remove" title="Delete"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="dialog">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span> Are you sure?
</p>
</div>
jQuery
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
height: "auto",
width: 400,
modal: true
});
$("#opener").click(function() {
$("#dialog").dialog("option", "buttons", [{
text: "Logout",
click: function() {
location = "logout.php";
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog").dialog("option", "title", "Logout");
$("#dialog").dialog("open");
});
$(".remove").click(function() {
var rowId = parseInt($(this).data("id"));
$("#dialog").dialog("option", "buttons", [{
text: "Delete",
click: function() {
window.location.href = "<?=$_SERVER['PHP_SELF']?>?action=delete&id=" + rowId;
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog").dialog("option", "title", "Confirm Delete");
$("#dialog").dialog("open");
});
});
在这里您可以看到我们如何将同一个对话框用于多个操作.单击特定按钮时,我们可以更改结果按钮,标题和功能.
Here you can see how we use the same Dialog for multiple actions. When we click a specific button, we can change the resulting buttons, title, and functions.
这篇关于如何使用jQuery UI对话框确认数据库行删除?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!