php - Trying to show a Spinner image during Ajax call but it won't work unless I'm in debug mode

I have an Ajax call and I want to display a spinner img while it runs. There are numerous posts here about the topic and it seems pretty simple. I went withbeforeSend andcomplete as it looked simple and efficient.

Here's my div:

<div id="loading" style="align:center;display:none;">
    <img src="img/loader-spinner.gif"/>
    <p>Copying level file data from Production...</p> 
</div>
Copy code

And here's the code (triggered via a button click, works fine):

$.ajax({
        type: "POST",
        url: "copypuzzleprod.php",
        data: {gid: level_gid },
        beforeSend: function () {
          $('#loading').show();
        },
        complete: function () {
          $('#loading').hide();
        },
        success: function(msg){
          $("#alertok").fadeTo(2000, 500).slideUp(500, function(){
            $("#alertok").slideUp(500);
        });
        },
        fail: function(xhr, textStatus, errorThrown){
          $("#alertfail").fadeTo(2000, 500).slideUp(500, function(){
            $("#alertfail").slideUp(500);
        });
        }
    });
Copy code

The ajax call works fine but it won't show the spinner image. If I run it in debug mode via the console I can see it work as it steps throughbeforeSend andcomplete and shows and then hides the spinner image. But if I close the console, it never shows the spinner. What am I missing? Thanks for any pointers.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.