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?