By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,397 Members | 1,370 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,397 IT Pros & Developers. It's quick & easy.

IE page rendering issue (Wait message)

P: 23
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.getElementById('waitQuery').style.display ='';
and once the selectors are build remove message:
document.getElementById('waitQuery').style.display ='';

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...
May 12 '09 #1
Share this Question
Share on Google+
25 Replies

Expert Mod 5K+
P: 9,731
Are you calling the method that displays "waitQuery" during the OnClick event before the 2 selectors are dynamic created?

It may help if you post a code snippet so that we can see what you're doing.
May 12 '09 #2

P: 23
Yes, Im calling a function that displays the message that is already hard coded in to the span id='waitQuery'

once the selectors are generated I call a similar function that changes the span display to none.
Expand|Select|Wrap|Line Numbers
  1.  <input type=\"radio\" name=\"$inputName\" value=\"$build\" 
  3.           onclick=\"javascript:
  6.           queryMessageOn(); 
  7.           --
  8.           code that generates selectors
  9.           document.getElementById('tech_selector').innerHTML=techinfo; 
  10.           --
  11.           queryMessageOff(); 
  13. \">
Expand|Select|Wrap|Line Numbers
  1. function queryMessageOn(){
  2.     document.getElementById('waitQuery').style.display='';
  3. }
  5. function queryMessageOff(){
  6.     document.getElementById('waitQuery').style.display='none';

what is (techinfo) = Basically I have a php code that generates a selector and then when that page is done the output is stored in to a span that is the newly generated selector.

You would think IE would atleast display the message because that is the first thing that should happen onclick. Yet, once you click a radio button it everything stands still for the query and then selectors are displayed.

Please ignore all the extra ( " \ ;) because all this stuff is inside php code.
May 12 '09 #3

Expert Mod 5K+
P: 5,390
how do you send the query? do you use ajax for that purpose? in case you do ... then ensure that it is done async ... otherwise the browser will wait for the query and may show such behaviour ...

kind regards
May 13 '09 #4

P: 23
//techPage() is a javascript function that generates a URL to another php file that actually creates the query. Once the query returns, tech.php generates the appropriate HTML code for the selector. Next, the whole output of that page tech.php is stored in the variable (techinfo) as seen below.

var techinfo=techPage(A, B, C, D);

Now, you cant think of the whole code for the selector is inside the techinfo variable. Then next step I do is populate the appropriate <span> that will hold the newly generated selector.

Finally, I want the message to be turned of because the process of generating the selector is complete.

FireFox works great, yet IE(version 7) seems to wait, until the span for the selector is filled.


Inside my tech.php I examine the URL, pull out the info I need to generate the query and execute it.


once everything is done the last two lines in tech.php


Does any one know how to write a small Javascript function that can tell if a:
query is in not complete, or when the <span> container is populated or is empty onChange type of approach.
May 13 '09 #5

Expert Mod 5K+
P: 5,390
as i said ... do you use an ajax-call for the query? without doing so the browser just waits for the response ... while an ajax call could be done async and tells you when it would be complete. since that would run in the background the browser would even be responsive during the call ...

kind regards
May 13 '09 #6

Expert Mod 5K+
P: 9,731
Gits, if the OP is not using Ajax, could they use the setTimeout() method to display the "Please Wait" message?

Expand|Select|Wrap|Line Numbers
  1.   setTimeout(queryMessageOn(), 100); 
  2.   //.....
  3.   queryMessageOff(); 
May 13 '09 #7

Expert Mod 5K+
P: 5,390
you shouldn't use it and typically you do not but: of course you could do ... but couldn't that be the problem? ... and just to confirm that i asked the OP whether he uses the XMLHttpRequest or not ...
May 14 '09 #8

Expert Mod 5K+
P: 5,390
ahh ...wait Frinny ;) ... was that a question? ... in case it was ... then the answer would be to not doing so .... don't know every browsers behaviour ... but doing sync requests will cause the browser to block execution of code ... in favour of waiting for the response ... may be that you would have luck with the timeout in one browser ... but in others it might fail. the best and most reliable way is to do an async XMLHttpRequest (aka: ajax-call) ...

kind regards
May 14 '09 #9

P: 23

I'm not sure i have never seen ajax before. Plus, this code was thrown at me, and I need to slowly understand it and modify it. Could you post a simple ajax call query.
The only place I see the query being executed is in a php format. Sorry if I did not answere you the first time. All of this is new to me.


I tried using the setTimeout(queryMessageOn(), 100); in my Javascript portion.
That is after you click a radio button selection.
The result is:
First, there is the initial wait for the query (2sec) then we see the selector plus the message. Once the time is up the message is errased. So basically we are at the same place.
The message does not appear will the query is in progress. Insted it appears after the selector is generated and displayed. Note, this is only in IE not Firefox.

Any exaples of Ajax would be nice.
May 14 '09 #10

Expert Mod 5K+
P: 5,390
you find a quick intro here and here ... at the bottom of the page there are more links that could get you on track ...

kind regards
May 14 '09 #11

Expert Mod 5K+
P: 9,731
Yes it was a question (note the question mark) :)
I should have probably just researched it....but was lazy yesterday.
May 14 '09 #12

