Buttons and ConfirmButtonExtender added dynamically

Question

I'm adding alot of buttons at runtime to my form. When i push these buttons i want a confirm window to pop up and ask if i'm sure to delete this item.

How would i go by doing this. Every button is added dynamically so i expect that the confirmbuttonextender should also be added that way. Do i have to add a extender for each button or should i make one in the aspx file then change the targetID at runtime ?

UPDATE

Panel div = new Panel();
div.CssClass = "BulletDiv";
content.Controls.Add(div);

HyperLink picture = new HyperLink();
picture.ImageUrl = "~/Icons/Ny_mappa.png";
picture.NavigateUrl = "?navID=" + item.Nav_ID + "&ddlID=" + ddlID;
div.Controls.Add(picture);

div.Controls.Add(new LiteralControl("<br/>"));

HyperLink description = new HyperLink();
description.CssClass = "BulletDiv_Text";
description.Text = item.Nav_Name;
description.ID = item.Nav_ID.ToString();
description.NavigateUrl = "?navID=" + item.Nav_ID + "&ddlID=" + ddlID;
div.Controls.Add(description);

Button eyda = new Button();
eyda.Text = "Eyda";
eyda.CommandArgument = item.Nav_ID.ToString();
eyda.Command += new CommandEventHandler(eyda_Command);
div.Controls.Add(eyda);

Answer 1

have you tried a simple javascript?

onclick='return confirm("Are you sure you would like to delete this item?");'

You would add this when adding the Button like this:

Button edya = new Button();
edya.Attributes.Add("onclick","return confirm(\"Are you sure you would like to delete this item?\");");
//... set other fields and add to page

Alternatively, you could use JQuery:

eyda.CssClass = "confirm";  //When adding button on server side

Then on the client side, add the following javascript (having also added the jquery library of course).

$(document).ready(function() {
   $('.confirm').click(function() {
       if (!confirm("Are you sure etc?")) {
           return false; //prevent button event propogating
       }
   });
});

If you want to get real clever and include more info...

eyda.CssClass = "confirm";  //When adding button on server side
eyda.Attributes.Add("SomeProperty","Some value, specific to this button");


  $(document).ready(function() {
   $('.confirm').click(function() {
       var someValue= $(this).attr("SomeProperty");

       if (!confirm("Are you sure you want to delete " + someValue)) {
           return false; //prevent button event propogating
       }
   });
});

UPDATE: Change the background image like this...

eyda.CssClass = "confirm";  //When adding button on server side

Stylesheet

.confirm {
    background-image: url('Images/ClickMe.gif');
    background-repeat:no-repeat;
}
.clicked {
    background-image: url('Images/Clicked.gif');
}

Javascript:

$(document).ready(function() {
   $('.confirm').click(function() {
       if (!confirm("Are you sure etc?")) {
           $(this).addClass("clicked");
           return false; //prevent button event propogating
       }
       //Not meaningful to change style here as a postback is about to occur... 
       //$(this).addClass("clicked"); 
   });
});