The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

CSS style change not updating until JS finishes

Basically I have a page that displays query results.  I use AJAX to fetch the results whenever a change to the criteria are made.  Since it's possible for up to a 3-4 second delay between the user submitting the query and the results displaying I created a small div off to the right that says 'Loading'.  I want the div to display soon after the user clicks submit and go away once the results are displayed. (I have an effect where the div fades away over 2 seconds instead of hiding immediately.)

My problem is that the div doesn't display until the javascript has finished executing - including the XMLHttp responses firing.

I've tried google and been unsuccessful.  Previously I called ShowLoading() at the beginning of LoadResults() followed by all the necessary code.  I tried moving everything except ShowLoading into a new function LoadResultsExecute and then calling LoadResultsExecute via setTimeout with a short delay (5ms).  That worked (I assume because with the delay the browser has a chance to re-render) but I'd rather not due that because I have several functions where I'd like to call ShowLoading and I'd rather not create another 'Execute' function for all of them.

What am I doing wrong?
chloraphil Send private email
Friday, September 15, 2006
 
 
Difficult without seeing code. First check that the xmlHttpRequest uses asynchronous and not synchronous timing. If still have problems, execute showLoading before any AJAX stuff.
Nonymous
Friday, September 15, 2006
 
 
All of my xmlHttp requests are asynch, and ShowLoading is called at the beginning of the function before anything else.

thanks for the response.  as a general rule, shouldn't a style change take effect immediately?
chloraphil Send private email
Friday, September 15, 2006
 
 
Thanks Nonymous, looks like I've got it.  When I specified 'true' for the blnAsync parameter in the xmlhttprequest.open() method it fixed the problem.  That seems really odd, since the default is supposed to be true.  So why would explicitly setting it to true make a difference?
chloraphil Send private email
Friday, September 15, 2006
 
 
I would think so. Is there an image in the loading div? it might not be loading the image fast enough, the dynamic image insertion bug.
Nonymous
Friday, September 15, 2006
 
 
I'm glad you solved it. I've always used it explicitly without questioning why. It might be worth looking at in spare time.
Nonymous
Friday, September 15, 2006
 
 
No image, just "Loading..." with white text and a blue background.

Thanks again.
chloraphil Send private email
Friday, September 15, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz