Start Building Professional
Web Apps Today

Progress or Hourglass Cursor during loadXML() or XMLAutoLoading()

Hi,

Is there a recommended way to have the mouse cursor change to a "progress" type whilst the xml is being loading ?

Sometimes it can take a few seconds for the treenodes to open, so I think the enduser would appreciate the visual feedback...

Many thanks!

There are two events which can be used to show any kind of "loading" message.

    http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&q=948&ssr=yes&s=onXLS

I tried it that way, but the cursor does not change...

I am not sure if I am approaching this the right way, so I attach my code.... does this seem reasonable ?


The tree is in a div with the id="treePlaces"

// loading events
treePlaces.attachEvent("onXLS",treePlaces_OnLoadingBegin);
treePlaces.attachEvent("onXLE",treePlaces_OnLoadingEnd);

function treePlaces_OnLoadingBegin() {
    // Set cursor to hourglass
    document.getElementById("treePlaces").className = "busy";
}

function treePlaces_OnLoadingEnd() {
    // Reset cursor
    document.getElementById("treePlaces").className = "";
}

// CSS
#treePlaces .busy
{ cursor: progress; }

Just change your css rule to
#treePlaces.busy
{ cursor: progress; }

The space between elements mean parent-child relation, while in your case it is the same node.

Genius!

Thank you very much!

For those like me that had problem with the css solution.

Here is one using javascript

function mygrid_OnLoadingBegin() {
    // Set cursor to hourglass
    document.getElementById("grid_container").style.cursor = "wait";
    document.body.style.cursor = "wait";

}

function mygrid_OnLoadingEnd() {
    // Reset cursor
    document.getElementById("grid_container").style.cursor = "default";
    document.body.style.cursor = "default";
}