How to end my ajax-loader.gif?

Question

I'm using OpenCart, and I have a series of AJAX calls that are hidden to the user and take a little time to load. I want to display an ajax-loader gif, but I'm a newbie and don't know how to write the code. The AJAX calls start when they click a checkout button and are taken to the checkout page. The ajax-loader.gif would be on the checkout page, and would end when the AJAX runs and the appropriate information populates a div on the page.

I really know next to nothing about AJAX. Please prompt me for more details if you need them.

My attempt at showing/hiding the div's background image:

<script language="Javascript" type="text/javascript">
  $('#confirm.checkout-heading').css("background-image", "url('../image/ajax-loader.gif')");
  $.ajax({
    url: 'opencart/index.php?route=checkout/checkout',
    success: function(data) {},
    failure: function(){},
    complete: function(){ $('#confirm.checkout-heading').css("background-image", "none"); }
  });
</script>

CSS:

#confirm .checkout-heading {
    background: #fff url('../image/ajax-loader.gif') 98% 50% no-repeat;
}

[What have you tried?](http://stackoverflow.com/faq#dontask) — John V., Mar 24 '12 at 19:50
Nothing yet, @AlexLunix. I know, lame. I just don't even know where to start. I've looked up some tutorials, etc., but I think my needs are too specific. I have the ajax-loader.gif in place, I just need to know how to shut it off once the div shows... — blackessej, Mar 24 '12 at 20:13
@AlexLunix I've tried something now, with the help and direction of Artjom. Can you help me understand what I'm doing wrong? — blackessej, Mar 24 '12 at 22:29

score 2 · Accepted Answer · answered Mar 24 '12 at 19:52

2

if you use jquery, then it you could end either with success, error or any case..

$('#loader').show();
$.ajax({
  url: 'backend.php',
  success: function(data) {},
  failure: function(){},
  complete: function(){ $('#loader').hide(); }
});

answered Mar 24 '12 at 19:52

Artjom Kurapov

6,115
4
32
42

Thanks for posting. What part of the js hides the .gif when `$('#loader').show();` is true? – blackessej Mar 24 '12 at 20:10
well obviously with .show() you show spinner that should have loader id, and with .hide() you hide it. By default however, you should show or hide this logo with css and call this code only when you post or click something – Artjom Kurapov Mar 24 '12 at 20:37
OK, forgive my ignorance. My image is simply called ajax-loader.gif and it is set as the css background image of `#confirm`, the div where the content eventually loads. How do I fit them into the jquery script? – blackessej Mar 24 '12 at 20:53
right. well if you use background image then instead of showing and hiding some image, you can change background.. like `$('#confirm').css("background-image", "url(/ajax-loader.gif)");` and then resetting it to empty to hide – Artjom Kurapov Mar 24 '12 at 21:17
thought I had it figured out, but I guess I jumped the gun. I've edited my code in the question to show what I've tried to accomplish... – blackessej Mar 24 '12 at 22:25
you need space inside '#confirm .checkout-heading' – Artjom Kurapov Mar 24 '12 at 22:34
I'm still seeing the gif image after the page has loaded...any idea why? – blackessej Mar 24 '12 at 22:46

How to end my ajax-loader.gif?

1 Answers1