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

4 comments:

oakleyses said...

louis vuitton handbags, oakley sunglasses, louboutin, longchamp outlet, nike shoes, louis vuitton outlet stores, chanel handbags, burberry outlet, prada outlet, jordan shoes, tiffany and co, michael kors outlet, tory burch outlet, louis vuitton outlet, longchamp handbags, nike free, true religion jeans, michael kors outlet, kate spade outlet, polo ralph lauren outlet, tiffany and co, prada handbags, polo ralph lauren outlet, michael kors outlet, michael kors outlet, longchamp handbags, oakley sunglasses, ray ban sunglasses, kate spade handbags, burberry outlet, louis vuitton outlet, louboutin outlet, louboutin, coach factory outlet, air max, air max, coach outlet, gucci outlet, christian louboutin shoes, michael kors outlet, coach purses, ray ban sunglasses, michael kors outlet, louis vuitton, coach outlet store online, true religion jeans, oakley sunglasses cheap

oakleyses said...

ralph lauren, lululemon, air max, hollister, north face, nike air max, polo lacoste, vanessa bruno, timberland, vans pas cher, louboutin, louis vuitton, oakley pas cher, air max pas cher, nike roshe run, air max, true religion outlet, barbour, sac longchamp, air force, hollister, sac louis vuitton, nike free, polo ralph lauren, nike trainers, louis vuitton uk, nike roshe, sac hermes, longchamp, michael kors, sac burberry, sac guess, mulberry, new balance pas cher, converse pas cher, sac louis vuitton, hogan outlet, nike tn, north face, true religion outlet, ray ban pas cher, michael kors, air jordan, nike blazer, nike free pas cher, michael kors pas cher, abercrombie and fitch, ray ban sunglasses

oakleyses said...

mac cosmetics, mont blanc, marc jacobs, canada goose outlet, nike huarache, vans shoes, soccer jerseys, hollister, giuseppe zanotti, beats by dre, abercrombie and fitch, longchamp, insanity workout, celine handbags, bottega veneta, ghd, nfl jerseys, north face outlet, chi flat iron, ugg boots, birkin bag, ugg australia, canada goose, herve leger, ugg pas cher, rolex watches, valentino shoes, canada goose uk, canada goose, ferragamo shoes, canada goose, ugg boots, uggs outlet, north face jackets, soccer shoes, asics running shoes, new balance shoes, p90x, lululemon outlet, canada goose jackets, mcm handbags, instyler, babyliss pro, ugg, wedding dresses, jimmy choo outlet, reebok outlet, nike roshe run

oakleyses said...

parajumpers, karen millen, air max, converse, pandora charms, moncler, louboutin, moncler, links of london, lancel, juicy couture outlet, oakley, hollister, pandora charms, supra shoes, thomas sabo, canada goose, gucci, wedding dresses, timberland boots, swarovski crystal, air max, coach outlet store online, moncler, ray ban, canada goose, moncler, ugg, louis vuitton, swarovski, hollister, montre homme, moncler, hollister clothing store, ralph lauren, rolex watches, moncler outlet, moncler, iphone 6 cases, baseball bats, juicy couture outlet, toms shoes, vans, pandora jewelry, ugg, converse shoes