Click here to Skip to main content
15,907,687 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a master page and a child page in an asp.net website.
On master page, I have a script manager and have connected to appropriate jquery files as under:
HTML
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>

In the content page I have some textboxes and a button inside updatepanel control. Clicking on that button partially posts back to server and fetches the data.
This much is working fine till now.
However I am facing a problem. I want to show a loader image during the partial processing which is not showing on clicking the button. On Master Page, I have placed a script manager inside form tag as under:
ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

I have created the following div for loader on content page:
HTML
<div class="loader">
    <img src="images/loading2.gif" alt="">
</div>

Here is my css for the loader image:
CSS
.loader 
{
 position: fixed;
 left: 0px;
 top: 0px;
 height: 100%;
 width: 100%;
 z-index: 9999;
 display: none;
}
.loader img
{
 display:block;
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin:auto;
}

On Content Page, I have written the Jquery as under:
HTML
<script>
    $(document).ready(function () {
        $('.loadloader').click(function () {
            $(".loader").show();
        });
    });
</script>

Note: Here loadloader is the class of the asp.net button clicking on which the partial postback occurs and loader image should show. Have a look below:
ASP.NET
<asp:Button ID="btn_apst2proceed" runat="server" ValidationGroup="st1" Text="Proceed" onclick="btn_apst2proceed_Click" class="loadloader" />

On the page load event of content page, I have written this script:
C#
if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script language='javascript' type='text/javascript'>");
    sb.Append("Sys.Application.add_load(func);");
    sb.Append("function func() {");
    sb.Append("Sys.Application.remove_load(func);");
    sb.Append("$('.loader').hide();");
    sb.Append("}");
    sb.Append("</script>");
    ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
}
Page.Header.DataBind();

Everything seems fine to me but I donot understand why the loader image is not showing on partial post back. Kindly help.

What I have tried:

Explain it in the explanation itself.
Posted

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900