Loading gif in jQuery ajax call is not showing

Question

I am sure this must be a basic error on my part - but I am completely failing to see it.

I have a jQuery UI dialog which I use to present a form to edit a record .. at the bottom of the html (which itself is loaded via ajax) it has a div containing an (animated loading gif). The loading div is hidden after loading the html.

The CSS puts the div in an absolute position in the bottom right corner.

When the Save button on the dialog is clicked I call a function to save the info via ajax. In the ajax call I have:

beforeSend: function() {
              $("#ajaxLoading").show();
        },
  complete: function() {
              $("#ajaxLoading").hide();
        }

The problem is that the image does not show.

If I remove the hide() after the initial dialog load, then the gif is displayed throughout.

I tried putting the show() just before the ajax call rather than in the beforeSend .. still nothing.

I tried putting the show() in the dialog setup - in the "Save" button click. Nothing.

If I put a breakpoint in the script with Chrome and step through then I DO see the gif! So, I tried putting a couple of second timeout after the show() .. but still nothing.

I have no more ideas what to try.

Answer 1

1. Create a div with your image.
2. Make it visible in jQuery.ajaxStart.
3. Hide it in jQuery.ajaxStop.