jQuery UI Dialog shown using an ASP.NET button

Question

I'm trying to show a modal dialog when the user click on an ASP.Net button. This is my page:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                buttons: {
                    'Ok': function() {
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                    ;
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    </form>
</body>
</html>

When I click on TreeNew button appears modal popup but inmediately the page do postback.

What's happening?

Because this dialog is not always shown. I need to do a postback with the button. — VansFannel
– VansFannel, Commented Feb 23, 2010 at 20:07

Josh Stodola · Accepted Answer · 2010-02-23 19:50:51Z

3

While adding a return false; will fix your problem (as suggested by other answers), I think the best thing for you to do is use a standard HTML button. There is no reason to use an ASP.NET control in this case since you do not intend to postback.

If you insist to use a ASP.NET button, however, at least set UseSubmitBehavior="False" so that the button is rendered as <input type="button"/> instead of <input type="submit"/>.

answered Feb 23, 2010 at 19:50

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ctrlShiftBryan · Accepted Answer · 2010-02-23 19:47:26Z

3

Try

OnClientClick="return ShowDialog();"

AND

function ShowDialog() {
            $('#dialog').dialog('open');
            return false;
        }

This will prevent the postback.

answered Feb 23, 2010 at 19:47

ctrlShiftBryan

27.9k26 gold badges76 silver badges78 bronze badges

1 Comment

VansFannel Over a year ago

No, it doesn't work. The html generated shows the button as a submit button.

Josh Mein · Accepted Answer · 2010-02-23 19:48:07Z

2

Your OnClientClick needs to return false like so:

OnClientClick="ShowDialog(); return false;"

Buttons by default postback but return false prevents the default behavior

answered Feb 23, 2010 at 19:48

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

Comments

David Morton · Accepted Answer · 2010-02-23 19:47:45Z

1

You're not returning false from your OnClientClick. When you don't explicitly return false, "true" in this situation is assumed. A return value of true from your OnClientClick indicates it's fine to do a postback. Try changing OnClientClick to the following (adding "return false" after your call to ShowDialog())

OnClientClick="ShowDialog();return false;"

answered Feb 23, 2010 at 19:47

David Morton

16.5k3 gold badges66 silver badges74 bronze badges

1 Comment

ctrlShiftBryan Over a year ago

oh i like yours better than mine :)

Chris · Accepted Answer · 2010-02-23 19:47:46Z

1

This article maybe of some value to you: using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control.

Hope this helps some.

answered Feb 23, 2010 at 19:47

Chris

6,3559 gold badges38 silver badges59 bronze badges

Comments

BenMorel · Accepted Answer · 2013-12-30 18:54:58Z

0

Use preventDefault() jQuery function to prevent button postback

Try this:

function ShowDialog(evt) {
            evt.preventDefault();
            $('#dialog').dialog('open');
        }

edited Dec 30, 2013 at 18:54

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Mar 30, 2011 at 11:45

Emad Mokhtar

3,3075 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

jQuery UI Dialog shown using an ASP.NET button

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related