Animation for "please wait" isn't loading with jQuery

Question

I got this image to tell people that some action is loading: http://problemio.com/img/ajax-loader.gif

Then I put this div on my page to show it:

<div id="loading">
  <p><img src="/img/ajax-loader.gif" /> Please Wait</p>
</div>

Then I put this css for it:

#loading 
{ 
    display:none; 
}

Then in my jQuery I do this:

$("#loading").show();

But it just does not render. Any idea what I am doing wrong and why it does not show up?

Here is a page example where this is supposed to happen: http://www.problemio.com/problems/problem.php?problem_id=216

Thanks!

@BookOfZeus the code is all there in view-source. If you need to log in, its [email protected]/testing — GeekedOut
– GeekedOut, Commented Nov 13, 2011 at 1:15

vinilios · Accepted Answer · 2011-11-13 01:33:45Z

1

Testing on Google hrome (by running $("#loading").show(); on developer console) seems to work fine.

Could it be that the element is placed on the bottom of the page and you just don't see it appear ?

If that's the issue try to apply the following styles on your css

#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  padding:0 20px;
}

Also you should probably change the logic of the appearance of the block to the following

Show the loader immediately when the user clicks a link that triggers an ajax call
Do the ajax call
Ajax call gets completed (error or success)
Hide the loading div

Continue with the error/success handler

$('#add_attempted_solution').bind('submit',function() {

// pre ajax call code

$("#loading").show();
$.ajax({
    type: "POST",
    url: "/auth/check_login.php",
    dataType: "json",
    success: function(data) {
        $("#loading").hide();

        // success handling
        ......
        ....
    },
    ...
    error: function() {
        $("#loading").hide();

        // error handling
        ....
        ...
    }
    ...
})

}

edited Nov 13, 2011 at 1:33

answered Nov 13, 2011 at 1:15

vinilios

8717 silver badges15 bronze badges

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

7 Comments

GeekedOut Over a year ago

I think the placing might be a problem, but isn't that sort of a thing supposed apprar right in the middle of the screen, no matter where it is in the html?

GeekedOut Over a year ago

oh yeah it appears now - take a look at the link. But how do I make the js work to make it appear in the AJAX/jQuery? :)

GeekedOut Over a year ago

you know whats happening, the image IS appearing, but for a split second and then it disappears while the AJAX still takes a few seconds to load. Would you know why that might be happening?

GeekedOut Over a year ago

would it have something to do with the asynchronicity of the AJAX call? seems its still thinking, but the end of the function is reached pretty quickly.

vinilios Over a year ago

do you hide the #loading div anywhere else except inside the error/success ajax callbacks ?

|

eth0 · Accepted Answer · 2011-11-13 01:20:19Z

1

There is a problem in your code somewhere along the line. If you type javascript:$("#loading").show(); in to your browsers address bar it displays the div fine. Move your JS code to the bottom of the document (before the closing body tag), make sure you have semi-colons where necessary (I've seen a few missing), triple check your code.

More specifically the AJAX request to /auth/check_login.php isn't firing the success callback, try using the complete callback.

answered Nov 13, 2011 at 1:20

eth0

5,1473 gold badges39 silver badges49 bronze badges

2 Comments

GeekedOut Over a year ago

I am a little confused - I thought the check_login.php call didn't matter since the show() call I am making is before that.

GeekedOut Over a year ago

Ah yeah, just placed it outside the call, but it is still not rendering :(

Collectives™ on Stack Overflow

Animation for "please wait" isn't loading with jQuery

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related