0

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.

ConfusedUbuntist
  • 135
  • 1
  • 10
  • just out of curiosity, can you try to use `body` instead of `html` ? does it make any difference ? – Telman Jul 25 '22 at 21:54
  • @Telman Thanks for your comment! I just tried using body instead of html, but it does not appear to make any difference. – ConfusedUbuntist Jul 25 '22 at 23:36
  • Instead of using onstart / oncomplete on several places, use the global attribute instead. – Jasper de Vries Jul 26 '22 at 07:45
  • @JasperdeVries Thanks for your comments! I have attempted to use the global attribute instead, but I still have not had success. I did not want to change any of the edits that you made, but I do not think that the issue is with PrimeFaces not firing. I think that either the css is not loading properly or the jQuery is not executing. – ConfusedUbuntist Jul 26 '22 at 15:38
  • 1
    I doubt that there will be an issue with jQuery. Are you using async Ajax requests? Anyway, feel free revert changes. If you happen to be able to create a reproducer of this issue, please report it at the PrimeFaces GitHub repo. – Jasper de Vries Jul 26 '22 at 18:11
  • I did not define it, so whatever the default is. I will try to do it both ways and see if that makes a difference. – ConfusedUbuntist Jul 26 '22 at 20:52
  • 1
    I use ajaxStatus in all of my projects and have never seen an issue with it. Please see if you can create a reproducer using https://github.com/primefaces/primefaces-test – Jasper de Vries Jul 27 '22 at 07:34

3 Answers3

0

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>
Said Abdulsalam
  • 84
  • 2
  • 8
  • I must admit that this is not the best question. OP is not triggering Ajax requests, it's done by the PrimeFaces framework. So this will not work. – Jasper de Vries Jul 26 '22 at 07:41
  • @SaidAbdulsalam Thanks for your answer! I tried your code and it works as it should. I don't think there would be a way for me to implement that into my project though. As Jasper de Vries has said, I am not using normal Ajax requests. I originally did not have this clarified correctly in my post. Sorry for any confusion. – ConfusedUbuntist Jul 26 '22 at 16:06
0

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>
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • I must admit that this is not the best question. OP is not triggering Ajax requests, it's done by the PrimeFaces framework. So this will not work. – Jasper de Vries Jul 26 '22 at 07:41
  • Very possibly so, because it doesn't solve anything and the problem still persists. But it goes to show that this approach isn't perfect. Personally I don't like when websites change my cursor. It is also mistakable with the OS changing the cursor. I just wouldn't use this technique. – IT goldman Jul 26 '22 at 08:01
  • @ITgoldman Thanks for your answer. I think I will re-evaluate whether I want to change the cursor. Sorry for any confusion about PrimeFaces vs normal ajax calls. I didn't know there was a difference. – ConfusedUbuntist Jul 26 '22 at 13:47
0

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.

ConfusedUbuntist
  • 135
  • 1
  • 10