Show processing image when a page is loaded or postback

Question

0.00/5 (No votes)

See more:

hi,

I am using ajax for showing a processing image when the page is loaded or postback.and also when we click or select any control of page then processing image is showing.

but my code is not working.
here is my code.

XML

<%@ Page Language="C#" MasterPageFile="~/Site.master"  AutoEventWireup="true" CodeFile="ViewInformation.aspx.cs" Inherits="ViewInformation" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
.fixedHeader
{
 overflow: auto;
 height: 100%;
 }
 table th
 {
 position: relative;
 }



  </style>
      <style type="text/css">
.books
{
 text-align:right;
 padding-left:680px;

 }



  </style>
 <%-- <script type="text/javascript" language="javascript">
    $(document).ready(function () {
    $('#<%=grdInformation.ClientID %>').Scrollable();
    }
)
</script>--%>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<%--<link href="css/cssUpdateProgress.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        var ModalProgress = '<%= ModalProgress.ClientID %>';
    </script>--%>

 <style type="text/css">
    .WaitDisplay
{
        border-right: 1px outset;
        padding-right: 30px;
        border-top: 1px outset;
        padding-left: 30px;
        font-size: 16pt;
        padding-bottom: 30px;
        border-left: 1px outset;
        cursor: wait;
        color: black;
        padding-top: 30px;
        border-bottom: 1px outset;
        position: absolute;
        background-color: #CCCCCC;
        text-align: center;
        font-family: Arial;
        width: 150px;
    height: 50px;


}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <script type="text/javascript" language="javascript">

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            var postBackElement;
            prm.add_initializeRequest(InitializeRequest);
            prm.add_beginRequest(beginRequest);
            function InitializeRequest(sender, args) {
                postBackElement = args.get_postBackElement();
            }


            function beginRequest(sender, args) {


                var tabContainer = $get(postBackElement.id);
                var _updateProgressDiv = $get('<%= updProgressTab.ClientID %>');
                var tabContainerwBounds = Sys.UI.DomElement.getBounds(tabContainer);
                var updateProgressDivBounds = Sys.UI.DomElement.getBounds(_updateProgressDiv);


                //  center of the control
                var x = tabContainerwBounds.x + Math.round(tabContainerwBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2) - 37;
                var y = tabContainerwBounds.y + Math.round(tabContainerwBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2) - 15;
                Sys.UI.DomElement.setLocation(_updateProgressDiv, x, y);


            }
    </script>
        <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>


//This is our page



 </ContentTemplate>
</asp:UpdatePanel>


 <asp:UpdateProgress ID="updProgressTab"  AssociatedUpdatePanelID="updatePanel" runat="server" >
      <ProgressTemplate>
            <div class="WaitDisplay">
                  <asp:Image ID="imgLoading" runat="server" ImageUrl="images/loading.gif" Width="34px" />Processing...
            </div>
      </ProgressTemplate>
