Skip to main content

How to display simple jquery loader/spinner using ajax?

Showing loading image indicator when ajax calling and also loading display off when ajax get response.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#divLoadingd").css("display", "block");
    });
    $(document).ajaxComplete(function(){
        $("#divLoadingd").css("display", "none");
    });
    $("button").click(function(){
        $("#txt").load("demo_ajax_load.asp");
    });
});
</script>
</head>
<body>

<div id="txt"><h2>Let AJAX change this text</h2></div>

<button>Ajax Call</button>

<div id="divLoadingd" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading..</div>

</body>
</html> 


Note: Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart()method are executed at this time

 $(document).ajaxStart(function(){
        $("#divLoadingd").css("display", "block");
    });

The ajaxComplete() method specifies a function to be run when an AJAX request completes.

$(document).ajaxComplete(function(){
        $("#divLoadingd").css("display", "none");
    });


Labels:

Comments

Post a Comment

Popular posts from this blog

What are the difference between DDL, DML , DCL and TCL commands?

Database Command Types DDL Data Definition Language  (DDL) statements are used to define the database structure or schema.  -           CREATE - to create objects in the database -           ALTER - alters the structure of the database -           DROP - delete objects from the database -           TRUNCATE - remove all records from a table, including all spaces allocated for the records are removed -           COMMENT - add comments to the data dictionary -           RENAME - rename an object DML Data Manipulation Language  (DML) statements are used for managing data in database. DML commands are not auto-committed. It means changes made by DML command are not permanent to d...
2 comments
Read more

Display Image Immediately from fileUpload Control

Client Side Programming is more efficient for user to very first interection Like Jquery . Now i provide some jquery script to display Image from FileUpload Control directly.. For this purpose we use reference . <script src="../../../JS/JQueryAutocomplete/jquery-1.7.2.js" type="text/javascript"></script>. You just download from jquery.com. Now code below... <script language="javascript" type="text/javascript"> /* Write FileUpload Change event .. */ $('#FileUpload1').bind('change', function() {                                 displayImage(this);                    }); //-------------------------// function displayImage(input)             {        ...
1 comment
Read more

Get Previous Month's First and Last Date -C#

Here this code, your can get previous month's first and last day. It's simple   static void Main( string [] arg) {    var year = DateTime .Today.Year;    var month = DateTime .Today.Month;    var firstDate = new DateTime (year, month, 1).AddMonths(-1);    var lastDate = new DateTime (year, month, 1).AddDays(-1);    Console .WriteLine( "First day Previous Month: {0}" , firstDate);    Console .WriteLine( "Last day Previous Month: {0}" , lastDate);    var  lastday =  GetMonthLastDate ( 2015 , 6 );   Console .WriteLine( "Last day : {0}" , lastDate);    Console .ReadLine(); } You can use below method to get last date of any month of the any year. private DateTime GetMonthLastDate( int year, int month) {     return new DateTime (year, month, DateTime .DaysInMonth(year, month)); }
Post a Comment
Read more