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

Ubuntu/Unix Console Command -Cheat Sheet

M ost popular Linux/Unix command those are required to know during working on Linux/Unix environment. Primarily, when I started the work on ubuntu, I faced a common problem that was not familiar to know about the basic ubuntu command. After that, I aggregate basic commands and work very well. Besides that, most of the time forgot the command and this helps me to cut-down googling time. Privileges SL Command Use / Description 1 sudo command Run command as root 2 sudo -s Open a root shell 3 sudo -s -u user Open a shell as user 4 sudo -k Forget sudo passwords 5 gksudo command Visual sudo dialog (GNOME) 6 kdesudo command visual sudo dialog (KDE) 7 sudo visudo edit /etc/sudoers 8 gksudo nautilus root file man...
Post a Comment
Read more