Javascript Confirm Without Code In Code Behind

I have a page with dynamically added imagebuttons, and i want them to send a confirm when you click them(for deletion). Since they are dynamic i cant code anything in a .click even

Solution 1:

If you want to be able to cancel the submission, set the OnClientClick property to the string "Return" and the function name. The client script can then cancel the submission by returning false.

check imagebutton clientclick property.

void Button1_Click(Object sender, EventArgs e)
        Label1.Text = "Server click handler called.";
    EndSub

your dynamic generated imagebutton should be somewhat like this: Create commman event hadler for all imagebuttons and set the id of these imagebutton to the primary key value.

check Respond to Button Web Server Control Events in Client Script for details:

You can create a custom imagebutton usercontrol that will provide the delete functionality on click event. On ItemRowCreated or GridView RowCreated events assign event hadler to these dynamically added control.

If they are not in any databind control then simple assign there properties at run time.

protectedvoidPage_Init(object sender, EventArgs e)
    {
        ImageButton btn = new ImageButton();
        btn.ID = "1";
        btn.ImageUrl = "http://icons.iconarchive.com/icons/deleket/button/256/Button-Fast-Forward-icon.png";
        btn.OnClientClick = "return confirm('Ready to submit.')";
        btn.Click += new ImageClickEventHandler(btn_Click);
        this.form1.Controls.Add(btn);
    }

check the control id in event handler.

privatevoidbtn_Click(object sender, ImageClickEventArgs e)
        {
            ImageButton btn = (ImageButton)sender;
            Response.Write("<script>alert('Image button with id = " + btn.ID + "clicked');</script>");
        }

and then perfom delete operation

Solution 2:

It's easy to do with jQuery (a javascript framework), even if want to do with pure JavaScript, you need to add a class to all your delete image button and add an handler to it

Using jQuery, just use this:

$(".deleteImageButton").bind("click", function() {
   var res = confirm("Are you sure you want to delete?");
   return res;
});

Solution 3:

Objects that fire .click and other functions are "collected" at load, if you add any elements after that, you need to either use .delegate or .bind to make the new elements also fire an event.

Solution 4:

Events bubble up the DOM, ie. they'll get triggered for the element it happened on, as well as all of it's parents (up to the document node itself). This make it easy to solve your problem: just attach a click handler to the container of the buttons. jQuery makes it even easier to do it through it's delegate function, here's some example code:

$('#buttons').delegate('.delete_control', 'click', function(e) {
    e.preventDefault();
    e.stopPropagation(); // maybe you don't need these 2, you can remove them if soif (confirm('Are you sure you want to delete that element?')) {
        // make an ajax request to delete the image. alternatively you can submit// a hidden form, with the controlid in an input, but this is way simpler.
        $.post('/url/to/delete/control/by/id/' + e.target.id, function() {
            $(e.target).remove(); // to delete the button when the request is done.
        });
    }
});

And here's a JSFiddle page showing the whole thing working: http://jsfiddle.net/8d7D4/