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 this with jquery?

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;
});

Answer 1

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/