jQuery .dialog() causes inputs to return default values with RadAjaxPanel

[Ken]

If I take a few inputs and wrap a RadAjaxPanel around them then I receive the values of the inputs in the callback.

But if I call .dialog() on the Div the values return their default values.

For example this works great:

<telerik:RadAjaxPanel runat="server" ID="rapTest" LoadingPanelID="RALPDash">
    <asp:TextBox ID="txtTest" runat="server" Width="200"></asp:TextBox>
    <asp:Button runat="server" ID="btnTest" Text="Test RAP" />
</telerik:RadAjaxPanel>

But if I do the below in markup and then call the Javascript below that I receive a txtTest.Text with a blank string.  The dialog appears when I open it, the load panel appears when I click the Test button and everything appears to work great but the txtTest.Text string is blank.  If I give txtTest a value in HTML markup then I receive that value instead of what type into it before I hit the Test button.

I have also tried jquery-1.10.2.min.js.  Thanks in advance!

<div id="dlgTest" title="Prospect Edit">
<telerik:RadAjaxPanel runat="server" ID="rapTest" LoadingPanelID="RALPDash">
    <asp:TextBox ID="txtTest" runat="server" Width="200"></asp:TextBox>
    <asp:Button runat="server" ID="btnTest" Text="Test RAP" />
</telerik:RadAjaxPanel>
</div>

$("#dlgTest").dialog({
    autoOpen: false,
    height: 400,
    width: 600,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    close: function () {
    }
});

[Ken]

I have also tried this.

<telerik:RadAjaxPanel runat="server" ID="rapTest" LoadingPanelID="RALPDash">
<div id="dlgTest" title="Prospect Edit">
    <asp:TextBox ID="txtTest" runat="server" Width="200"></asp:TextBox>
    <asp:Button runat="server" ID="btnTest" Text="Test RAP" />
</div>
</telerik:RadAjaxPanel>

[Antonio Stoilkov]

Hello Ken,

In order to resolve your issue you could set the dialog box its appendTo option and specify the page form element as shown below.

$("#dlgTest").dialog({
    appendTo: "form",
    autoOpen: true,
    height: 400,
    width: 600,
    modal: true,
    buttons: {
        "Cancel": function()
        {
            $(this).dialog("close");
        }
    },
    close: function()
    {
    }
});

The experienced issue is expected and is caused from the way ASP.NET AJAX Framework works. The problem in your scenario is that you are moving the dialog outside of the form element on the page. The described scenario could also be replicated with ASP.NET UpdatePanel control.

Regards,
Antonio Stoilkov
Telerik

[Ken]

Thank Antonio!

Your answer provided just what I needed for a number of different issues I was facing.  I was completely oblivious to the fact that controls could be moved outside of the form.  This has seriously helped me more in about 30 seconds than you can imagine!

Ken

[Ken]

disregard