views:

154

answers:

5

Hello.

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?

+1  A: 

Try

OnClientClick="return ShowDialog();"

AND

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

This will prevent the postback.

ctrlShiftBryan
No, it doesn't work. The html generated shows the button as a submit button.
VansFannel
+1  A: 

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;"
David Morton
oh i like yours better than mine :)
ctrlShiftBryan
+1  A: 

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

Hope this helps some.

Chris
+1  A: 

Your OnClientClick needs to return false like so:

OnClientClick="ShowDialog(); return false;"

Buttons by default postback but return false prevents the default behavior

jmein
+2  A: 

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"/>.

Josh Stodola