jQuery/css does not work to show the busy cursor consistently

Issue

I have a project in which I use PrimeFaces ajax to get elements on my pages. I wanted to change the mouse cursor to the "busy cursor" during certain PrimeFaces 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 I have the PrimeFaces components that are using ajax:

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 10.0.0 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.

UPDATE

I have now tried using the global attribute set to true on the PrimeFaces components while adding the following:

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

Still, this does not show properly. I do not believe that it is an issue with the PrimeFaces as the following works properly:

<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 leads me to believe that it is an issue with jQuery/css, and not PrimeFaces.

Update

I noticed recently in the browser that it was not using the updated css file with the line shown above added.

Solution

It turns out that the server I was using was using an old cache in the browser. Therefore, the css was not being updated. The way I decided to solve this was to just clear the browsing history. See this post for more options.

Answered By - ConfusedUbuntist