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!

Answer 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
          ....
          ...
      }
      ...
  })
  

  }