I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs

Question

I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs.when user enters some value in a textbox and textchange event occurs or when user loses the focus on that textbox,system checks values in databases.I want to give user a progress indicator type when query is in progress, how can i accomplish with jquery.

ok i am pasting a little code here.

$("#Txturl").blur(function() {

  $.ajax({
        type: "POST",
        url: "Default.aspx/Getvalue",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,


        success: function(msg) {

            ///to to do here? i ve no idea;                       

} }); return false; });

enter code here

Answer 1

Not sure how every other site does it, but I would show an animated GIF on the textchange event and hide it in the AJAX success (or failure) function.

Have a hidden div with your animated GIF.

<style>.hidden { display: none; }</style>
<div class="hidden"><img src="spinner.gif" /></div>

Then show it on change and hide it in the success or error callback.

$('#mytextbox').change(function(){
    $('#divwithGIF').show();
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/Getvalue',
        data: '{}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: true,
        complete: function(msg){
            $('#divwithGIF').hide();
        };
    });
});

Repeat for the blur() event.

Answer 2

This is relatively straightforward. You would start by creating the animated GIF for your indicator (or download a freely available one) and add it to your site. Then in your Javascript, you would add something closely resembling the following:

$('#yourTextBox').change(
    function(){
        $("#yourProgressImg").show(); 
        $.ajax({
            type : "get",
            url : <your request uri>,
            success: <what to do if it comes back happy>
            fail: <what to do if it fails>
            complete: function(){ $("#yourProgressImg").hide(); }
        });
     }
); 

The complete functionality of the $.ajax() function is here: http://api.jquery.com/jQuery.ajax/

Answer 3

See my answer on this one: http://stackoverflow.com/questions/3095740/jquery-submit-and-loading-gif/3095817#3095817 for an example of how you can construct a global (on the page) event monitor for ajax to display an animated gif as you describe. You can customize this as you wish for your events.