Home/ Questions/Q 3232194
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T17:07:57+00:00

I’m having some trouble with jQuery UI. I’ve created a dialog with jQuery UI:

  • 0

I’m having some trouble with jQuery UI. I’ve created a dialog with jQuery UI: so far, so good. I set up a form inside the jQuery UI dialog and then it’s another story. I’ve written a very simple page to illustrate:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testpage.aspx.cs"     Inherits="RiverCascade.testpage" %>
<head runat="server">    
<link rel="Stylesheet" type="text/css" href="Stylesheet1.css" />
<link rel="Stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function showModal() {
    $("#modalBox").dialog();
}
$(document).ready(showModal);    
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>    
    <asp:Button runat="server" ID="button1" OnClick="button1_click" />                
        <div style="display:none" id="modalBox">
        <asp:Button runat="server" ID="button2" OnClick="button2_click" />        
        </div>

    </div>
    </form>
</body>
</html>

In the code above, see that I’ve just imported the jQuery, jQuery UI, and stylesheets and set up a page with a dialog box. There is an asp control button1 outside the dialog box and an asp control button2 inside the dialog box.

When I click on button1, the event handler gets called and all is well. However, when on click on button2, the button inside the jQuery dialog, nothing happens.

Why is my web page behaving this way? How can I fix it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following is from the jQuery UI Dialog source (you gotta scroll pretty far down).

    // ... more code here ...
uiDialog = (self.uiDialog = $('<div></div>'))
            .appendTo(document.body)
            .hide()
            .addClass(uiDialogClasses + options.dialogClass)
// ... more code here ...

    Basically the reason you’re seeing the behavior that you are because jQuery Dialog creates a new element and attaches it to the body of the page (outside the ASP.NET form). Since your button is now outside the ASP.NET form it won’t cause regular submits.

    Tim B James’s solution should cover up the problem.

    • 0