Someone help with this please, .modal dialog in a page loaded through .load

This is my main page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="newpage.aspx.cs" Inherits="newpage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nrd").click(function () {
$('#result').load("test.aspx");
});
$("#nrd2").click(function () {
$('#result').load("saveoup.aspx");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<div id="butts">
<input type="button" id="nrd" value="New Record"/>
<input type="button" id="nrd2" value="Save"/>
</div>
<div id="usrlogged"><asp:Label ID="lblusr" runat="server" Text="USER:"></asp:Label></div>
</div>
<div id="content">
<div id="result"> </div>
</div>
<div id="footer">
<p>Copyright ©</p>
</div>
</form>
</body>
</html>

And this is the page which is loaded into the main page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="saveoup.aspx.cs" Inherits="saveoup" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
.ui-widget {
font-size:70%;
}
</style>
<script>
$(function () {
$("#dialog-modal").dialog({
autoOpen: false,
height: 140,
modal: true
});
$("#abutt")
.button()
.click(function () {
$("#dialog-modal").dialog("open");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Last unsaved data:</p><br /><br />
<asp:GridView ID="GridView1" runat="server"
Width="900px" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input type="button" id="upbutt" value="edit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
<div id="dialog-modal" title="Modify selected row." >
<table>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="ID:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd1" runat="server" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label3" runat="server" Text="Code:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd3" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label4" runat="server" Text="Address:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd4" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label5" runat="server" Text="Phone:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd5" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label6" runat="server" Text="nthg:"></asp:Label> </td>
<td><asp:TextBox ID="txtbadd6" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<input type="button" value="test" id="abutt" />
</form>
</body>
</html>

It doesn't work on Chrome browser and it works on IE but it's messed up.

What is wrong in my code?

I found the following error:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' jquery-1.8.3.js:477

jQuery.extend.error jquery-1.8.3.js:477
(anonymous function) jquery-ui.js:521
jQuery.extend.each jquery-1.8.3.js:611
jQuery.fn.jQuery.each jquery-1.8.3.js:241
$.fn.(anonymous function) jquery-ui.js:517
(anonymous function) newpage.aspx:14
c.event.handle jquery.min.js:55
j.handle.o

Topic Participants
aspuny

Someone help with this please, .modal dialog in a page loaded through .load

Someone help with this please, .modal dialog in a page loaded through .load

Topic Participants

aspuny