[Solved] Can't seem to explicity set RadAjaxLoadingPanel to show

[msigman]

I'm using a javascript redirect to send the user to on the next page and I'd like to have the RadAjaxLoadingPanel display while this is happening.  I tried this code but currentLoadingPanel is showing up as null.  It would be even better if I could make the panel display from the CodeBehind, otherwise if someone could tell me what I'm doing wrong here, javascript would be fine.

 

var currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

 

var currentUpdatedControl = "loginArea";

currentLoadingPanel.show(currentUpdatedControl);

 <form id="form1" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
                function forwardUser(page) {
                    var currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
                    var currentUpdatedControl = "loginArea";
                    currentLoadingPanel.show(currentUpdatedControl);

                    window.parent.navigate(page);
                }
        </script>    </telerik:RadCodeBlock>

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Web20" />

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
          <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Telerik" MinDisplayTime="1000"></telerik:RadAjaxLoadingPanel>
            <div style="font-size: 8pt; font-family: Tahoma; color: #222222;" id="loginArea">

                <img src="images/Solutions7-Logo.png" alt="" />

                <div style="margin-top:5px; text-align: left; width: 150px; margin-left: auto; margin-right: auto">
                    <telerik:RadTextBox ID="txtUsername" runat="server" EmptyMessage="username"
                        InvalidStyleDuration="100" Width="125px" MaxLength="25"></telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                        ControlToValidate="txtUsername" ErrorMessage="Username is required"  Display="Dynamic" EnableClientScript="true"
                        SetFocusOnError="True"></asp:RequiredFieldValidator>

                    <telerik:RadTextBox ID="txtPassword" style="margin-right:0px;" Runat="server"
                        Width="125px"  AutoCompleteType="None"
                        Textmode="Password" SelectionOnFocus="SelectAll" Height="15px"
                        MaxLength="25"></telerik:RadTextBox><asp:Button ID="Button1" runat="server"
                            Text="Log In" UseSubmitBehavior="true" />

                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                        ControlToValidate="txtPassword" ErrorMessage="Password is required" Display="Dynamic"
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </div>
                <p>
                    <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>
                </p>
                <p style="margin-top:15px">
                    Having trouble? Please <a href=# style="color: #222222">click here</a> for assistance.
                </p>
                <p style="margin:5px; vertical-align: bottom;">
                    <img src="images/microsoft_certified.jpg" />
                </p>
            </div>


        </telerik:RadAjaxPanel>
    </form>

[Daniel]

Hello Matthew,

I suppose you are trying to access the LoadingPanel's client object before it is actually created. I recommend you try the following:

<script type="text/javascript">
    var pg;
    function test()
    {
        var currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
        var currentUpdatedControl = "loginArea";
        currentLoadingPanel.show(currentUpdatedControl);
        window.parent.navigate(pg);
    }

    function forwardUser(page)
    {
        pg = page;
        setTimeout(test, 1);
    }
</script>

You can adjust the timeout if needed.

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.