Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET Ajax
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.
 
<%@ 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
deepa5510
Comments
Mark Nischalke at 3-May-12 8:21am
   
You don't need to post everything, only the most relevant parts.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

  Permalink  
Comments
deepa5 at 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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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!!!!!
  Permalink  
Comments
Christiaan Rakowski at 21-Sep-12 17:41pm
   
Good solution, but it would be clearer if you used code tags and indenting in your examples.
s_sure1singh at 3-Oct-12 9:43am
   
Sure. I will next time. thanks
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

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
  Permalink  

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 547
1 Member 11120668 188
2 ChauhanAjay 180
3 Maciej Los 165
4 CHill60 135
0 Sergey Alexandrovich Kryukov 9,735
1 OriginalGriff 6,987
2 CPallini 5,835
3 George Jonsson 4,017
4 Gihan Liyanage 3,266


Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 21 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100