Ajax ConfimButtonExtender firing before OnClientClick javascript code

Question

Im using aspnet 3.5, vs 2008, ajax 2.0, plain old javascript (not using any javascript framework).

In a asp:listview i have a button (delete) with a OnClientClick= "turnrowpink(this);"

I also have an ajax 2.0 confirmbuttonextender for this button ( are you sure you want to delete this record? )

The turnrowpink function used to run before the are you sure? message.

It used to be that when the are you sure? would popup, the row that you had clicked on to delete was displayed in pink, to make it obvious which row you were deleting.

I have since added a lot of totally nonrelated javascript functions, and now the above code fires in the reverse order:

Are you sure? confirm happens 1st, then on ok, turnrowpink is called. Kind of silly to run turnrowpink at that point. To add insult to injury, im getting a javascript error on turnrowpink, since the parm (this) seems to have been set to something else at that point.

So, how to I force turnrowpink to fire first?

I realize that stuff is done asynchronously but it used to work.

Here's the code :

this is in the listview item template :

<td>
   <asp:ImageButton ID="ImageButtonDel" 
   runat="server" OnClientClick="TurnRowPink(this);"
   ImageUrl="~/delete.GIF" CommandName="DeleteRecord" 
   CommandArgument='<%# Eval("tt_Pkey") %>' />
</td>

and this is the ConfirmButtonExtender, also in the listview item template :

<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" 
 ConfirmText="Are you sure you want to delete this record?"  
   runat="server" TargetControlID="ImageButtonDel">
</cc1:ConfirmButtonExtender>

Answer 1

If I were you I would not use the ConfirmButtonExtender. The way you're using it all it is doing is popping up a Confirm message box which is much more easily done manually.

Change your OnClientClick property to this:

OnClientClick="return TurnRowPink(this);"

Then your TurnRowPink function would look something like this:

function TurnRowPink(obj){
  /*
  * Turn row pink logic here
  */

  if(Confirm("Are you sure you want to delete this record?")){
    // Any logic you may need for if they click "OK"
    return true;
  }
  else{
    // Any logic you may need if they click "Cancel", such as change back from pink to prior color
    return false;
  }
}

This is untested code, but I believe it will work, although I have not had very much experience with ImageButtons

Answer 2

I had this issue, the problem is the extender is overwriting your onclick function instead of chaining it(jQuery we love you). I hacked around it like this:

<asp:ImageButton ID="ImageButtonDel" 
   runat="server" onmousedown="TurnRowPink(this);"
   ImageUrl="~/delete.GIF" CommandName="DeleteRecord" 
   CommandArgument='<%# Eval("tt_Pkey") %>' />