</asp:UpdateProgress>
    <div>
    <asp:Label ID="lblheading" runat="server" Text="View Book Information" CssClass="labelHeading"></asp:Label>
    </div>
    <br />

   <%-- <script type="text/javascript" src="js/jsUpdateProgress.js"></script>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Panel ID="panelUpdateProgress1" runat="server" CssClass="updateProgress">
            <asp:UpdateProgress ID="UpdateProg2" DisplayAfter="0" runat="server">
                <ProgressTemplate>
                    <div style="position: relative; top: 30%; text-align: center;">
                        <img src="images/loading.gif" style="vertical-align: middle" alt="Processing" />

                        Processing ...
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

        </asp:Panel>

        <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress1"
            BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress1" />

        <asp:UpdatePanel ID="updatePanel" runat="server">
            <ContentTemplate>

                    <asp:Button ID="btnSubmit" runat="server" Text="Click Me" OnClick="btnSubmit_Click" Height="26px">
                    </asp:Button>
            </ContentTemplate>
        </asp:UpdatePanel>--%>

    <div><table><tr><td><asp:Label ID="lblKeyword" Text="Keyword : " runat="server"></asp:Label></td>
    <td colspan="2"><asp:TextBox ID="txtKeyword" runat="server"></asp:TextBox>
    <asp:Button ID="btnsearch" runat="server" Text="Search"
            onclick="btnsearch_Click"></asp:Button>
    </td>
   </tr>

          <tr>
            <td><asp:Label ID="lblselect" runat="server" Text="View By : "></asp:Label></td>
            <td colspan="2"><asp:DropDownList ID="ddlSelect" runat="server" AutoPostBack="True"
                  CausesValidation="True" onselectedindexchanged="ddlSelect_SelectedIndexChanged">
              <asp:ListItem Value="2">Total Books</asp:ListItem>
              <asp:ListItem Value="1">Issued Books</asp:ListItem>
              <asp:ListItem Value="0">Balanced Books</asp:ListItem>
              <asp:ListItem Value="3">UnReturn Books</asp:ListItem>
              </asp:DropDownList>
              <asp:Label ID="lblTotal" runat="server" Text="Total No.of Books : " CssClass="books"></asp:Label>
              <asp:Label ID="lblBooks" runat="server"></asp:Label>
              </td>


           </tr>

           </table></div>
           <br/>
              <div style="border-style:solid;border-width:1px;">

        <asp:GridView ID="grdInformation" runat="server" AutoGenerateColumns="False"
            CellPadding="3" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
            BorderWidth="1px" Width="100%"
            onrowcommand="grdInformation_RowCommand"
            AllowPaging="True" onpageindexchanging="grdInformation_PageIndexChanging1"
            onrowdatabound="grdInformation_RowDataBound" PageSize="6">
            <RowStyle ForeColor="#000066" />
            <Columns>
            <asp:BoundField DataField="id" HeaderText="ID" Visible="false" />
                <asp:BoundField DataField="TagId" HeaderText="TagId" Visible="false" />
                <asp:BoundField DataField="AuthorName" HeaderText="Author Name" >

                </asp:BoundField>
                <asp:BoundField DataField="Title" HeaderText="Title" >

                </asp:BoundField>
                <asp:BoundField DataField="Editor" HeaderText="Editor" >

                </asp:BoundField>
                <asp:BoundField DataField="Publisher" HeaderText="Publisher" >

                </asp:BoundField>
                <asp:BoundField DataField="ISBN" HeaderText="ISBN" >

                </asp:BoundField>
               <%-- <asp:BoundField DataField="Year" HeaderText="Year" >

                </asp:BoundField>
                <asp:BoundField DataField="Pages" HeaderText="Pages" >

                </asp:BoundField>
                <asp:BoundField DataField="Volume" HeaderText="Volume" >

                </asp:BoundField>
                <asp:BoundField DataField="PhySicalDescription"
                    HeaderText="Physical Description" >

                </asp:BoundField>
                <asp:BoundField DataField="Source" HeaderText="Source" >

                </asp:BoundField>
                <asp:BoundField DataField="Cost" HeaderText="Cost" >

                </asp:BoundField>--%>
                <asp:BoundField DataField="ClassNumber" HeaderText="Class Number" >

                </asp:BoundField>
                <asp:BoundField DataField="BookNumber" HeaderText="Book Number" >

                </asp:BoundField>
               <%-- <asp:BoundField DataField="BillNumber" HeaderText="Bill Number" >

                </asp:BoundField>--%>
                <asp:BoundField DataField="Remarks" HeaderText="Remarks" >

                </asp:BoundField>
                <asp:BoundField DataField="StatusForIssue" HeaderText="Status For Issue" >

                </asp:BoundField>
                <asp:TemplateField HeaderText="Edit" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <a href="AddInformation.aspx?id=<%# Eval("id")%>">
                                            <img src="images/Edit.gif" alt="edit" style="border: 0px;" />
                                        </a>
                                    </ItemTemplate>
                                    <HeaderStyle HorizontalAlign="Left" />
                                    <ItemStyle HorizontalAlign="Left" Width="6%" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Delete" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="ImgDelete" runat="server" CommandArgument='<%# Eval("id") %>'
                                            CommandName="Del" OnClientClick="return confirm('Are you sure you want to delete this record?');"
                                            ImageUrl="~/images/delete.png" />
                                    </ItemTemplate>
                                    <HeaderStyle HorizontalAlign="Left" />
                                    <ItemStyle HorizontalAlign="Left" Width="6%" />
                                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#000066" />
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
        <%--</asp:Panel>--%>
    </div>
</asp:Content>

I want this thing only on single page.

please help me....

thnx

Posted 3-May-12 1:44am

deepa5

Add a Solution

Comments

[no name] 3-May-12 8:21am

You don't need to post everything, only the most relevant parts.

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

surendersinghprajapati · Answer 1 · 2012-09-21T03:47:00

Try using Jquery
First create a div element and assign an ID to it. I have assigned ID as "dvLoading". This div element will be used to show the loading icon.
1

Now create a style which will be applied to the div element. Basically, this CSS style will set the div position in the middle of the page and also assign width and height. And the background of the div will be an loading gif image.
01
#dvLoading
02
{
03
background:#000 url(images/loader.gif) no-repeat center center;
04
height: 100px;
05
width: 100px;
06
position: fixed;
07
z-index: 1000;
08
left: 50%;
09
top: 50%;
10
margin: -25px 0 0 -25px;
11
}
Now, comes the jQuery part. The div element will be always visible but we need to hide it as soon as our page is loaded completely. In this case, we can't use $(document).ready() to show the loading div. Read here why? Therefore, we need to use window.load event to hide the loading div element. Remember to put this code before closing head tag.
1
<script>
2
$(window).load(function(){
3
$('#dvLoading').fadeOut(2000);
4
});
5
</script>
That's it!!!!!

Not Active · Answer 2 · 2012-05-03T02:20:00

Solution 1

Try looking through this http://www.dotnetcurry.com/ShowArticle.aspx?ID=227[^]

Posted 3-May-12 2:20am

Not Active

Comments

deepa5 3-May-12 8:54am

i have already use this.but i want to this on page load when any of control is click not a particular a button click

yashaswikvk · Answer 3 · 2012-09-21T00:54:00

Solution 2

Try This simple and Easy http://yash-maneel.blogspot.in/2012/05/show-processing-image-when-click-on.html[^]

Posted 21-Sep-12 0:54am

yashaswikvk

Updated 21-Sep-12 0:55am

v2

compninja25 · Answer 4 · 2012-09-21T14:34:00

Solution 4

Not sure if you're still looking for something, but I made a plugin a little bit ago that sounds like it might do the trick. You just call the plugin and it will pop up a 'loading' window in the center of the page.

https://github.com/compninja28/LoadingPopUp

Posted 21-Sep-12 14:34pm

compninja25