Monday, November 25, 2013

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">

and then a page that uses the master page:
 ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server">
 runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0>


    
share|improve this question
 
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
add comment

2 Answers

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.
share|improve this answer
 
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
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");
    });
});
share|improve this answer
 
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
add comment

No comments: