How to handle click event in jquery for a button?

Question

I have a grid view in which I have a button feild for deleting that particular row in the grid view, using the GridView_RowDeleting() event.

So when that particular row gets renders it's such

<input type="button" value="Delete" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolderBodyMasterPage$grdvwUsers','Delete$0')" class="delete" />

The delete functionality works fine.

But I want to show a confirmation message on this button click whether to delete the user or not. For that I have added query code for that to display the confirmation message, but thats not working , don't know why,

            $(".delete").click(function(e) {
              // code for displaying the confirmation dialog
            });

Please help me out, thanks !

Answer 1

Haven´t tested it but try it out

$(".delete").click(function() {
  return confirm('Are you sure?');
});

...it should work ;)

Answer 2

The problem is that the postback is executed prior to the click handler. The following works, but it is ugly ( test code here ):

$(function () {
    var $button = $(".delete");

    var command = $button.attr('onclick'); // Keep the inline command
    $button.removeAttr('onclick'); // Clear the inline onclick

    $button.click(function() {
        if (confirm('Are you sure?')) {
            eval(command.replace('javascript:', '')); // Call the stored command
        }
    });
});

I would suggest using the Confirm Button Extender from the Ajax Control Toolkit

Answer 3

you define one handler in your element:

<input type="button" value="Delete" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolderBodyMasterPage$grdvwUsers','Delete$0')" class="delete" />

you must put this action in jquery click function

Answer 4

With the API for the latest version of jQuery, it would be something along the line of this:

$("#myButton").on('click', function () {
    // do stuff
});

Answer 5

I would hook my click event to a jQueryUI dialog popup and then on confirm fire the delete function.

$("#ConfirmDialog").dialog({
  title: "Confirm",
  modal: true,
  resizable: false,
  hide: "fade",
  autoOpen: true,
  width 100,
  height: 100,
  buttons:
  {
   "Yes Delete It":function(){
    // Delete function here
    $(this).dialog("close");
    },
    "No, Don't Delete":function() {
    $(this).dialog("close");
    }
  }
});

what this will do is allow you to have much more control over the popup and make it look like a part of the site vs. a javascript alert box.

Answer 6

I suspect that the __doPostBack function is executing and preventing your code from executing. You can use the decoration pattern and wrap the existing __doPostBack to ensure that your code gets a chance to execute before doing a post back.

In ASP.NET, how to hook postback event on clientside