Jquery ajaxStart doesnt get triggered

Question

This code

$("#loading").ajaxStart(function() { alert("start"); $(this).show(); });

in my mark-up

<div style="text-align:center;"><img id="loading" src="../images/common/loading.gif" alt="" /></div>

Here is the full ajax request:

$.ajax({ type: "POST", url: "http://localhost/WebServices/Service.asmx/GetResults", data: jsonText, contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { var results = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; PopulateTree(results); }, error: function(xhr, status, error) { var msg = JSON.parse(xhr.responseText); alert(msg.Message); } }); $("#loading").ajaxStart(function() { alert("start"); $(this).show(); }); $("#loading").ajaxStop(function() { alert("stop"); $(this).hide(); $("#st-tree-container").show(); });

never fires alert "start" even though the gif is shown to rotate. AjaxStop gets triggered as expected. Any ideas why?

What do you mean by "even though the gif is shown to rotate?" I don't see any markup or JS with a gif in your question. Are you invoking your ajax call with the same instance of jQuery with which your ajaxStart() handler is registered? — Drew Wills
– Drew Wills, Commented Feb 16, 2010 at 18:43

Jay Kumar · Accepted Answer · 2013-03-07 14:40:58Z

It's not getting triggered because your handler for .ajaxStart() isn't registered until after the ajax request is already going (past when it would have been called). The .ajaxStop() is registered after as well, but before the request finishes, so when it comes back it is hooked up to run.

To fix this, move this before your first $.ajax() call:

$("#loading").ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); $("#st-tree-container").show(); });

UPDATE: Starting jQuery 1.9, AJAX events should be attached to document only. http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

$(document).ajaxStart(function() { $("#loading").show(); }); $(document).ajaxStop(function() { $("#loading").hide(); $("#st-tree-container").show(); });

it will solve the problem but when we do multiple ajax call then this solution is a problem because then only same loading image probably in the wrong place will be shown . Suppose multiple call happend then how to target loading image for that particular call which initiated the call

NoobEditor · Accepted Answer · 2018-03-12 04:40:50Z

Starting jQuery 1.9, AJAX events should be attached to document only.

Refer migration guide. http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

As of jQuery 1.9, the global AJAX events (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) are only triggered on the document element. Change the program to listen for the AJAX events on the document. For example, if the code currently looks like this:

$("#status").ajaxStart(function() { $(this).text("Ajax started"); });

Change it to this:

$(document).ajaxStart(function() { $("#status").text("Ajax started"); });

tbreffni · Accepted Answer · 2010-02-16 21:22:12Z

I'm not sure if this will fix your issue, but generally I use debug.info('your message') in combination with the Firebug console instead of alert(), as alert interrupts your script processing until you dismiss it whereas debug.info is fairly unobtrusive.

You can download the implementation of debug.info here.

i have never heard of debug.info(), will it for work for IE? I am working with IE
I added a link to the library in the answer. Unfortunately it doesn't look like it will work in IE, but I would highly recommend Firefox + Firebug for debugging.

Collectives™ on Stack Overflow

Jquery ajaxStart doesnt get triggered

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions