ASP.NET UpdatePanel inside JQuery UI dialog

I'm creating a jQuery dialog and filling it with content that gets loaded using jQuery's ajax() function. This content contains an ASP.NET Ajax UpdatePanel control that I would like to asynchronously update within the dialog.

The content is a simple email form (two TextBox controls and a button). When I click the button, I want to send the email and update a label to say its been succesful. My problem is that when I click the button the page performs a full postback to the page I loaded in the Ajax request rather than a partial postback to update my UpdatePanel.

Could this be because I have had to add a different form tag (with runat="server") on the content page I'm loading or is there some other reason?

MORE INFO

Dialog markup. This is added on a web form that uses a different master page to the email page:

<div id="ModalDialog"></div>

JQuery to open dialog:

function openDialog(title, contentUrl) {
    $("#ModalDialog").dialog("option", "title", title);
    $("#ModalDialog").html("<img src='./Skins/Default/Images/ajaxLoader.gif' class='LoadingAnimation' alt='Loading...' />");
    $("#ModalDialog").dialog("open");
    $.ajax({
        url: contentUrl,
        cache: false,
        async: true,
        dataType: "html",
        success: function (data) {
            $("#ModalDialog").empty();
            $("#ModalDialog").append(data);
        }
    });
}

Master file I created for dialog content in the process of trying to discover the problem:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Empty.master.cs" Inherits="<namespace>.Empty" %>

<html>
<head>
<title></title>
</head>
<body>
    <form runat="server">
        <asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server" />
    </form>
</body>
</html>

Email form:

<%@ Page Title="" Language="C#" MasterPageFile="~/<Path>/Empty.Master" AutoEventWireup="true" Async="true" CodeBehind="ContactUs.aspx.cs" Inherits="<namespace>.ContactUs" %>

<asp:Content ContentPlaceHolderID="BodyContentPlaceHolder" runat="server">
    <div id="ContactUsSection">
        <asp:ScriptManager runat="server" />

        <asp:UpdatePanel ID="ContactUpdatePanel" runat="server">
            <ContentTemplate>
                <asp:Label ID="EmailStatusLabel" runat="server" />
                <asp:TextBox ID="EmailAddressTextBox" CssClass="TextInput" runat="server" />

                <asp:TextBox ID="MessageTextBox" CssClass="TextInput" runat="server" TextMode="MultiLine" />

                <asp:Button ID="SendButton" CssClass="FormButton" Text="Send" runat="server" OnClick="SendEmailClick" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

These files have been trimmed down while I tried to find the problem but the issue still exists in these.

ansaurus

tags:

views:

answers:

ASP.NET UpdatePanel inside JQuery UI dialog

related questions