locked
dropdown list with "Loading Icon" RRS feed

  • Question

  • User252966147 posted

     Hi to All,

    I have two drop down lists in asp.net(with vb code behind file) form.

    I want a functionality when user select a value in Dropdown list 1 immediately webform should show "Loading please wait.." message until the other associated values loaded in drop down list 2.

    dropdownlist 1 retrieves data from database.

    Please suggest me how to do that..

    Thank you,

    Regards,

    karim

     

    Thursday, September 3, 2009 8:45 PM

Answers

  • User-1419202310 posted

    Try this... 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageLoadProgress.aspx.cs"
        Inherits="PageLoadProgress" %>
    
    <!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></title>
        <script type="text/javascript" language="javascript">
            function pageLoad(sender, args) {
                TogglePannel('<%= pnlMain.ClientID %>', true);
                TogglePannel('<%= pnlLoading.ClientID %>', false);
            }
            function TogglePannel(target, OnOff) {
                obj = document.getElementById(target);
    
                if (obj) {
                    obj.style.display = (OnOff) ? 'inline' : 'none';
                }
            } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Panel runat="server" ID="pnlLoading" Style="height: 450px; vertical-align: middle;"
            HorizontalAlign="Center">
            <div style="width: 100%; height: 220px;">
            </div>
            <img src="/images/Loading.gif" alt="LOADING..." /><br />
            <asp:Label runat="server" ID="lblPleaseWait" Font-Bold="true" Font-Size="X-Large"
                Text="please wait..." />
            <div style="width: 100%; height: 220px;">
            </div>
        </asp:Panel>
        <asp:Panel runat="server" ID="pnlMain" Style="display: none;">
            <asp:Button runat="server" ID="btnDoesSomething" Text="Do Something" />
        </asp:Panel>
        <asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="ddl1_OnSelectedIndexChanged">
            <asp:ListItem Text="A"></asp:ListItem>
            <asp:ListItem Text="B"></asp:ListItem>
            <asp:ListItem Text="C"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddl2" runat="server">
            <asp:ListItem Text="A"></asp:ListItem>
            <asp:ListItem Text="B"></asp:ListItem>
            <asp:ListItem Text="C"></asp:ListItem>
        </asp:DropDownList>
        </form>
    </body>
    </html>
    


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 12:16 AM
  • User-68639941 posted
    <div" id="divLoading" style="width: 100px; height: 20px; top: 200px;
    		left: 400px; ; display: none;" runat="server">
    		<b>Loading...</b>
    	</div>

    on selection change event of first dropdown set the below code

    divLoading.Style.Add(HtmlTextWriterStyle.Display, "block"); - (you can do this client side also)

    on body load event write a javascript fucntion to set this divLoading display as "none"

     

     

     
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 12:20 AM
  • User-130099612 posted

     PLs refer these links::
    http://forums.asp.net/p/1457210/3339666.aspx

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 1:56 AM

All replies

  • User-1419202310 posted

    Try this... 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageLoadProgress.aspx.cs"
        Inherits="PageLoadProgress" %>
    
    <!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></title>
        <script type="text/javascript" language="javascript">
            function pageLoad(sender, args) {
                TogglePannel('<%= pnlMain.ClientID %>', true);
                TogglePannel('<%= pnlLoading.ClientID %>', false);
            }
            function TogglePannel(target, OnOff) {
                obj = document.getElementById(target);
    
                if (obj) {
                    obj.style.display = (OnOff) ? 'inline' : 'none';
                }
            } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Panel runat="server" ID="pnlLoading" Style="height: 450px; vertical-align: middle;"
            HorizontalAlign="Center">
            <div style="width: 100%; height: 220px;">
            </div>
            <img src="/images/Loading.gif" alt="LOADING..." /><br />
            <asp:Label runat="server" ID="lblPleaseWait" Font-Bold="true" Font-Size="X-Large"
                Text="please wait..." />
            <div style="width: 100%; height: 220px;">
            </div>
        </asp:Panel>
        <asp:Panel runat="server" ID="pnlMain" Style="display: none;">
            <asp:Button runat="server" ID="btnDoesSomething" Text="Do Something" />
        </asp:Panel>
        <asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="ddl1_OnSelectedIndexChanged">
            <asp:ListItem Text="A"></asp:ListItem>
            <asp:ListItem Text="B"></asp:ListItem>
            <asp:ListItem Text="C"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddl2" runat="server">
            <asp:ListItem Text="A"></asp:ListItem>
            <asp:ListItem Text="B"></asp:ListItem>
            <asp:ListItem Text="C"></asp:ListItem>
        </asp:DropDownList>
        </form>
    </body>
    </html>
    


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 12:16 AM
  • User-68639941 posted
    <div" id="divLoading" style="width: 100px; height: 20px; top: 200px;
    		left: 400px; ; display: none;" runat="server">
    		<b>Loading...</b>
    	</div>

    on selection change event of first dropdown set the below code

    divLoading.Style.Add(HtmlTextWriterStyle.Display, "block"); - (you can do this client side also)

    on body load event write a javascript fucntion to set this divLoading display as "none"

     

     

     
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 12:20 AM
  • User-130099612 posted

     PLs refer these links::
    http://forums.asp.net/p/1457210/3339666.aspx

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2009 1:56 AM
  • User252966147 posted

     hii,

    Thanks for you reply.

    how can I disappear the "loading icon" once the contents in second dropdown box is loaded.

    how can I write that code.

     

    plz help me.

     

    Regards,

    karim

    Friday, September 11, 2009 9:44 PM