2010-10-07 84 views
0

我想在运行删除功能之前显示一个简单的确认对话框显示。删除前确认(jQuery)

这里是我迄今为止

HTML:

<!-- Delete Confirmation Dialog Box --> 

<div id="confirm" style="display:none;"> 
<div class="message">Are you sure you want to delete?</div> 
    <div class="buttons"> 
     <div class="cancel">No</div><div class="accept">Yes</div> 
    </div> 
</div> 

<!-- Delete Button/s --> 

<a href="javascript:void(0);" onclick="delete("1")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> 
<a href="javascript:void(0);" onclick="delete("2")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> 

...etc... 

的jQuery:

function delete(id) { 

    fileName= 'update_db.php'; 

    $('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait"); 
    $.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);}); 

} 

有人能帮助我修改我的代码以显示对话框,确认删除??谢谢!!!

+0

请问你目前的解决方案不起作用有一个错误是,它只是没有显示出来 – zigdon 2010-10-07 22:25:07

+0

你可能想改变你的按钮'onclick'属性被正确引用 - ?'的onclick = “删除( '1')”' – 2010-10-07 22:37:08

回答

0

让你的链接调用一个函数来显示模态。将该ID保存在.data()中。然后连线取消并接受按钮上的方法。

另外,你应该考虑少突兀的JavaScript。因此,不应将onclick属性添加到链接,而应使用jquery绑定click事件。 (如 - ?$('a').click(function(){//foo});

<div id="confirm" style="display:none;"> 
<div class="message">Are you sure you want to delete?</div> 
    <div class="buttons"> 
     <div class="cancel">No</div><div class="accept">Yes</div> 
    </div> 
</div> 

<!-- Delete Button/s --> 

<a href="javascript:void(0);" onclick="showConfirm('1')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> 
<a href="javascript:void(0);" onclick="showConfirm('2')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> 

<script type="text/javascript"> 
$(function(){ 

    $('#confirm .accept').click(function(){ 
     delete($("#confirm").data('deleteId')); 
     $("#confirm").hide(); 
    }); 
    $('#confirm .cancel').click(function(){ 
     $("#confirm").data('deleteId','').hide(); 
    }); 

}); 

function showConfirm(id) { 
    $('#confirm').data('deleteId', id).show(); 
} 

function delete(id) { 

    fileName= 'update_db.php'; 

    $('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait"); 
    $.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);}); 

} 
</script>