Page 1 of 1

Wait cursor

Posted: Thu Jul 06, 2017 5:39 am
by asai
Hi,

I have a form where the user input some variables.
On submit a new page opens, where I have several sql querys.
In the end of this page the results of the querys is shown in a table.
All this works very nice, however all these querys takes a few seconds.
From the moment you press the submit button, it seems like nothing is happening, like the webpage is frozen.
Is there a way to either show a wait cursor or show a animated gif?

Re: Wait cursor

Posted: Thu Jul 06, 2017 5:47 am
by requinix
Is there any way you can speed up the queries? Do you know why they're taking so long?

If you can't, which should be the first thing you try, there are a few options. Changing the mouse cursor is as simple as

Code: Select all

body { cursor: wait; }
which you can apply with a class or by setting the style directly. You should also put something more obvious on the page, like a busy indicator (spinning circles are popular these days), and you probably should also disable the form so the user cannot submit the form a second time when they get impatient.

But check the queries first.

Re: Wait cursor

Posted: Thu Jul 06, 2017 6:50 am
by shiningsun
yes. the best way is to set changing of cursor from the moment when an event happens
it is easy can be done on jquery

Re: Wait cursor

Posted: Thu Jul 06, 2017 8:30 am
by asai
requinix wrote:Is there any way you can speed up the queries? Do you know why they're taking so long?

If you can't, which should be the first thing you try, there are a few options. Changing the mouse cursor is as simple as

Code: Select all

body { cursor: wait; }
which you can apply with a class or by setting the style directly. You should also put something more obvious on the page, like a busy indicator (spinning circles are popular these days), and you probably should also disable the form so the user cannot submit the form a second time when they get impatient.

But check the queries first.
Yes this is probably a good solution, but where do I put it?
In the page where the users data and submit button or the file containing the querys?
I tried from the first page, but nothing happened. Could be something wrong with my code..
I want the cursor to change when the submit button is pressed and change back to normal when the second page is finished loading.

Re: Wait cursor

Posted: Thu Jul 06, 2017 8:49 am
by asai
Solved it :D

Heres my solution:

Code: Select all

<input type="submit" value="Show result" onclick="ChangeCursor()">
And this:

Code: Select all

<script>
function ChangeCursor(){
document.body.style.cursor = 'wait';
}
</script>