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

5 posts, 1 answers
  1. Ken
    Ken avatar
    10 posts
    Member since:
    Nov 2012

    Posted 16 Sep 2013 Link to this post

    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 () {
        }
    });


  2. Ken
    Ken avatar
    10 posts
    Member since:
    Nov 2012

    Posted 16 Sep 2013 Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 19 Sep 2013 Link to this post

    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.
  5. Ken
    Ken avatar
    10 posts
    Member since:
    Nov 2012

    Posted 20 Sep 2013 Link to this post

    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
  6. Ken
    Ken avatar
    10 posts
    Member since:
    Nov 2012

    Posted 21 Oct 2013 Link to this post

    disregard
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017