Example of showing loader using jQuery and closing from code-behind

• Download JqueryLoader.zip - 241.2 KB

Introduction 

Loader are frequently used in web-application or website. The example here shows the enabling of loader image from Jquery and closing the loader image with overlay from code-behind. 

Background 

Generally, Web developers will be using Loader image when there is some event occurred or precisely, whenever the event takes more time to execute the code we use this loader image to buy some time from the user.

Using the code 

The HTML part of the code design is 

<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" 
            onclick="ButtonSubmit_Click" /> 

In this example, on Button_click the loader image displays. 

 <div class="loading" align="center" id="modalSending">
    <img src="images/loader.gif" width="200px" />
</div> 

 The mentioned div contains the loader image which displays image with overlay.

function ShowSendingProgress() {
 	var modal = $('<div  />');
    modal.addClass("modal");
    modal.attr("id", "modalSending");
    $('body').append(modal);
    var loading = $("#modalSending.loading");
    loading.show();
    var top = '215px';
    var left = '560px';
    loading.css({ top: top, left: left, color: '#ffffff' });
    
} 

The above mentioned script appends the image to the body with the mentioned position. 

function StopProgress() {
 
    $("div.modal").hide();
 
    var loading = $(".loading");
    loading.hide();
} 

The above mentioned script removes the image from the body. 

System.Threading.Thread.Sleep(3000);//moving system to sleep to enable loader
ScriptManager.RegisterStartupScript(this, this.GetType(), "stop loader", 
   "StopProgress();alert('loader removed from code-behind');", true); 

In the code-behind, on button click I have added code to remove the loader on completion of the code execution.   

Using inside ajax update-panel

 This can be used inside updatepanel but need little modification in Button Click i.e. instead of calling through jquery onclick function add the function ShowSendingProgress() onclientclick because, once the page dom is created the ajax update-panel updates only the required panel. 

 <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmit_Click" OnClientClick="javascript:return ShowSendingProgress();" /> 

 I hope this will be helpful for the beginner.