Stop ImageButton OnCommand postback using javascript in asp.net 4.0 (Internet Explorer)

Question

It looks like the Internet Explorer demon has struck again, and I cannot seem to figure this one out:

I have an ImageButton using OnCommand to delete a specific entry from my database. I however have implemented it so that the user will first confirm that they want to delete a specific item.

Here is the code for my ImageButton

<asp:ImageButton runat="server" ID="imgDelete" ImageUrl="~/Controls/TaskDetails/Images/delete.png" OnCommand="Tag_DeleteCommand" Visible='<%# CanDelete %>' OnClientClick="javascript:confirmDialog(this, 'Remove Tag','Are you sure you want to remove this tag?', 1); return false;"
            CommandArgument='<%# Eval("TagID") %>' />

And here is my ConfirmDialog function

function confirmDialog(sender, title, message, type) {

    //type entities
    //1 = warning
    //2 = error
    //3 = success
    //4 = Information
    var sender = $(sender);

    $("#message_dialog_inner_text").html(message);

    $("#message_dialog_message_container").dialog({
        modal: true,
        title: title,
        zIndex: 10003,
        dialogClass: (type > 0) ? "message_dialog_type_" + type : "",
        position: 'center',
        buttons: {
            "OK": function () {
                //the yes option was selected, we now disable the onclientclick event, and fire the click event.
                $(this).dialog("close");

                if (sender.hasAttr("href")) {
                    window.location = sender.attr('href');
                } else {
                    sender.removeAttr("onclick");
                    sender.trigger("click");
                }
            },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

return false;

}

This works fine in Chrome, FF, Safari, but IE is just ignoring it and doing the postback. I have even changed my OnClientClick to "return false;" and it seems to have no impact on the button posting back. I have also changed it from an ImageButton to just a Button, to no avail. I am assuming it has something to do with the OnCommand event, but right I am at a loss! I have implemented this througout a pretty huge application, so I would like to manage the scope of the change. If anyone has some input, it would be greatly appreciated!

EDIT

OK, let me also just stress, I don't want it to post back, and even if I just have OnClientClick="return false;" the command button is still posting back (not what you would expect).

Here is the rendered markup from my ImageButton control

<input type="image" name="ctl00$body$pnlContentRight$pnlCurrentTaskDetails$repTags$ctl00$tagItem$imgDelete" id="ctl00_body_pnlContentRight_pnlCurrentTaskDetails_repTags_ctl00_tagItem_imgDelete" src="Controls/TaskDetails/Images/delete.png" onclick="javascript:confirmDialog(this, 'Remove Tag','Are you sure you want to remove this tag?', 1); return false;" style="border-width:0px;">

Have you tried changing the beginning to OnClientClick="return confirmDialog(... ? — Doozer Blake
– Doozer Blake, Commented Oct 17, 2011 at 15:32
Could you post the rendered HTML? I suspect you're right, that OnCommand may be the culprit. Seeing the actual HTML/JS that is sent to the browser may help diagnose. — mikemanne
– mikemanne, Commented Oct 17, 2011 at 15:42
Doozer: I have tried "return confirmDialog();" but it did not change anything in terms of how IE does not want to stop the postback from happening. Super strange that this seems to be related to IE because chrome handles everything as I would expect. MikeManne: I have updated my question to include the rendered markup. — tribe84
– tribe84, Commented Oct 17, 2011 at 16:18

mikemanne · Accepted Answer · 2011-10-17 16:39:45Z

This isn't a resolution to your specific issue, but it's a workaround you may want to consider (I've used it in a couple of places):

Make your "delete" button a simple image, not a postback button.
Give it an OnClientClick which calls a local javascript function (passing the relevant data - at a minimum, the ID of the item to be deleted).
That local JS function loads the relevant data into a hidden var (so it can be accessed in your code-behind), and opens the jQuery confirm dialog.
That dialog is configured with NO jquery-dialog buttons. Instead, the launched DIV contains two asp:Buttons: ok and cancel. The cancel button simply closes the jQuery dialog. The OK button is a normal postback button with a server-side OnClick function.
Thus, the page is only posted-back if the user clicks the OK button on the confirm dialog. The confirm-dialog-event function knows which item to delete because that item's ID is in the hidden field.

This is probably not the "right" way to implement this behavior (from an ASP.NET purist standpoint). However, as workarounds go, I don't think it's too painfully kuldgey. And in my experience, it seems to work across all browsers (assuming they have JS enabled, of course). HTH.

James Johnson · Accepted Answer · 2011-10-17 15:56:12Z

0

You're OnClientClick is always returning false, which means that the event will never be executed. Try returning the input from the confirm like this:

OnClientClick="return confirmDialog(...);"

You will need to make sure that there is a way to return true from the confirmDialog function too. It looks like that function always returns false too.

I'm not very familiar with the jQuery UI dialog, but in concept it should work like this:

buttons: { 
    "OK": function () { return true; }, //perform a postback and execute command
    "Cancel": function () { return false; } //abort postback and do nothing
}

answered Oct 17, 2011 at 15:56

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

tribe84 Over a year ago

Hey James, thanks for the response. I am always returning false, because the UI Dialog does not hold the UI thread like the native JS confirm() does. What essentially has to happen, is I have to block the execution of the postback, and when the "OK" event is fired, I need to reboot and cause the original postback. Right now, simply having OnClientClick="return false;" is not even stopping my OnCommand event from firing in IE (works in other browsers).

Collectives™ on Stack Overflow

Stop ImageButton OnCommand postback using javascript in asp.net 4.0 (Internet Explorer)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related