Busy Indicator with sorttable.js?

[eskwayrd]

Hi group,

I'm trying to add a busy indicator to the sorttable.js code available
at:
http://www.kryogenix.org/code/browser/sorttable/

(Actually, my version is modified for my needs, such as maintaining
zebra stripes post-sort, multi-column sorting, keeping rows with
subordinate rows together. But my problem exists even with the original
code).

I've implemented a function to turn change a 'progress' div:

function busyProgress(m) {
if (document.getEl ementById("prog ress")) {
var myEl = document.getEle mentById("progr ess");
myEl.innerHTML = (m) ? 'Busy, please wait...' : '';
}
}

This works great with something like an Ajax function, but with
sorttable.js, the 'progress' div's contents never change. Note that I'd
use something like document.body.c ursor.style = 'wait' as well, but
Firefox won't change the cursor style unless the mouse is moved.

If I insert an alert() right after the innerHTML line, then I see the
div's contents being changed.

If I insert a simple delay (using new Date().getTime, and looping until
the desired time has passed), the div's contents do not change.

This is a concern since a number of the tables I need to present, and
wish to allow in-browser sorting, have a few hundred rows. The sort
will complete, but I have been unable to provide a visual indicator
that the sort is in progress.

Has anyone else attempted to do this and had success?

Thanks for any assistance you can provide.

[Randy Webb]

es******@gmail. com said the following on 10/4/2005 8:59 PM:

Hi group,

I'm trying to add a busy indicator to the sorttable.js code available
at:
http://www.kryogenix.org/code/browser/sorttable/

(Actually, my version is modified for my needs, such as maintaining
zebra stripes post-sort, multi-column sorting, keeping rows with
subordinate rows together. But my problem exists even with the original
code).

I've implemented a function to turn change a 'progress' div:

function busyProgress(m) {
if (document.getEl ementById("prog ress")) {
var myEl = document.getEle mentById("progr ess");
myEl.innerHTML = (m) ? 'Busy, please wait...' : '';
}
}

This works great with something like an Ajax function, but with
sorttable.js, the 'progress' div's contents never change. Note that I'd
use something like document.body.c ursor.style = 'wait' as well, but
Firefox won't change the cursor style unless the mouse is moved.

If I insert an alert() right after the innerHTML line, then I see the
div's contents being changed.

If I insert a simple delay (using new Date().getTime, and looping until
the desired time has passed), the div's contents do not change.

This is a concern since a number of the tables I need to present, and
wish to allow in-browser sorting, have a few hundred rows. The sort
will complete, but I have been unable to provide a visual indicator
that the sort is in progress.

Has anyone else attempted to do this and had success?

Thanks for any assistance you can provide.

Call busyProgress, and set a timeout to call your sort function. The UA
does not update until the function finishes. As long as its sorting -
the UA wont change displays. The alert you use causes the function to
stop until the alert is dismissed, so the UA updates.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[RobG]

Randy Webb wrote:

es******@gmail. com said the following on 10/4/2005 8:59 PM:

Hi group,

I'm trying to add a busy indicator to the sorttable.js code available
at:
http://www.kryogenix.org/code/browser/sorttable/
[...] I've implemented a function to turn change a 'progress' div:

function busyProgress(m) {
if (document.getEl ementById("prog ress")) {
var myEl = document.getEle mentById("progr ess");
myEl.innerHTML = (m) ? 'Busy, please wait...' : '';
}
}
[...]
If I insert an alert() right after the innerHTML line, then I see the
div's contents being changed.

If I insert a simple delay (using new Date().getTime, and looping until
the desired time has passed), the div's contents do not change.

This is a concern since a number of the tables I need to present, and
wish to allow in-browser sorting, have a few hundred rows. The sort
will complete, but I have been unable to provide a visual indicator
that the sort is in progress.

[...]
Call busyProgress, and set a timeout to call your sort function. The UA
does not update until the function finishes. As long as its sorting -
the UA wont change displays. The alert you use causes the function to
stop until the alert is dismissed, so the UA updates.

That's a good idea (I think) but there are some usability issues.

Events are buffered while the function runs, so if users are impatient
and try clicks & drags in the meantime (e.g. they click on three or four
'sort' do-dads while the first is running), nothing will happen until it
finishes and then the others will run. Users may consider the
unexpected results to be the OP's fault.

The OP may want to put a div over the entire page or employ some other
tactic to prevent user intereaction with the page while the script runs.

