The functionality of jQuery and CSS to display the busy cursor is not always reliable

Question

The functionality of jQuery and CSS to display the busy cursor is not always reliable

For a project I'm working on, I am utilizing PrimeFaces ajax to retrieve elements on my web pages. To enhance user experience, I wanted to change the mouse cursor to a "busy cursor" during certain PrimeFaces ajax events that may take some time to complete.

To achieve this, I included the following code in my css file:

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

To toggle the class, I inserted the following code snippets in my xhtml files where the PrimeFaces components using ajax are located:

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

These xhtml files reference a template xhtml file that links to the css file.

The initial test run after implementing these changes was successful, but later, upon logging out and back into my computer, the functionality stopped working. Despite no other alterations to the project, the issue remained inconsistent. After numerous login/logout attempts, it only worked properly for two sessions. When it does work, it remains functional throughout the session with all ajax events. Interestingly, if I copy the project and import it into another Eclipse environment, it works as expected. However, the inconsistency persists after subsequent logins.

Although unlikely related, my project is built using PrimeFaces 10.0.0 and JSF 2.2.9.

The sporadic behavior without any code modifications baffles me. Any suggestions or insights on what might be causing this would be greatly appreciated. If additional information would be helpful, please do let me know.

UPDATE

I attempted setting the global attribute to true on the PrimeFaces components while incorporating the following code:

<p:ajaxStatus onstart="$('html').addClass('wait');" oncomplete="$('html').removeClass('wait');"/>

This method also did not yield the desired outcome. As similar approaches work correctly, such as:

<p:ajaxStatus>
    <f:facet name="start">
        <h:outputText value="Sending" />
    </f:facet>
    <f:facet name="complete">
        <h:outputText value="Done" />
    </f:facet>
</p:ajaxStatus>

This suggests a potential issue with jQuery/css rather than PrimeFaces.

Update

A recent observation in the browser revealed that the updated css file with the specified line was not being utilized.

jquery css

Answer 1

Answer №1

Execute this script and watch the changes with your mouse cursor before the webpage finishes loading

  $.ajax({
   beforeSend: function(){
      $('html').addClass('waiting')
   },
   complete: function(){
       $('html').removeClass('waiting')
       $('p').html('Ajax request completed successfully');
   }  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.waiting{
   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>

Answer 2

Execute this script and watch the changes with your mouse cursor before the webpage finishes loading

  $.ajax({
   beforeSend: function(){
      $('html').addClass('waiting')
   },
   complete: function(){
       $('html').removeClass('waiting')
       $('p').html('Ajax request completed successfully');
   }  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.waiting{
   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>

Answer 3

Answer №2

It seems like I'm getting the hang of it! Moving the mouse triggers a change in cursor, but it's not always 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>

Answer 4

It seems like I'm getting the hang of it! Moving the mouse triggers a change in cursor, but it's not always 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>

Answer 5

Answer №3

It came to light that the server I had been utilizing had a cache stored in the browser, causing the css not to be updated. To address this issue, I opted to clear the browsing history. For additional solutions, refer to this post.

Answer 6

It came to light that the server I had been utilizing had a cache stored in the browser, causing the css not to be updated. To address this issue, I opted to clear the browsing history. For additional solutions, refer to this post.

The functionality of jQuery and CSS to display the busy cursor is not always reliable

Answer №1

Answer №2

Answer №3

Similar questions

Seamless shifting between different content images

Is it possible to create a blurred effect on an image while preserving the clarity of text within

unable to access information from the JavaScript file

Symfony Form Validation through Ajax Request

Constantly vibrating a container

What could be causing my jQuery getJSON function to not execute the callback function as expected?

Form with upload and submission options

Tips for creating a mandatory textarea input field

What is the best way to arrange these divs one on top of another?

Loading options dynamically in a dropdown list using KnockoutJS

Dynamic banner image

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Create a stunning wave CSS effect using the :after and :before pseudo-elements

jquery ajax file uploading issue: success function not triggering

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Display scroll bars over the position:absolute header

"Finding specific data on a list with ease - A guide to scrolling using a searchbox

The error message "Unable to access property 'x' of undefined" is appearing in the photoswipe js

What is the best way to link data from SQL Server to an HTML webpage?

I'm confused as to why my alert is not triggering after the ajax request successfully returns