Jquery in asp.net with AJAX

Question

I have a Dropdownlist (id=ddl) in asp.net which updates data async via Ajax. Now I want to show Loading Panel only when the Ajax Request has been Initialized. So what will be the best option?

This Code is not working...

$("#ddl").ajaxStart(function () { ShowLoadingPanel(); }).ajaxStop();

Answer 1

For specific AJAX call:

$.ajax({..., beforeSend: function(){ /* show the loading thing */ },
    complete: function(){ /* hide the loader */ }});

General:

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

My personal best jQuery “Please Wait, Loading…” animation?:

// a bit modified for jQuery 1.8 and error handling (CSS and instruction at the link)
    $(document).on(
        {
            ajaxStart : function()
            {
                if (!$('div.modal').length)
                {
                    $('body').append($('<div>',
                    {
                        'class' : 'modal'
                    }));
                }

                $('body').addClass("loading");
            },
            ajaxStop : function()
            {
                $('body').removeClass("loading");
            },
            ajaxError : function(e, x, settings, exception)
            {
                var message, statusErrorMap =
                {
                    '400' : "Server understood the request but request content was invalid.",
                    '401' : "Unauthorised access.",
                    '403' : "Forbidden resouce can't be accessed",
                    '500' : "Internal Server Error.",
                    '503' : "Service Unavailable."
                };

                if (x.status)
                {
                    message = statusErrorMap[x.status];
                    if (!message)
                    {
                        message = "Unknow Error.";
                    }
                } else if (e == 'parsererror')
                {
                    message = "Error.\nParsing JSON Request failed.";
                } else if (e == 'timeout')
                {
                    message = "Request Time out.";
                } else if (e == 'abort')
                {
                    message = "Request was aborted by the server";
                } else
                {
                    message = "Unknow Error.";
                }

                alert(message);
            }
        });

Answer 2

// Global functions to show/hide on ajax requests

 $(document).ajaxStart(function() {
   ShowLoadingPanel();
 });

$(document).ajaxStop(function() {
    HideLoadingPanel();
 });

Or bind it with the particular item

 $("#ddl").bind("ajaxStart", function() {
   ShowLoadingPanel();
 });

 $("#ddl").bind("ajaxStop", function() {
   HideLoadingPanel();
 });

and when u r finished with ajax call perform unbind

$("#ddl").unbind();