0

I have a page that fires several xmlHttp requests (synchronous, plain-vanilla javascript, I'd love to be using jquery thanks for mentioning that).

I'm hiding/showing a div with a loading image based on starting/stopping the related javascript functions (at times I have a series of 3 xmlhttp request spawning functions nested).

div = document.getElementById("loadingdiv");
if(div) {
    if(stillLoading) {
        div.style.visibility='visible';
        div.style.display='';

    } else {
        div.style.visibility='hidden';
        div.style.display='none';
    }
}

In Firefox this seems to work fine. The div displays and shows the gif for the required processing. In IE/Chrome however I get no such feedback. I am only able to prove that the div/image will even display by putting alert() methods in place with I call the above code, this stops the process and seems to give the browsers in question the window they need to render the dom change.

I want IE/Chrome to work like it works in Firefox. What gives?

codeLes
  • 3,021
  • 3
  • 29
  • 27

2 Answers2

3

if the xmlhttprequests are not asynchronous you will find IE at least wont rewrite the UI untill they are finished (not tested in Chome though), I cam across the same issue with non async $.ajax jquery requests.

Pharabus
  • 6,081
  • 1
  • 26
  • 39
  • do you recall the solution that got you past this? – codeLes May 06 '10 at 19:17
  • 1
    @codeLes, we where using jquery and $.ajax so we set it to asynch, because we did need them to complete in a certain order we 'chained' them, i.e fired the next on success of the first. this allowed IE to redraw the UI as needed. – Pharabus May 06 '10 at 19:20
  • Thanks, I will attempt this. Good info. – codeLes May 06 '10 at 19:25
  • 1
    @codeLes - This might interest you how to 'chain' XHR queries like @Pharabus mentionned (especially the 'Original answer' part of that answer if you are not using jQuery http://stackoverflow.com/questions/2208710/best-way-to-add-a-callback-after-a-series-of-asynchronous-xhr-calls/2208860#2208860 – SBUJOLD May 06 '10 at 20:30
1

I realize you're not asking about jQuery but you might consider using jQuery to show/hide your div for easier cross browser compatibility.

http://api.jquery.com/show/

http://api.jquery.com/hide/

Here's a helpful tutorial:

http://www.learningjquery.com/2006/09/slicker-show-and-hide

gurun8
  • 3,526
  • 12
  • 36
  • 53