Displaying a modal "busy" dialog while sorting a table

[frosted74]

Hi,

I have 2 javascript functions, one that sorts a table and one that
shows/hides a modal dialog that displays something like "Sorting" with
a little icon indicating that the browser is "busy" and you need to
wait. This is done because on larger tables the sort routine can take
upwards of 10 seconds. I try the following code:

<th onclick="showModal(); sort(this); hideModal();">some header</th>

but unfortunately the modal code is never displayed. If I throw in an
alert, it will display properly, but this seems to be a timing/
redrawing issue. This app only has to work for IE, but I'd like it to
work across all browsers. I tried throwing in a couple setTimeOut's
in there, but no luck so far, I even tried to simulate clicks on
different hidden form elements which would cause the panels to be
shown/hidden and even sorting, but all with no luck. Has anyone
encountered anything similar to this and gotten it to work? Any help
is appreciated!

Thanks!

 

[GArlington]

Hi,

I have 2 javascript functions, one that sorts a table and one that
shows/hides a modal dialog that displays something like "Sorting" with
a little icon indicating that the browser is "busy" and you need to
wait. This is done because on larger tables the sort routine can take
upwards of 10 seconds. I try the following code:

<th onclick="showModal(); sort(this); hideModal();">some header</th>

but unfortunately the modal code is never displayed. If I throw in an
alert, it will display properly, but this seems to be a timing/
redrawing issue. This app only has to work for IE, but I'd like it to
work across all browsers. I tried throwing in a couple setTimeOut's
in there, but no luck so far, I even tried to simulate clicks on
different hidden form elements which would cause the panels to be
shown/hidden and even sorting, but all with no luck. Has anyone
encountered anything similar to this and gotten it to work? Any help
is appreciated!

Thanks!

What is in your showModal()?
The code would be more helpful than a description...

 

[Jeremy J Starcher]

Hi,

I have 2 javascript functions, one that sorts a table and one that
shows/hides a modal dialog that displays something like "Sorting" with a
little icon indicating that the browser is "busy" and you need to wait.
This is done because on larger tables the sort routine can take upwards
of 10 seconds. I try the following code:

<th onclick="showModal(); sort(this); hideModal();">some header</th>

but unfortunately the modal code is never displayed. If I throw in an
alert, it will display properly, but this seems to be a timing/
redrawing issue. This app only has to work for IE, but I'd like it to
work across all browsers. I tried throwing in a couple setTimeOut's in
there, but no luck so far, I even tried to simulate clicks on different
hidden form elements which would cause the panels to be shown/hidden and
even sorting, but all with no luck. Has anyone encountered anything
similar to this and gotten it to work? Any help is appreciated!

Thanks!

I've run into this before, browsers not updating the screen until after
the Javascript has finished.

call a function that:
updates your screen
sets a timout to call the sort function (minimal delay)

Then your sort function finishes and hides the busy message.

(I don't know what sort algorithm you are using, but a couple of them can
[semi] easily be modified to run in 'spurts' on a timeout. This would
keep things from appearing locked up.)

 

[frosted74]

What is in your showModal()?
The code would be more helpful than a description...

The showModal() called a function of RichFaces, which is a JSF-API
from Exadel. The method itself is really inconsequential, it works on
its own, it's just when called in combination with the other functions
it ceases to work properly. The solution presented by Jeremy works,
thanks! I am wondering though, is there some instances where
setTimeout will not work properly if the client is on a slower
machine? I am concerned because the "modal" window popping up
prevents the user from any other interaction on the page, and the end
of my method removes that window and resumes normal operation. I
guess I'm just worried about that 'window' being stuck on the screen.
Right now I am using a 20ms timeout, have you found a sweet spot for a
timeout?

Thanks again, your help is appreciated!