All geek questions in one place

JQuery UI Dialog Displayed Using ASP.NET Button

I am trying to show a modal dialog when the user clicks the 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 the TreeNew button, a modal popup appears, but immediately the page performs a postback.

What's happening?

+4
source share
6 answers

When adding the parameter return false; your problem will be fixed (as suggested by other answers), I think that you are best off using the standard HTML button. In this case, there is no reason to use the ASP.NET control, since you are not going to send it back.

If you insist on using the ASP.NET button, however, at least set UseSubmitBehavior="False" so that the button displays as <input type="button"/> instead of <input type="submit"/> .

+3
source

Try

 OnClientClick="return ShowDialog();"

and

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

This will prevent postback.

+3
source

Your OnClientClick should return false as follows:

 OnClientClick="ShowDialog(); return false;"

The default buttons are postback, but returning false prevents the default behavior

+2
source

You are not returning false from your OnClientClick. When you do not explicitly return false, the truth is assumed in this situation. A return value of true from your OnClientClick indicates that this is normal for postback. Try changing OnClientClick to the following (adding "return false" after your call to ShowDialog ())

 OnClientClick="ShowDialog();return false;"
+1
source

This article may be specific to you: using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control .

Hope this helps some.

+1
source

Use the preventDefault () function of jQuery to prevent button postbacks

Try the following:

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

Source: https://habr.com/ru/post/1302162/

More articles:


All Articles