ajaxStart() showing loading message doesn't seem to work

Question

I user jquery.ajax call to controller of asp.net mvc... I would like to show a loading indicator.. I tried this but that doesn't seem to work...

<div class="loading" style="padding-left:5px; margin-bottom:5px;display:none;">
      Loading...&nbsp
</div>

and my jquery ajax call looks like this,

function getMaterials(currentPage) {
    $.ajax({
    url: "Materials/GetMaterials",
        data: {'currentPage': (currentPage + 1) ,'pageSize':5},
        contentType: "application/json; charset=utf-8",
        global: false,
        async: false,
        dataType: "json",
        success: function(data) {
            var divs = '';
            $("#ResultsDiv").empty();
            $.each(data.Results, function() {
                //my logic here....              
                $(".loading").bind("ajaxStart", function() {
                $(this).show();
                }).bind("ajaxStop", function() {
                $(this).hide();
                });
            }
    });
    return false;
}

My loading indicator doen't seem to showup.. ANy suggestion....

score 4 · Accepted Answer · edited Sep 28 '11 at 19:51

4

using .ajax() you should just call:

beforeSend:  function(xmlHttpRequest){
    // show anything here
}

and

complete:  function(xmlHttpRequest, status){
    // hide it again
}

edited Sep 28 '11 at 19:51

answered May 05 '10 at 07:21

jAndy

231,737
57
305
359

score 2 · Answer 2 · edited Mar 22 '12 at 22:52

2

ajaxStart and beforeSend does work for Firefox but not for the all browsers (ie Safari) when we are sending the ajax call with async: false. I'm still finding the way for this

edited Mar 22 '12 at 22:52

Alex Lockwood

83,063
39
206
250

answered Mar 22 '12 at 08:05

bhagirath

21
1

have you found a solution to this issue? – Laurynas Mališauskas May 01 '13 at 19:19

ajaxStart() showing loading message doesn't seem to work

2 Answers2