jQuery ajax loading image not hiding

Question

I am using jquery ajax to load a separate page into a modal window when a link is clicked. While the modal content is loading, I have a loading image that displays. The loading image is in a div on the page and is shown for any ajax loading on the page. This all works correctly, but I can't seem to get the image to hide after the ajax call is successful.

Here is the jquery I am using:

$('#loadingImage').ajaxStart(function(){ $(this).show(); }); $('#loadingImage').ajaxSuccess(function(){ //also tried ajaxStop $(this).hide(); }); function loadMap(){ $('#whereweare-map').click(function(){ $('#lightBox').removeClass().addClass('reveal-modal expand'); $.ajax({ url: '/Map#mapLoad', success: function(data){ $('#lightBox').reveal(); $('#lightBoxContent').html(data); } }); return false; }); } loadMap();

HTML:

<div id="imageLoading"></div> <a href="#" id="whereweare-map">Where We Are</a> <div class="reveal-modal" id="lightBox"> <div id="lightBoxContent"><!-- Load Content Here --></div> <a class="close-reveal-modal">&#215;</a> </div>

And the CSS:

#loadingImage { display:none; height:84px; width:84px; position:fixed; top:50%; left:50%; z-index: 1; background: url('preloader.gif') no-repeat center center; background-color: #000; background-color: rgba(0, 0, 0, 0.7); -moz-border-radius:45px; -webkit-border-radius:45px; border-radius:45px; }

Thanks for the help.

I'd say it's better to use ajaxComplete

Felix
– Felix

2012-09-20 03:31:55 +00:00
Commented Sep 20, 2012 at 3:31 — Felix
– Felix, Commented Sep 20, 2012 at 3:31
Just tried it with ajaxComplete and it didn't work either.

eCamK
– eCamK

2012-09-20 03:55:30 +00:00
Commented Sep 20, 2012 at 3:55 — eCamK
– eCamK, Commented Sep 20, 2012 at 3:55

BenMorel · Accepted Answer · 2013-12-02 15:32:48Z

ajaxStart and ajaxStop are global functions. SO they respond to any ajax request on the page. Instead of showing/hiding the in these functions why don't you do the same in the beforeSend and complete functions.. this makes sure the image is shown/hidden at the right times

function loadMap() { $('#whereweare-map').click(function () { var $loader = $('#loadingImage'); $('#lightBox').removeClass().addClass('reveal-modal expand'); $.ajax({ url: '/Map#mapLoad', success: function (data) { $('#lightBox').reveal(); $('#lightBoxContent').html(data); }, beforeSend : function(){ $loader.show(); }, complete : function(){ $loader.hide(); } }); return false; }); } loadMap();

Also instead of ajaxSuccess why don't you try the ajaxComplete function to hide your div..

$('#loadingImage').ajaxComplete(function(){ //also tried ajaxStop $(this).hide(); });

Just tried this and it still isn't working. Like you pointed out, I would like this to be a global function. For any ajax request on the page, I want this image to show/hide.
I cleared the cache in Firefox and this worked correctly. However, it does not work in Chrome or Safari. Any reason the browsers are handling this differently?
So I did some rearranging based off of the answer by @sushanth and got it to work in all browsers. The only thing that differs from the answer above is that, instead of using complete, I added the $loader.hide to the success function. Thanks for the help.
sure.. Not a problem. But adding it in complete makes sure it is hidden after the success function is completed

coolguy · Accepted Answer · 2012-09-20 03:28:56Z

Change your ajax like this

$.ajax({ url: '/Map#mapLoad', success: function(data){ $('#lightBox').reveal(); $('#lightBoxContent').html(data); $('#loadingImage').hide(); //hide it here } });

Developer · Accepted Answer · 2012-09-20 04:52:33Z

try the below code

 $(document).ready(function () { $('#loadingImage').hide() // hide it initially .ajaxStart(function () { $(this).show(); }) .ajaxStop(function () { $(this).hide(); }); });

Just tried this and it still doesn't hide the loader afterwards.

Legolas · Accepted Answer · 2013-02-19 13:38:06Z

$('#LoadingImage').bind('ajaxStart', function(){ $(this).show(); }).bind('ajaxStop', function(){ $(this).hide(); });

Try binding it to start and stop functions...

Collectives™ on Stack Overflow

jQuery ajax loading image not hiding

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Related