Add div while ajax loading

Question

I put this code:

<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script type="text/javascript">
 $(document).ajaxStart(function() {
  $("#loading-image").show();
});

$(document).ajaxStop(function() {
  $("#loading-image").hide();
});

on the top of the page...

and I have HTML:

<body style="">
<div id="loading-image" style="width:100%; height:100%; background:#ccc; display:none;"></div>

But I dont see ID loading image on ajax... What can be a problem here?

Does your #loading-image need to have an image as a child, and that image's source (URL) set before showing the div? — RichS
– RichS, Commented Apr 10, 2014 at 22:20
but look on the div style - width and height and background ... — gmaestro
– gmaestro, Commented Apr 10, 2014 at 22:21

Volte · Accepted Answer · 2014-04-10 22:32:47Z

2

From the limited amount that you posted, it doesn't look like you're actually making an AJAX request. http://jsfiddle.net/volte/A66C8/

Try then making an ajax call when the page loads:

$.ajax({
  url: "test.html",
  context: document.body
});

Disclaimer: I have not tested this. Pulled from http://api.jquery.com/jQuery.ajax/

In addition, make sure you wrap those methods in an onload. Most people do:

(function() {
  //... your code here ...
  //... will be run on load...
});

edited Apr 10, 2014 at 22:32

answered Apr 10, 2014 at 22:23

Volte

1,92519 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zero298 Over a year ago

$.ajax() will make the ajax call. However, .ajaxStart() will wrap the ajax start event. The code that showed the ajax call may not have been relevant to the error.

Volte Over a year ago

Dunno why my answer got down voted. See here: jsfiddle.net/volte/A66C8 it works just fine when you actually make an ajax call, otherwise why would it ever show?

Federico Dorfman · Accepted Answer · 2014-04-10 22:23:58Z

1

The code doesn't seems to have anything wrong, make sure that those methods are in fact beeing called whenever you use ajax, put a breakpoint in the element inspector. Also check if when you manually remove display:none from the "loading-image" div you can see it on the screen, just to be sure.

answered Apr 10, 2014 at 22:23

Federico Dorfman

1338 bronze badges

4 Comments

gmaestro Over a year ago

This also dont work: $(document).ajaxStart(function() { alert ('RADI'); });

gmaestro Over a year ago

MY CODE WORK WHEN I PUT THEM ON BOTTOM ON THE PAGE :) FUNNY

Federico Dorfman Over a year ago

Well, then your problem probably is in the ajax code that you didn't post. Check if it is correct. Also check if a variable named "global" is on your ajax code and it isn't false, if it is not there then by default is true. It is a flag that allows the methods ajaxStop and ajaxStart to be called. Check the documentation for more information [link]api.jquery.com/jQuery.ajax

zero298 Over a year ago

If the problem is that it only ran when you put it on the bottom of the page, then you need to see the comment about wrapping your code in a document ready function like $(function(){...}) similar to what @Volte describes in his second code block.

Collectives™ on Stack Overflow

Add div while ajax loading

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related