-1

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

2 Answers 2

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);
            }
        });
Sign up to request clarification or add additional context in comments.

Comments

0

// 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();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.