Reputation: 57

Confirmation dialog in jquery

How can I put the confirmation dialog box to notify the user if is sure to delete the selected data in jquery . I want the user to be asked if he wants to delete or not . The code below works perfectly but I want it to be with that functionality .

<script type="text/javascript">
$(document).ready(function () {
    $('a.delete').click(function (e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.attr('id').replace('record-', ''),
            beforeSend: function () {
                parent.animate({
                    backgroundColor: '#fbc7c7'
                }, 300)
            },
            success: function () {
                parent.slideUp(300, function () {
                    parent.remove();
                });
            }
        });
    });
});
</script>

Upvotes: 0

Answers (5)

Devang Rathod

Reputation: 6736

You can use confirm dialog box , whenever user will click delete link , it will ask Do you really want to delete ? if ans is ok then return true.

Code is something like this.

<script type="text/javascript">
$(document).ready(function(){
$('a.delete').click(function(e){
    e.preventDefault();
    var parent = $(this).parent();

    var check = confirm("Do you want to delete ?");
    if(check == true)
    {
        $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
            beforeSend: function(){
                parent.animate({backgroundColor:'#fbc7c7'},300)
            },
            success: function(){
                parent.slideUp(300,function(){
                parent.remove();
            });
            }
        });
    }
});
});
</script>

Upvotes: 0

Suresh Atta

Reputation: 121998

$('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                // Do ajax request $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });

Upvotes: 1

Edwin Alex

Reputation: 5108

<script type="text/javascript">
$(document).ready(function(){
$('a.delete').click(function(e){
e.preventDefault();
if(confirm("do you want to delete this record ?")){
  var parent = $(this).parent();
  $.ajax({
    type: 'POST',
    url: 'delete.php',
    data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
    beforeSend: function(){
    parent.animate({backgroundColor:'#fbc7c7'},300)
  },
  success: function(){
    parent.slideUp(300,function(){
       parent.remove();
    });
  }
  });
} 
});
});
</script>

Upvotes: 1