IE page rendering issue (Wait message)

[tusovka]

Because Firefox and IE render web pages differently, I cant get the same results.
I working with many embedded tables that contain javascript functionality inside.

What I have is a table that contains radio buttons. Once the user selects a button, I use the onClick functionality to generate 2 dynamic selectors that are inserted once results come back from DataBase.

I want to display a simple message (Query in progress) until the selectors are generated (2sec). To display the message:
document.getEle mentById('waitQ uery').style.di splay='';
and once the selectors are build remove message:
document.getEle mentById('waitQ uery').style.di splay='';

This works in Firefox, but not in IE. Why, because the table is not complete, that is the selectors are not done yet. So IE does not show the message either. Once the selectors are created, IE executes the Javascript, but so fast that message is not seen, plus in does not make sense to show the message after the wait time passed.

Please, help... I just want a simple message to be Displayed in IE while query in progress...

[tusovka]

Gits,

I will be back at work on Monday and will apply new changes to the code then. I will post the new results then.

Thanks for your time.
Tusovka

[gits]

no problem :) ... i'll have a look at it then :) ... have a nice weekend ...

kind regards,
gits

[tusovka]

Gits,

Well I modified the code as you mention in the previous post.

 
 oRequest.open(\"GET\",sURL,true);     //used to be false !!!
    oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent);
    oRequest.send(null)
 
    oRequest.onreadystatechange = function() {
      if( oRequest.readyState == 4 ) {
        //response is ok
        if( oRequest.status == 200 ) {
          //alert( oRequest.responseText );
          return(oRequest.responseText);
        } else {
          alert(\"Error executing XMLHttpRequest call!\");
        }
      }
    }
 
 

Well I know the last alert never executes so that good news. Unfotunatly, both FireFox and IE both behave the same now. The output is: instantaneous population of the <span> container with a message ( undefined ) instead of a selector.

Please note I inserted the return( ) myself because if was not mentioned where that line of code should go.

[tusovka]

Gits,

As I was examining the (https://developer.mozilla.org/En/Using_XMLHttpRequest) web page you recommended I found a few varibles I though might me effecting my program.

In the online example:

 var req = new XMLHttpRequest();  
 req.open('GET', 'http://www.mozilla.org/', true);  
 req.onreadystatechange = function (aEvt) {  
   if (req.readyState == 4) {  
      if(req.status == 200)  
       dump(req.responseText);  
      else  
       dump("Error loading page\n");  
   }  
 };  
 req.send(null); 

note the function takes a variable!, mine does not? also the (;) at the end of the function definition. I tried adding the (;) still same behavior. Also the use of dump() instead of return. Finally the send(Null) is at the end of all of this.

I'm not sure why the difference, but thought I should mention what I have noticed.

My pevious post is not posted yet, (Waiting to be approved).

[acoder]

The function doesn't need a parameter and the semi-colon is not required.

Move the send to the end. dump() is a user defined function. Your return isn't quite correct, because what does it return to. I would suggest that you change your code where you have:

var techinfo=techPage(A, B, C, D);
document.getElementById('tech_selector').innerHTML=techinfo; 

and change that to use the response to set the tech selector, e.g.

document.getElementById('tech_selector').innerHTML=oRequest.responseText; 

in place of the return.

[tusovka]

I would like to thank everyone who gave advice and made it possible for me to figure out this task. Finally, I got the query message to display in both FF and IE.

First, something that is not seen here is a small php code that goes in to my tech.php page. Right after I decipher the URL and pull out the needed variables, the next thing i do is a ---> flush(); <---.

Now, going back to my JavaScript function : techPage()
1) Note, I'm using the code snippet (Git's) recommended a couple of post above. -->oRequest.statu s == 200 and the readyState == 4....

2) I implemented the idea (Acoder) recommended and got rid of the return, and actually loaded the span right here instead of later in my code. But, just to make a note the return worked, how I'm not sure. I still made the change just because it made my code simpler to understand (I think).

3) Note that im actually turning on and off the message here instead of another embedded location.

4) Finally the readyState ==2 was the trick that made it all work.

So it works... Thanks for all your help...

 
function*techPage(A, B, C, D, E, F)*{ 
    var*oRequest*=*new*XMLHttpRequest();
    var*sURL=*\"http://\"+self.location.hostname+E+D+\".php?A=\"+A+\"&B=\"+B+\"&F=\"+F; 
        //alert(sURL); 
        //document.write(sURL); 
    oRequest.open(\"GET\",sURL,true); 
    oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent); 
    oRequest.send(null) ;
 
    oRequest.onreadystatechange = function() {
          if( oRequest.readyState == 4 ) {                                                        //transaction is complete (4)
        document.getElementById('wait_message').style.display='none';     //message OFF
                if( oRequest.status == 200 ) {                                                //HTTP statues OK
                      document.getElementById('tech_selector').inner HTML=oRequest.responseText;     
                  } else {
                      alert(\"Error executing XMLHttpRequest call!\");
                }                                                                                      
          }
    if( oRequest.readyState == 2 ) {                                                        //loaded = 2
        document.getElementById('wait_message').style.display='';
        //during this state display the message (ON)
    }
    }         //end of function()
}                    //end of techPage()