This is a migrated thread and some comments may be shown as answers.

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

4 Answers 45 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Ken
Top achievements
Rank 1
Ken asked on 16 Sep 2013, 09:45 AM
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 () {
    }
});


4 Answers, 1 is accepted

Sort by
0
Ken
Top achievements
Rank 1
answered on 16 Sep 2013, 09:49 AM
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>
0
Accepted
Antonio Stoilkov
Telerik team
answered on 19 Sep 2013, 10:38 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Ken
Top achievements
Rank 1
answered on 20 Sep 2013, 05:07 AM
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
0
Ken
Top achievements
Rank 1
answered on 21 Oct 2013, 09:01 AM
disregard
Tags
Ajax
Asked by
Ken
Top achievements
Rank 1
Answers by
Ken
Top achievements
Rank 1
Antonio Stoilkov
Telerik team
Share this question
or