$.ajaxStart() not firing

If you use the above to show a nice loading message when an AJAX call is performed, you may have come across the problem that a JSONP request means the call is not called. This is due to the fact the ajaxStart() function is triggered by a internal XMLHttpRequest and the JSONP request uses a script tag instead (for XSS safety)

There is a way round this though. Use the $.ajaxSetup() function:

$(document).ready(function() {
    $.ajaxSetup({
        'beforeSend' : function() {
            $('pleasewaitelement').show();
        },
    'complete'   : function() {
            $('pleasewaitelement').hide();
        }
    });
});

This is a default for $.ajax() calls, and unless your AJAX call specifies a beforeSend or complete function, then the defaults above will show. If you did have to use a different beforeSend or complete callback, then just add in the relevant code for the hiding/showing.

Easy.

2 comments on “$.ajaxStart() not firing

  1. Alkingson September 23, 2014 2:46 pm

    Thank you was looking for this

  2. Amol Bhavekar March 20, 2017 7:30 pm

    Great one.. thank you for your post Chris!!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>