Click here to Skip to main content
Click here to Skip to main content

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

, 17 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Example of enabling loader image on button click and (closing or disabling) from code-behind

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. 

License

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

Share

About the Author

Nandakishore G N
Software Developer Canarys Automation Pvt Ltd
India India
Software Engineer in Canarys Automation Pvt Ltd, Bangalore, India.
 
My Blog gnnrao.blogspot.in

Comments and Discussions

 
QuestionNice post PinmemberTridip Bhattacharjee17-Dec-13 3:50 
AnswerRe: Nice post PinprofessionalNandakishorerao17-Dec-13 4:07 
BugToo many DIVs PinmemberSuMMeR.0216-Dec-13 4:44 
GeneralRe: Too many DIVs PinprofessionalNandakishorerao16-Dec-13 17:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 17 Dec 2013
Article Copyright 2013 by Nandakishore G N
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid