AJAX progress graphic issue in Firefox

[nbfruit]

Hi,

I have implemented a progress graphic that works in IE but not in FF.

Basically, when the user clicks on a search button, my Javascript:

o hides the DIV with my search form
o reveals the DIV containing my progress graphic
o sets up the XMLHTTPRequest and sends it
o receives back the data
o updates my results DIV, which at this point is hidden
o hides my progress graphic DIV
o reveals my results DIV

All this works fine in IE, but in FF the hides/reveals don't work.

I know my code is OK in this regard, because if I stagger the script with an 'alert' after each hide/reveal, they all work fine.

Equally, if I remove the XMLHTTPRequest call, the functionality is also fine.

What appears to happen is that FF suspends all DOM updates if it is dealing with an XMLHTTPRequest in any part of the transaction.

Is that plausible?

[eak]

Can we see your code?

[ohgod]

What appears to happen is that FF suspends all DOM updates if it is dealing with an XMLHTTPRequest in any part of the transaction.

well, if that were the case you'd have JAX, not AJAX :P


have you watched the transaction with firebug?

[nbfruit]

Originally Posted by ohgod

well, if that were the case you'd have JAX, not AJAX :P


have you watched the transaction with firebug?

I have. Nothing doing. No errors.

Code is quite long so probably best to take a look at the actual site. All of the javascript can see via Firebug.

http://www.propertygetter.com

Do a search for properties in Northern Europe with Euro currency.

Map should disappear and display a 'Loading results' dialogue. It does in IE, not in FF.

Relevant code section is ajax_user.js, line 1234

[ohgod]

so, without looking at code i'm going to assume you're using onreadystatechange to define which step it's at. correct me if i'm wrong.

you're right, it showed the loading image in ie, and not firefox. but... when i hit search in firefox it loaded the results so freakin fast it wouldn't have needed it...

[nbfruit]

Originally Posted by ohgod

so, without looking at code i'm going to assume you're using onreadystatechange to define which step it's at. correct me if i'm wrong.

you're right, it showed the loading image in ie, and not firefox. but... when i hit search in firefox it loaded the results so freakin fast it wouldn't have needed it...

Yes, I'm using onreadystatechange.

I've put a sleep() into my PHP to simulate a slow response from the webserver.

[nbfruit]

Originally Posted by ohgod

so, without looking at code i'm going to assume you're using onreadystatechange to define which step it's at. correct me if i'm wrong.

you're right, it showed the loading image in ie, and not firefox. but... when i hit search in firefox it loaded the results so freakin fast it wouldn't have needed it...

Just an update to say that I finally resolved this issue.

readystatechange was the key.

Let me explain for those not too familiar with concept:

If you set the readystatechange optional Boolean parameter to true (asynchronous), your javascript will continue to execute while your browser is waiting for the response from the server.

If you set it to false (synchronous), your javascript will pause until the server responds.

Clearly, if you want to reveal a progress graphic while waiting for the server to respond, this parameter should be set to true, as your javascript will need to run to update your DOM.

I had not set the parameter, presuming the default was true. This didn't present a problem in IE, but in FF, my javascript was pausing.

Setting the parameter explicitly to true sorted the problem in both browsers.