Some play stuff below (the pause function should never be used in a real
page, it's just a quick hack to force a pause).

<script type="text/javascript">

function runThing( thing )
{
toggleMsg();
setTimeout(thin g + '(1000);', 10);
}

// This thing just pauses for a short time... hogs the processor!
function doPause( ms )
{
var now = new Date();
var t = now.getTime() + +ms;
while ( now.getTime() < t ){
now = new Date();
}
toggleMsg();
}

function toggleMsg()
{
var d = document.getEle mentById('msg')
d.style.display = ('none' == d.style.display )? '' : 'none';
}

</script>

<div id="msg" style="font-size: 300%; font-weight: bold;
position: absolute; top: 100px; left: 150px; display:
none;">Wait&hel lip;</div>

<input type="button" value="Run it" onclick="runThi ng('doPause');" >


--
Rob

[Randy Webb]

RobG said the following on 10/4/2005 11:19 PM:

Randy Webb wrote:

es******@gmail. com said the following on 10/4/2005 8:59 PM:

Hi group,

I'm trying to add a busy indicator to the sorttable.js code available
at:
http://www.kryogenix.org/code/browser/sorttable/
[...]
I've implemented a function to turn change a 'progress' div:

function busyProgress(m) {
if (document.getEl ementById("prog ress")) {
var myEl = document.getEle mentById("progr ess");
myEl.innerHTML = (m) ? 'Busy, please wait...' : '';
}
}
[...]

If I insert an alert() right after the innerHTML line, then I see the
div's contents being changed.

If I insert a simple delay (using new Date().getTime, and looping until
the desired time has passed), the div's contents do not change.

This is a concern since a number of the tables I need to present, and
wish to allow in-browser sorting, have a few hundred rows. The sort
will complete, but I have been unable to provide a visual indicator
that the sort is in progress.

[...]

Call busyProgress, and set a timeout to call your sort function. The
UA does not update until the function finishes. As long as its sorting
- the UA wont change displays. The alert you use causes the function
to stop until the alert is dismissed, so the UA updates.

That's a good idea (I think) but there are some usability issues.

Events are buffered while the function runs, so if users are impatient
and try clicks & drags in the meantime (e.g. they click on three or four
'sort' do-dads while the first is running), nothing will happen until it
finishes and then the others will run. Users may consider the
unexpected results to be the OP's fault.

Have the function set a variable when it runs, and checks for that
variable prior to running. When it finishes, reset the variable.

var functionRunning = false

function something(){
if (functionRunnin g){return false;)}
else{
functionRunning = true;
//function is not already running so it will execute.
}
functionRunning = false;
}

Might be some flawed logic there, its 2am and typing off my head, but
the general idea is there.

Or, and maybe better, is to check the visibility of the div. If its
visible, fire off. If not, don't. And overly the entire page. The
problem with that is you end up with users that say "I clicked and
clicked and nothing happened". Might be better with an : alert('Be
Patient, I am slowly sorting this monster table');

Or, overlay the page with a div with z-index to cover it all with a
"Sorting table...." like a download status bar or something. Some
animated gif or such to let the user know the browser is busy. Doing
this would avoid the variable situation above.
The OP may want to put a div over the entire page or employ some other
tactic to prevent user intereaction with the page while the script runs.
See Above :)
Some play stuff below (the pause function should never be used in a real
page, it's just a quick hack to force a pause).

It's ironic that you would use that tactic. Its irony is that I was
looking through the archives of clj earlier and ran across this thread:

<URL:
http://groups.google.com/group/comp....6cf6eeca835f6d
Which discusses the ramifications of giving code such as the pause
function and its problems, especially with new people :)

No biggie, just found it ironic was all.
function doPause( ms )
{
var now = new Date();
var t = now.getTime() + +ms;
while ( now.getTime() < t ){
now = new Date();
}
toggleMsg();
}

But, that function would "hog" the CPU (as noted) where a setTimeout
might work better. <shrug> Its 2AM and I need sleep.....
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[eskwayrd]

Randy Webb wrote:

Call busyProgress, and set a timeout to call your sort function. The UA
does not update until the function finishes. As long as its sorting -
the UA wont change displays. The alert you use causes the function to
stop until the alert is dismissed, so the UA updates.

Thanks, Randy.

When said in your short, to the point fashion, it all makes sense now.
I'd seen mention of that technique in other threads/blogs, but for
whatever reason, those solutions didn't seem all that applicable to
this situation.

[opus27]

Found an easy way to do this :

step 1. change cursor

function ts_makeSortable
add this line before "onclick" :
onMousedown="th is.style.cursor ='wait';"
so that cursor is changed *before* the (long) sort process starts

step 2. restore cursor

function ts_resortTable
add this line at the bottom :
lnk.style.curso r='default';

Works great with IE and Firefox.