Expert Mod 5K+
P: 5,390
yes ... i know and i misunderstood it as a question for whether the OP would use AJAX or not and as it turned out now he isn't at the moment ... so that would explain the behaviour of the browser ... :)
May 14 '09 #13

P: 23
For some reason I could not post a reply. So if later you see 3 same replies just ignore.

I located the XMLHttpRequest() function.
Expand|Select|Wrap|Line Numbers
  1. function techPage(A, B, C, D, E, F) {
  2.     var oRequest = new XMLHttpRequest();
  3.     var sURL= \"http://\"+self.location.hostname+E+D+\".php?A=\"+A+\"&B=\"+B+\"&F=\"+F;
  4.     //alert(sURL);
  5.     //document.write(sURL);
  7.     oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent);
  8.     oRequest.send(null)
  9.     if (oRequest.status==200)  {
  10.       return(oRequest.responseText);
  11.       //alert(oRequest.responseText);
  12.     } else {
  13.         alert(\"Error executing XMLHttpRequest call!\");
  14.       }
  15.   } 

Any suggestions on what my next step could be in finding a solution to my message issue in IE???
May 14 '09 #14

Expert Mod 5K+
P: 9,731
Hehe, yeah I cleaned up your duplicate posts.
The reason your reply wasn't showing up is because your post contained code that the forum filter thought could be dangerous. One way to avoid this problem is to post your code in code tags... but some posts are filtered even with code tags. If it happens again just contact a moderator and they'll fix it for you :)
May 14 '09 #15

Expert Mod 15k+
P: 16,027
To make it asynchronous, change line 6 to:
Expand|Select|Wrap|Line Numbers
May 14 '09 #16

P: 23
I tried changing the 3rd argument to (true) from false and my code fails. I still dont know why.
May 15 '09 #17

Expert Mod 5K+
P: 5,390
yes ... you don't use a callback since you rely currently on a sync process ... try the following in addition to the true-param:

Expand|Select|Wrap|Line Numbers
  1. oRequest.onreadystatechange = function() {
  2.     if (oRequest.readyState == 4 && oRequest.status == 200)  {
  3.         return(oRequest.responseText);
  4.         //alert(oRequest.responseText);
  5.     } else {
  6.         alert(\"Error executing XMLHttpRequest call!\");
  7.     }
  8. }
kind regards
May 15 '09 #18

P: 23
Here is the output:

1)First, the tech selector <span> displays --> undefined
2)Second, I get the alert message -->
(Error executing XMLHttpRequest call!)

Expand|Select|Wrap|Line Numbers
  2. function*techPage(A,*B,*C,*D,*E,*F)*{ 
  3. ****var*oRequest*=*new*XMLHttpRequest(); 
  4. ****var*sURL=*\"http://\"+self.location.hostname+E+D+\".php?A=\"+A+\"&B=\"+B+\"&F=\"+F; 
  5. ****//alert(sURL); 
  6. ****//document.write(sURL); 
  7. ****\"GET\",sURL,false); 
  8. ****oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent); 
  9. ****oRequest.send(null) 
  10. ****
  11.     oRequest.onreadystatechange = function() {
  12.        if (oRequest.readyState == 4 && oRequest.status==200)  {
  13.           return(oRequest.responseText);
  14.            //alert(oRequest.responseText);
  15.       } else {
  16.           alert(\"Error executing XMLHttpRequest call!\");
  17.       }
  18.     }
  19. }
