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:


 id="form1" runat="server">
 width = "100%" bgcolor="White">



 id="MAIN" runat="server">

Dave Jarvis · Accepted Answer · 2013-05-19 00:09:39Z

up vote3down voteaccepted

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 at 0:09

Dave Jarvis
11.3k1160140

answered Oct 29 '10 at 16:17

lincolnk
6,16721123

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

show 5 more comments

Andy Rose · Answer 2 · 2010-10-29 16:14:29Z

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");
    });
});

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

Kumar's Blog

Monday, November 25, 2013

change cursor to busy while page is loading

id="MAIN" runat="server">

2 Answers

CSS

JavaScript

No comments: