How to show spinner on ajax call

Posted By : Sudhir Kumar Ojha | 31-Oct-2017

jquery

Ajax

also knew as synchronous JavaScript and XML.It is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications. With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.And spinner will help you to feel that some action going on in the background.

The following steps are taken to create a spinner while ajax call is going on.

1). Create a spinner image or load it from ajax loader.

2). Place the image in our code where you want to show.

3). Before doing an ajax call show the image using jquery .show() method.

4). Once ajax call is completed hide the spinner using .hide() method.

Now I will show how to integrate above steps into your code.

</div>

Now create a javascript method that will do an ajax call.Please consider the following.

function updateStudent( studentId,name )
{
  $('#spinner').show();
  $.ajax({
        type: "POST",
        url: "/student/studentupdate",
        data: { studentId: studentId, name: name },
        dataType: 'json',                         
        success: function(data)
        {                
            alert("success");
            $('#spinner').hide();
        },
        error: function (response) 
        {
           $("#spinner").hide();
        }           
    });
}

Regards

Sudhir Ojha