I also tried to un-comment --> //alert(oRequest.responseText);
and I also see this alert. That mean, its as if both parts of the code are executed. The ( if) and (else). There is a good possibility I pasted the code in the wrong part.

Any suggestion are appreciated !
May 15 '09 #19

Expert Mod 5K+
P: 5,390
ok ... the error alert appears since the readyState changes sometimes from 1 to 2 to 3 to 4 ... while 4 states that the request is complete, so change the code a bit:

Expand|Select|Wrap|Line Numbers
  1. // callback when readyState changes
  2. oRequest.onreadystatechange = function() {
  3.     // request is complete
  4.     if (oRequest.readyState == 4)  {
  5.         // response is ok
  6.         if (oRequest.status == 200) {
  7.             alert(oRequest.responseText);
  8.         } else {
  9.             alert(\"Error executing XMLHttpRequest call!\");
  10.         }
  11.     }
  12. }
additionally in the open-method the 3rd param should be true.

what does the alerts say now?

kind regards
May 16 '09 #20

P: 23

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.
May 16 '09 #21

Expert Mod 5K+
P: 5,390
no problem :) ... i'll have a look at it then :) ... have a nice weekend ...

kind regards,
May 16 '09 #22

P: 23

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

Expand|Select|Wrap|Line Numbers
  2.\"GET\",sURL,true);     //used to be false !!!
  3.     oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent);
  4.     oRequest.send(null)
  6.     oRequest.onreadystatechange = function() {
  7.       if( oRequest.readyState == 4 ) {
  8.         //response is ok
  9.         if( oRequest.status == 200 ) {
  10.           //alert( oRequest.responseText );
  11.           return(oRequest.responseText);
  12.         } else {
  13.           alert(\"Error executing XMLHttpRequest call!\");
  14.         }
  15.       }
  16.     }
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.
May 18 '09 #23

P: 23

As I was examining the ( web page you recommended I found a few varibles I though might me effecting my program.

In the online example:

Expand|Select|Wrap|Line Numbers
  1.  var req = new XMLHttpRequest();  
  2.'GET', '', true);  
  3.  req.onreadystatechange = function (aEvt) {  
  4.    if (req.readyState == 4) {  
  5.       if(req.status == 200)  
  6.        dump(req.responseText);  
  7.       else  
  8.        dump("Error loading page\n");  
  9.    }  
  10.  };  
  11.  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).
May 18 '09 #24

Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. var techinfo=techPage(A, B, C, D);
  2. document.getElementById('tech_selector').innerHTML=techinfo; 
and change that to use the response to set the tech selector, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('tech_selector').innerHTML=oRequest.responseText; 
in place of the return.
May 19 '09 #25

P: 23
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.status == 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...

Expand|Select|Wrap|Line Numbers
  2. function*techPage(A, B, C, D, E, F)*{ 
  3.     var*oRequest*=*new*XMLHttpRequest();
  4.     var*sURL=*\"http://\"+self.location.hostname+E+D+\".php?A=\"+A+\"&B=\"+B+\"&F=\"+F; 
  5.         //alert(sURL); 
  6.         //document.write(sURL); 
  8.     oRequest.setRequestHeader(\"User-Agent\",navigator.userAgent); 
  9.     oRequest.send(null) ;
  11.     oRequest.onreadystatechange = function() {
  12.           if( oRequest.readyState == 4 ) {                                                        //transaction is complete (4)
  13.         document.getElementById('wait_message').style.display='none';     //message OFF
  14.                 if( oRequest.status == 200 ) {                                                //HTTP statues OK
  15.                       document.getElementById('tech_selector').inner HTML=oRequest.responseText;     
  16.                   } else {
  17.                       alert(\"Error executing XMLHttpRequest call!\");
  18.                 }                                                                                      
  19.           }
  20.     if( oRequest.readyState == 2 ) {                                                        //loaded = 2
  21.         document.getElementById('wait_message').style.display='';
  22.         //during this state display the message (ON)
  23.     }
  24.     }         //end of function()
  25. }                    //end of techPage()
May 20 '09 #26

Post your reply

Sign in to post your reply or Sign up for a free account.