How to change a cursor to wait while table is loading

Question

So I created a refresh button that calls a function called refreshTable(). The table it refreshes contains a large amount of data so I want the cursor to change to a wait cursor until the table is done loading.

Currently I have:

<asp:Button ID="RefreshBtn" Text="Refresh" OnClick="refreshTable" style="cursor:wait" runat="server"/>

which changes the cursor to wait when I hover over top of the button rather than when I click on it. Any idea what I'm doing wrong?

Answer 1

You can achieve it with javascript (probably embedding it into your existent refreshTable() function).

first, pass the button object to your function in onclick by adding this:

<asp:Button ID="RefreshBtn" Text="Refresh" OnClick="refreshTable(this)" runat="server"/>

Then simply apply the style to it only when the function is called:

//the var btn is the button that you clicked
refreshTable(btn){
//...

btn.style.cursor = 'wait';

Answer 2

Unfortunately none of the answers above worked for me. I did however find the answer here: http://forums.asp.net/t/1324613.aspx

So in the Page_load, I added the following line:

this.RefreshBtn.Attributes.Add("onClick", "refreshTable()");

then in my refreshTable() I added:

document.getElementById("RefreshBtn").style.cursor = "wait";

Answer 3

You will have to add a div absolute positioned with cursor: wait on top of everything for the time loading happens. For example add a div with the following css:

.wait-layer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: wait;
    z-index: 100
}

That way the whole screen will have the waiting cursor