change cursor to busy while page is loading

Question

I understand how to use javascript to change the cursor to busy while the page is making and ajax call.

However I have a page that does not use ajax, it uses a postback to reload the page. However the load is rather data intensive and it takes a few seconds. During this time the user can still click on the page. I want to turn the cursor to "waiting" so the user does not try to click on the page.

For example I have a couple of dropdowns that cause postback. I make a selection and the page loads for 3 seconds. While it loads I would like the cursor to turn to waiting so the user does not try to make a selection on a second dropdown until the page reloads.

Is this possible?

Additional Info: (simplified version of my setup)

I have a masterpage:

<form id="form1" runat="server">
<table width = "100%" bgcolor="White">
<tr><td>
<h3><asp:ContentPlaceHolder id="MAIN" runat="server"></asp:ContentPlaceHolder></h3>
</tr></td>
</table>
</form>
<script type="text/javascript">
    function cursorwait(e) {
        document.body.style.cursor = 'wait';
    }

    var fm = document.getElementById('<% =form1.ClientID %>');
    if (fm.addEventListener) {
        fm.addEventListener('submit', cursorwait, false);
    }
    else {
        fm.attachEvent('onsubmit', cursorwait);
    }
</script>

and then a page that uses the master page:

<asp:Content ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server">
<table runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0>
<tr><td>
    <asp:DropDownList...
    <asp:DropDownList...
</td></tr>
</table>
</asp:content>

It's those Dropdownlists that are doing the postbacks during which I want the wait cursor. — kralco626, Oct 29 '10 at 17:08
I mean really, anytime the page is loading it would be nice if I could get the wait cursor, regardless if why it is waiting... — kralco626, Oct 29 '10 at 17:09

score 7 · Answer 1 · answered Oct 29 '10 at 16:14

7

I am not certain if this is the best or most efficient method but if you want to change the cursor to show the page is busy after the button click the following jQuery should do the trick:

$(document).ready(function() {
    $(".button").click(function() {
        $("*").css("cursor", "wait");
    });
});

answered Oct 29 '10 at 16:14

Andy Rose

16,770
7
43
49

great solution, unfortunately just not to the problem I have. I don't just have one button that could cause the postback, I have several object and many events. I'll defiantly keep this in mind for when I'm using JQuery though. – kralco626 Oct 29 '10 at 17:00

score 5 · Accepted Answer · edited May 19 '13 at 00:09

5

you can add a handler to the form's submit event.

CSS

    .wait, .wait * { cursor: wait; }

JavaScript

function cursorwait(e) {
    document.body.className = 'wait';
}

var fm = document.getElementById('<% =form1.ClientID %>');
var proxySubmit = fm.onsubmit;

fm.onsubmit = function () {
    cursorwait();
    if (proxySubmit) {
        proxySubmit.call(fm);
    }
}

here we're ensuring our method gets called if submit() is called in js like the drop down does when it causes a postback. this should also catch any other instances of the form submitting.

edited May 19 '13 at 00:09

Dave Jarvis

30,436
41
178
315

answered Oct 29 '10 at 16:17

lincolnk

11,218
4
40
61

I like this idea. I placed the script into my masterpage. However I got an error when the line: fm.addEventListener saying that object is expected. I have a form called form1 in my masterpage but not in my child pages. How would I workaround that? – kralco626 Oct 29 '10 at 16:35
I tried using var fm = $('#form1'); but I got an error on line fm.attachEvent('onsubmit', cursorwait); saying that this opbject does not support this. – kralco626 Oct 29 '10 at 16:36
are you placing the script after the form on the page? use the name of whatever form contains the controls you're concerned with. `$('#form1')` gets a jquery object, not a dom element. – lincolnk Oct 29 '10 at 16:41
I used the code you posted and placed it after the form in the aspx page. No errors. However nothing happens either. Do i need to put the container that direct contains the object doing the postback? Form is the parent container for everything on the page. I'll post in my question the setup I have. – kralco626 Oct 29 '10 at 17:04
the script should be on the master page since that's where the form control is. put the script block right after the closing form element. it sounds like you put it on the content page which I don't think should work. – lincolnk Oct 29 '10 at 17:24
alright, it looks like having a dropdownlist cause a postback is not submitting the form but is doing something else. i'll poke around some more. – lincolnk Oct 29 '10 at 18:16
That works pretty well. It does work for the most part when I postback via a dropdown or radio button. However I don't get the wait curser when I change pages via a javascript menu. Any ideas on how to do that? – kralco626 Oct 29 '10 at 19:32
That sounds like a different situation and I think that's going to be very implementation specific. I don't have anything useful to suggest for that. – lincolnk Oct 29 '10 at 19:47
Thanks! For me it was the ".wait *" selector that fixed my problem. perfect, thanks. – Tom Carnell Mar 18 '14 at 22:15

score 1 · Answer 3 · edited Sep 17 '14 at 08:30

1

Just give each button a class, say "WaitOnClick", then just write it: $(".WaitOnClick").click(function() {

edited Sep 17 '14 at 08:30

David Arenburg

91,361
17
137
196

answered Sep 17 '14 at 08:09

RBS_Gimmel

21
1
5

change cursor to busy while page is loading

3 Answers3

CSS

JavaScript

Linked