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

[Solved] Ajax Loading Panel doesn't show

1 Answer 128 Views

Ajax

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

Denise Duggan asked on 27 Feb 2010, 02:44 PM

Hi all,

I've been looking at the examples and my code all morning and cannot see what I'm doing wrong. I hope you can help.

I have a page that has 2 comboboxes on it right now. Of course it'll have more later :-) But basically when the user selects an entry from the first combobox, the 2nd one loads it's items based on what the user selected in the first. That part's working fine. But I've been trying to get a "loading...." graphic to show up with the 2nd combobox while it's reloading and I just cannot get it to show up. The combobox still loads, but but no graphic.

Does anyone see what I'm missing, please? I'm including the markup here. The only thing in the codebehind is a call to a stored procedure that loads the items in the 2nd combobox after a selection is made in the first.

Thanks in advance for the help.

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="LinkReqsToActs.aspx.vb" Inherits="ScoutingWithTheMouse.WebPages.Admin.Admin_LinkReqsToActs" %> 
        
            <%@ Register TagPrefix="swm" TagName="OrgCombobox" Src="~/Components/OrganizationDropdown.ascx" %> 
        
            <%@ Register TagPrefix="swm" TagName="LevelCombobox" Src="~/Components/LevelDropdown.ascx" %> 
        
            <%@ Register TagPrefix="swm" TagName="ReqCombobox" Src="~/Components/RequirementsDropdown.ascx" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Scouting with the Mouse - Admin - Link Requirements to Activities</title> 
        
                    <!-- custom head section --> 
        
                <style type="text/css"> 
        
                    .module1 
        
                    { 
        
                        background-color: #dff3ff; 
        
                        border: 1px solid #c6e1f2; 
        
                    } 
        
                    .loading 
        
                    { 
        
                        background-color: #fff; 
        
                        height:100%; 
        
                        width:100%; 
        
                    } 
        
                </style> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                <script type="text/javascript"> 
        
                    function RequestStart(sender, eventArgs) { 
        
                        var loadingImage = document.getElementById('<%= upProgLevel.FindControl("Image1").ClientID %>'); 
        
                        var panel1 = $get("<%= updtLevel.ClientID %>"); 
        
                        loadingImage.style.position = "relative"; 
        
                        loadingImage.style.top = (parseInt(panel1.style.height) / 2) + "px"; 
        
                    } 
        
                    function MyClientShowing(sender, args) { 
        
                        args.get_loadingElement().style.border = "2px solid red"; 
        
                        args.set_cancelNativeDisplay(true); 
        
                        $telerik.$(args.get_loadingElement()).show("slow"); 
        
                    } 
        
                    function MyClientHiding(sender, args) { 
        
                        args.get_loadingElement().style.border = "2px solid blue"; 
        
                        args.set_cancelNativeDisplay(true); 
        
                        $telerik.$(args.get_loadingElement()).hide("slow"); 
        
                    } 
        
                </script> 
        
                </telerik:RadCodeBlock> 
        
                <!-- end of custom head section --> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="rsmPage" runat="server" /> 
        
                <telerik:RadFormDecorator ID="radFormDecorator_Page" runat="server" DecoratedControls="all"  
        
                    Skin="Vista" /> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="updtLevel"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="updtLevel" LoadingPanelID="upProgLevel" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="cboOrgs"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="updtLevel"  LoadingPanelID="upProgLevel" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                    <ClientEvents OnRequestStart="RequestStart" /> 
        
                </telerik:RadAjaxManager>     
        
                <asp:Table ID="tblPageLayout" runat="server" Width="95%"> 
        
                    <asp:TableRow> 
        
                        <asp:TableCell Width="20%"> 
        
                            <h4>Organizations</h4><swm:OrgCombobox ID="cboOrgs" runat="server" /> 
        
                        </asp:TableCell> 
        
                        <asp:TableCell Width="20%"> 
        
                           <telerik:RadAjaxPanel ID="updtLevel" LoadingPanelID="upProgLevel" runat="server"> 
        
                                <h4>Level</h4><swm:LevelCombobox id="cboLevels" runat="server" /> 
        
                            </telerik:RadAjaxPanel> 
        
                            <telerik:RadAjaxLoadingPanel ID="upProgLevel" runat="server" Transparency="30"> 
        
                                <div class="loading"> 
        
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ajax-loader_small.gif" /> 
        
                                </div> 
        
                            </telerik:RadAjaxLoadingPanel> 
        
                        </asp:TableCell> 
        
                <%--        <asp:TableCell Width="60%"> 
        
                            <h4>Rank/Badge Requirements</h4><swm:ReqCombobox ID="cboRequirements" runat="server"  width="100%"/> 
        
                        </asp:TableCell>--%> 
        
                    </asp:TableRow> 
        
                </asp:Table> 
        
                </form> 
        
            </body> 
        
            </html>

[Solved] Ajax Loading Panel doesn't show

1 Answer, 1 is accepted