How to ask for confirmation and use e.PreventDefault on click event

Confirm() is what you are looking for. This is how you use it:

var answer=confirm('Do you want to delete?');

Your HTML would be like:

<a id="delete" href="/Delete" class="prompt-for-delete">Delete</a>

And your javascript:

$('#delete').on('click',function(e){
    e.preventDefault();
    var answer=confirm('Do you want to delete?');
    if(answer){
     alert('Deleted');
    }
    else{
        alert('Not Deleted');      
    }
});

You can see the demo here: http://jsfiddle.net/c9cLW/1/

Edit:

Here is updated redirection and preventing event:

Script:

$('#delete').on('click',function(e){
    var answer=confirm('Do you want to delete?');
    if(answer){
     alert('Deleted');
    }
    else{
     e.preventDefault();      
    }
});

Updated Fiddle: http://jsfiddle.net/c9cLW/5/


I would create a in the page, display a dialog and return the result:

<div id="divConfirmMessageDialog" class="ui-dialog" title="Confirm">
    <p id="confirmMessage"></p>
</div>

confirmDialog: function (message) {
    "use strict";
    var def = $.Deferred();
    $("#divConfirmMessageDialog").dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: false,
        buttons: {
            Yes: function () {
                $(this).dialog("close");
                def.resolve();
            },
            No: function () {
                $(this).dialog("close");
                def.reject();
            }
        }
    });
    $("#confirmMessage").text(message);
    $("#divConfirmMessageDialog").dialog('open');
    return def.promise();
}

function remove() {
        confirmDialog('Items will be removed...Continue?').done(function () {
            return true;
        }).fail(function () {
            return false;
        });

    }

Tags:

Html

Jquery