javascript – Ajax loading screen not showing after first time-ThrowExceptions

Exception or error:

I am using AJAX to call a servlet from my webpage. So far so good, I have added some code to show a loading screen while the servlet is working but that works only the first time, after that, the servlet is called and I can change the cursor but the waiting screen is not working


#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.75;
    background-color: #ffffff;
    -webkit-transition: all .5s ease;
    z-index: 3000;
    vertical-align: middle;
    text-align: center;
  #loading-img {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #297bda;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;


<div id="loading">
  <div id="loading-img"></div>


$('#compare').click(function() {
//just the relevant part


I am calling to


in the .done(function (data).

As I said, the code is executed but the loading screen only loads the first time. In fact, the second time and further I am receiving null when trying to resolve the loading div.
I have also tried with

       document.getElementById("loading").style.visibility = "hidden";
       document.getElementById("loading").style.display = "none";

Instead of using the hide() but the same result.

Any idea?

How to solve:

Found it! after hours, it was my stupid mistake.
I got this

<div id="finalresults">

<div id="loading">
  <div id="loading-img"></div>

and was doing
document.getElementById(“finalresults”).innerHTML = “”;
During the ajax call, so I was deleting the loading div bercause I forgot the / in the previous div

Thanks everyone and really sorry for the mistake

Leave a Reply

Your email address will not be published. Required fields are marked *