如果用户用户使用引导对话框进行确认,请重定向到相应的链接
Redirect to the respective links if user user confirms it with a bootstrap dialog box
首先,javascript confirm 不是我在这里寻找的。 请完整阅读。即在每个链接上放置一个onClick attr,并传递一个通过提醒正常系统对话框来确认用户的功能,这不是我想要的。
我使用了引导程序的对话框,而不是系统提供的常规对话框。
以下是不同项目的几个删除按钮
<a href="www.mysite.com/product/1" data-target="#myModal" data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/2" data-target="#myModal" data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/3" data-target="#myModal" data-toggle="modal"><i class="icon-remove"></i> Delete</a>
下面是使用引导程序显示模式的标记。
<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Confirm Delete ?</h3>
</div>
<div class="modal-body">
<p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-danger" data-dismiss="modal">Delete</button>
</div>
</div>
对话框显示正确,但是在按下对话框中的删除按钮后,我无法重定向到与上述链接相对应的页面,模式只是消失而不重定向。
只需将类remove-item
添加到您的链接中,并将此脚本添加到您的页面即可。不错,干净。
<script>
$(function () {
$('a.remove-item').click(function () {
var url = this.href;
$('#myModal .btn-danger').click(function () {
window.location.href = url;
});
});
});
</script>
在引导标记中添加数据属性并将 ajax 请求发送到服务器,因此无需动态刷新页面即可删除项目。
<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Confirm Delete ?</h3>
</div>
<div class="modal-body">
<p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
<a class="btn btn-danger" data-action="delete-item" data-item="XXX" data-dismiss="modal">Delete</a>
</div>
</div>
现在使用 jquery 或 javascript,您可以向服务器发送请求以执行我指定为 XXX
data-item
的删除操作。
如果您通过像这样的 JavaScript 方法生成数据项,动态添加数据项将很容易 -
function show_dialog_for(item_id)
{
//your code here to generate and show the model
//Bind the ajax method to send the delete request for the item_id
$("a[data-action]").bind( "click", function() {
//Send request for deletion
});
}
现在你必须绑定它,与该链接的点击事件,可以很容易地完成,就像 -
$(".remove-item").bind( "click", function() {
show_dialog_for($this.prop("data-item"));
});
对于以下链接 - 我在其中添加了类属性"删除项"和带有 XXX 的数据项
<a href="www.mysite.com/product/1" class="remove-item" data-item="XXX" data-target="#myModal" data-toggle="modal"><i class="icon-remove"></i> Delete</a>
希望这对您有所帮助。
在这里工作演示
您需要将此 JavaScript 代码添加到您的页面:
$(".delBtn").click(function() {
$("#delConfirmBtn").attr("href", $(this).attr("href"));
$("#delConfirm").modal('toggle');
return false;
});
这是页面链接:
<a href="del_products.html?idproduct=1" class="delBtn btn btn-default">Delete</a>
这是模式链接:
<a href="#" id="delConfirmBtn" class="btn btn-danger">Delete</a>
这是模态代码:
<!-- Modal -->
<div class="modal fade" id="delConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete product</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="#" id="delConfirmBtn" class="btn btn-danger"><i class="icon-trash"></i> Delete</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
您可以在 JSFiddle 上查看您的代码
相关文章:
- 对auth.logout的Facebook事件订阅仅选择性地将用户重定向到url
- 如何通过ajax调用将用户重定向到页面
- Iframe提交并将用户重定向回原始页面,但Iframe似乎仍然存在
- 将用户重定向到 Windows 8 中的桌面浏览器
- 记住所选内容并将用户重定向到已访问的子域
- 重定向“如果确认了电子邮件,则将用户重定向到登录页”
- 如何通过扩展在chrome中单击时将用户重定向到新链接
- 当应用程序没有安装时,如何将用户重定向到(android,ios)市场
- 按下浏览器后退按钮时将用户重定向到其他页面
- 使用javascript基于登录用户重定向URL链接
- 在用户允许 Facebook 应用后,将用户重定向到动态页面
- 将用户重定向到上一页
- 防止 iframe 中的恶意 Flash 广告将用户重定向到顶部位置
- 将用户重定向到存储在变量(Javascript)中的URL
- 如何在 Javascript 警报/会议框之后将用户重定向到新网页
- 如何在会话令牌过期时将用户重定向到登录页面
- 将移动用户重定向到应用程序下载一次
- 如何在express odeJS中从post请求中获取数据,并在提交后将用户重定向到html文件
- 如果未经身份验证,请将用户重定向到登录页
- 在React中,我如何将用户重定向回状态已更改的索引