Why does my jquery-ui modal dialog disappear immediately after it opens?

Question

I'm trying to use a simple jquery-ui modal dialog as a delete confirmation in an ASP.NET C# application. I've done this many times before, but for some reason in this application it is misbehaving. I see the dialog pop up then it immediately disappears before I can click on either "Yes" or "No". Here's the relevant code (Javascript):

    <script type="text/javascript" src="/resources/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/resources/jquery-ui-1.9.1.custom.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/resources/ui-lightness/jquery-ui-1.9.1.custom.css" />

    <script type="text/javascript">
        var remConfirmed = false;
        function ConfirmRemoveDialog(obj, title, dialogText) {
            if (!remConfirmed) {
                //add the dialog div to the page
                $('body').append(String.Format("<div id='confirmRemoveDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
                //create the dialog
                $('#confirmRemoveDialog').dialog({
                    modal: true,
                    resizable: false,
                    draggable: false,
                    close: function(event, ui) {
                        $('body').find('#confirmRemoveDialog').remove();
                    },
                    buttons:
                    {
                        'Yes, remove it': function() {
                            $(this).dialog('close');
                            remConfirmed = true;
                            if (obj) obj.click();
                        },
                        'No, keep it': function() {
                            $(this).dialog('close');
                        }
                    }
                });
            }

            return remConfirmed;
        }

        //String.Format function (since Javascript doesn't have one built-in
        String.Format = function() {
            var s = arguments[0];
            for (var i = 0; i < arguments.length - 1; i++) {
                var reg = new RegExp("\\{" + i + "\\}", "gm");
                s = s.replace(reg, arguments[i + 1]);
            }
            return s;
        }
    </script>

Here's where I'm using the confirmation function (in the OnClientClick of an <asp:Button> control):

    <asp:Button ID="btnRemoveProgram" runat="server" Text="Remove" CausesValidation="false" OnClientClick="ConfirmRemoveDialog(this, 'Please confirm removal', 'Are you sure you wish to remove the selected Program? This cannot be undone.');" />

As I said, I've successfully used this same construct (nearly identical code) many times before; I don't know why it isn't working now. Any ideas will be greatly appreciated, I'm truly stumped on this one.

It works for me: http://jsfiddle.net/MjYtQ/ but maybe you need to `retun false;` > `OnClientClick="return ConfirmRemoveDialog(t...` — Mario S, Jan 22 '13 at 20:09

score 2 · Answer 1 · edited May 23 '17 at 12:08

The runat="server" is telling the button that it should post back to perform events at the server. The OnClientClick will be executed before that on the client side, so you will see the dialog and then immediate the page posts, causing the dialog to disappear.

The problem is that your modal dialog box is not modal in the traditional windows sense. The javascript continues on. The simplest test is to add an alert right before your return, you will see it pops up right after the dialog is shown.

To get around this issue, return false always in the OnContentClick and then in your Yes/No button event handlers use the __doPostback javascript method.

It isn't just a client-side button - if the user clicks "Yes" on the modal dialog, it should then perform the button's "Click" event server-side. — timbck2, Jan 22 '13 at 20:21

score 1 · Accepted Answer · answered Jan 22 '13 at 20:11

1

You need to return the remConfirmed to the caller which is the button itself. On your button, do this:

OnClientClick="return ConfirmRemoveDialog(/* the rest of the code */);"

answered Jan 22 '13 at 20:11

Dennis Rongo

4,611
1
25
25

OK, now the dialog is sticking around, and works as it should when I click "No", but when I click "Yes" the dialog goes away but nothing happens. Do I need an "OnClick" event in addition to "OnClientClick"? I thought that the line `if (obj) obj.click();` took care of that for me. Edit: I added the server-side "OnClick" event to the button and that took care of the problem. Thanks guys! – timbck2 Jan 22 '13 at 20:20
Just returning `true` should make it perform what it's supposed to instead of doing another call to `click`. – Dennis Rongo Jan 22 '13 at 20:25

Why does my jquery-ui modal dialog disappear immediately after it opens?

2 Answers2

Linked