jQuery/CSS does not work to show the busy cursor consistently-CodePudding

I have a project in which I use ajax to get elements on my pages. I wanted to change the mouse cursor to the "busy cursor" during certain ajax events that take a bit of time to complete.

In order to accomplish this, I have added the following to my css file:

html.wait, html.wait * {
   cursor: wait !important;
}

To add and remove the class, I have added the following to the spots in my xhtml files where the ajax events occur:

onstart="$('html').addClass('wait');"
oncomplete="$('html').removeClass('wait');"

The xhtml files include a template xhtml file that has a link to the css file.

The first time that I tried running the project after I added this, it worked perfectly, but later, after I had signed out of my computer and then signed back in, it no longer works. I had not made any other changes to the project. I have tried figuring out what might be causing the issue for hours, but I do not see consistency. After signing in and out of the computer a number of times, it worked properly for 2 of the sessions. When it does work properly, it works properly the entire session that I am signed in. It works properly for all of the ajax event instances. I can copy the project, import it into another Eclipse environment and it still works. Once I sign out, there is not a guarantee that it will work the time after.

I am not sure that this would matter, but for context, my project is using PrimeFaces and JSF 2.2.9.

The fact that it works sometimes but not others without making any code changes really confuses me. If anyone has any general advice on what could be causing this, I would greatly appreciate the help. If there is some other information that is relevant for me to share, please let me know.

CodePudding user response：

run this and observe with your mouse before the page loads

  $.ajax({
   beforeSend: function(){
      $('html').addClass('wait')
   },
   complete: function(){
       $('html').removeClass('wait')
       $('p').html('ajax load complete');
   }  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.wait{
   cursor: wait !important;
}
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

CodePudding user response：

I (almost) got it! You have to move your mouse in order to see cursor change. And even then it's not consistent.

function do_ajax() {

  try {

    $.ajax({
      beforeSend: function() {
        $('body').addClass('wait')
      },
      complete: function() {
        $('body').removeClass('wait')
      }
    });
  } catch (e) {}
}

do_ajax();

body.wait,
body.wait {
  cursor: wait !important;
}

body {
  background-color: lightblue;
  text-align: center;
}

h1 {
  color: white;
}

p {
  font-family: verdana;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>

  <h1>You have to move your mouse</h1>
  <p>In order to see cursor change</p>
  <button onclick="do_ajax()">do_ajax()</button>
</body>