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

Ajax does not display a DIV which contains a html page with javascript

P: 6
Hi,

I have been experiencing an issue when trying to use AJAX to reload a DIV area
using a timer of 2000ms, which contains a html page with another DIV and javascript.

Scenario
-------------
I have perl script which simply runs a ps on a Solaris server and generates
a static html page with all of the code perfectly and this html page works fine
when viewing it statically or with a META REFRESH header tag. The idea is to give the user the appearance of a live cpu graph in a runtime fashion.

I have 4 servers being monitored which are all conaitned within an IFRAME html
page, each refreshing every 2 seconds. This works fine but very visually
annoying.

So I decided to use AJAX to refresh the page. The ajax code uses a timed value
of 2000ms and refreshes the page with hopefully a lot less flickering to the user.

The ajax script I have works 100% for a static or CGI generated page and
updates the DIV accordingly.

When I try to update the AJAX div with the very basic HTML page containing
the graph information which works statically, the graph does not appear within
the ajax div. If I place some text before and after the code which creates the
graphs that data appears fine.

Would anyone know why this could be happenning?

The ajax script will only return Foo and Bar on the page and not the graph.

The javascript code I am calling/using with the lg.html page can be found at
http://www.sbmkpm.com/line.html

The basic code for the graph is as follows. (lg.html)
------>
Foo

Expand|Select|Wrap|Line Numbers
  1. <!-- graph code begins here-->
  2. <script type="text/javascript" src="wz_jsgraphics.js"></script>
  3. <script type="text/javascript" src="line.js"></script>
  4.  
  5. <div id="lineCanvas"> </div>
  6. <script type="text/javascript">
  7. var g = new line_graph();
  8. g.add('0', 14);
  9. g.add('1', 9);
  10. g.setMax(100);g.setColor(4);
  11. g.render("lineCanvas", "CPU Usage");
  12. </script>
Bar
<------

The basic code for the ajax (refresh script) is as follows. (cpu_load.html)
------>
[HTML]<html>
<head>
<title>messages</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sndReq() {
http.open('get', 'lg.html');
http.onreadystatechange = handleResponse;
http.send(true);
setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq()
every 2 seconds
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
if (response != responseold || responsecheck != 1) {
var responsecheck = 1;
document.getElementById("messages").innerHTML = http.responseText;
var responseold = response;
}
}
}
</script>

</head>

<body onLoad="javascript:sndReq();">
<div id="messages"></div>
</body>
</html>[/HTML]

<------

As you can see, the get routine, simply calls the lg.html page every 2000ms
which updates the div "messages" area with the html page lg.html page.

Sometimes, when I first manually refresh the page, the graph will flicker and then dissapear without a trace.

If someone could help me with this frustrating issue, I would greatly appreciate
your help, as I have tried numerous options to get the graph to appear. I also don;t think it is specifically related the js scripts I am calling, but perhaps more to the way in which I am trying to do it.

Thanks,

PT
Sep 25 '07 #1
Share this Question
Share on Google+
10 Replies


dmjpro
100+
P: 2,476
Hi,

I have been experiencing an issue when trying to use AJAX to reload a DIV area
using a timer of 2000ms, which contains a html page with another DIV and javascript.

Scenario
-------------
I have perl script which simply runs a ps on a Solaris server and generates
a static html page with all of the code perfectly and this html page works fine
when viewing it statically or with a META REFRESH header tag. The idea is to give the user the appearance of a live cpu graph in a runtime fashion.

I have 4 servers being monitored which are all conaitned within an IFRAME html
page, each refreshing every 2 seconds. This works fine but very visually
annoying.

So I decided to use AJAX to refresh the page. The ajax code uses a timed value
of 2000ms and refreshes the page with hopefully a lot less flickering to the user.

The ajax script I have works 100% for a static or CGI generated page and
updates the DIV accordingly.

When I try to update the AJAX div with the very basic HTML page containing
the graph information which works statically, the graph does not appear within
the ajax div. If I place some text before and after the code which creates the
graphs that data appears fine.

Would anyone know why this could be happenning?

The ajax script will only return Foo and Bar on the page and not the graph.

The javascript code I am calling/using with the lg.html page can be found at
http://www.sbmkpm.com/line.html

The basic code for the graph is as follows. (lg.html)
------>
Foo

Expand|Select|Wrap|Line Numbers
  1. <!-- graph code begins here-->
  2. <script type="text/javascript" src="wz_jsgraphics.js"></script>
  3. <script type="text/javascript" src="line.js"></script>
  4.  
  5. <div id="lineCanvas"> </div>
  6. <script type="text/javascript">
  7. var g = new line_graph();
  8. g.add('0', 14);
  9. g.add('1', 9);
  10. g.setMax(100);g.setColor(4);
  11. g.render("lineCanvas", "CPU Usage");
  12. </script>
Bar
<------

The basic code for the ajax (refresh script) is as follows. (cpu_load.html)
------>
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>messages</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script>
  6. function createRequestObject() {
  7. var ro;
  8. var browser = navigator.appName;
  9. if(browser == "Microsoft Internet Explorer"){
  10.    ro = new ActiveXObject("Microsoft.XMLHTTP");
  11. }else{
  12.    ro = new XMLHttpRequest();
  13. }
  14. return ro;
  15. }
  16.  
  17. var http = createRequestObject();
  18.  
  19. function sndReq() {
  20.    http.open('get', 'lg.html');
  21.    http.onreadystatechange = handleResponse;
  22.    http.send(true);
  23.    setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq()
  24. every 2 seconds
  25. }
  26.  
  27. function handleResponse() {
  28.    if(http.readyState == 4){
  29.       var response = http.responseText;
  30.       if (response != responseold || responsecheck != 1) {
  31.          var responsecheck = 1;
  32.          document.getElementById("messages").innerHTML = http.responseText;
  33.          var responseold = response;
  34.       }
  35.    }
  36. }
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body onLoad="javascript:sndReq();">
  42. <div id="messages"></div>
  43. </body>
  44. </html>
<------

As you can see, the get routine, simply calls the lg.html page every 2000ms
which updates the div "messages" area with the html page lg.html page.

Sometimes, when I first manually refresh the page, the graph will flicker and then dissapear without a trace.

If someone could help me with this frustrating issue, I would greatly appreciate
your help, as I have tried numerous options to get the graph to appear. I also don;t think it is specifically related the js scripts I am calling, but perhaps more to the way in which I am trying to do it.

Thanks,

PT
Make your static page dynamic as it does not work with static.
Actually the AJAX is not for Static page upload.

Kind regards,
Dmjpro.
Sep 25 '07 #2

P: 6
Make your static page dynamic as it does not work with static.
Actually the AJAX is not for Static page upload.

Kind regards,
Dmjpro.
Hi,

Thanks for the feedback.

Do you mean, get a pl script or something like that which prints out the same
data as what would appear in the static generated page?

Cheers.
Sep 25 '07 #3

dmjpro
100+
P: 2,476
Hi,

Thanks for the feedback.

Do you mean, get a pl script or something like that which prints out the same
data as what would appear in the static generated page?

Cheers.
Yeah! :-)

You tried that and what's your O/P?

Kind regards,
Dmjpro.
Sep 25 '07 #4

gits
Expert Mod 5K+
P: 5,298
heya pauli,

please use the code tags when posting source code ... for example

[CODE=javascript] code goes here [/code]

kind regards
Sep 25 '07 #5

P: 6
Hi,

I will give that a go today and let you know. Sorry about the CODE thing.

Cheers.
Sep 26 '07 #6

P: 6
Hi Dmjpro

I hope I have done the right thing here.

I gave that a go and got exactly the same result. All that is printed on the screen is Foo and Bar. I tested the PERL script out directly and the graph
is displayed ok. I have supplied the changes I have done below.

It's not super important, but just frustrating as the AJAX reload works fine
with everything else I have thrown at it so far that does'nt use another DIV with Javascript :(

EG: lg.html
Expand|Select|Wrap|Line Numbers
  1. <div id="lineCanvas" style="border:3px solid #ccc;">
  2. Print Something in here
  3. <FORM> <INPUT TYPE=SUBMIT></FORM>
  4. </div>
  5.  
Expand|Select|Wrap|Line Numbers
  1. function sndReq() {
  2.    http.open('get', '/mrtg/cgi-bin/lg.pl');
  3.    http.onreadystatechange = handleResponse;
  4.    http.send(true);
  5.    setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq() every 2 seconds
  6. }
  7.  
The lg.pl looks like this.
Expand|Select|Wrap|Line Numbers
  1. #!/usr/bin/perl -w
  2.  
  3. use CGI qw(:standard);
  4. print header();
  5.  
  6. print <<EOF;
  7. Foo
  8.  
  9. <!-- graph code begins here-->
  10. <script type="text/javascript" src="/mrtg/wz_jsgraphics.js"></script>
  11. <script type="text/javascript" src="/mrtg/line.js"></script>
  12. <div id="lineCanvas"></div>
  13.  
  14. <script type="text/javascript">
  15. var g = new line_graph();
  16. g.add('0', 14);
  17. g.add('1', 9);
  18. g.add('2', 17);
  19. g.setMax(100);g.setColor(4);
  20. g.render("lineCanvas", "Heap Usage");
  21. </script>
  22. Bar
  23. EOF
  24.  
  25.  
Sep 26 '07 #7

dmjpro
100+
P: 2,476
Hi Dmjpro

I hope I have done the right thing here.

I gave that a go and got exactly the same result. All that is printed on the screen is Foo and Bar. I tested the PERL script out directly and the graph
is displayed ok. I have supplied the changes I have done below.

It's not super important, but just frustrating as the AJAX reload works fine
with everything else I have thrown at it so far that does'nt use another DIV with Javascript :(

EG: lg.html
Expand|Select|Wrap|Line Numbers
  1. <div id="lineCanvas" style="border:3px solid #ccc;">
  2. Print Something in here
  3. <FORM> <INPUT TYPE=SUBMIT></FORM>
  4. </div>
  5.  
Expand|Select|Wrap|Line Numbers
  1. function sndReq() {
  2.    http.open('get', '/mrtg/cgi-bin/lg.pl');
  3.    http.onreadystatechange = handleResponse;
  4.    http.send(true);
  5.    setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq() every 2 seconds
  6. }
  7.  
The lg.pl looks like this.
Expand|Select|Wrap|Line Numbers
  1. #!/usr/bin/perl -w
  2.  
  3. use CGI qw(:standard);
  4. print header();
  5.  
  6. print <<EOF;
  7. Foo
  8.  
  9. <!-- graph code begins here-->
  10. <script type="text/javascript" src="/mrtg/wz_jsgraphics.js"></script>
  11. <script type="text/javascript" src="/mrtg/line.js"></script>
  12. <div id="lineCanvas"></div>
  13.  
  14. <script type="text/javascript">
  15. var g = new line_graph();
  16. g.add('0', 14);
  17. g.add('1', 9);
  18. g.add('2', 17);
  19. g.setMax(100);g.setColor(4);
  20. g.render("lineCanvas", "Heap Usage");
  21. </script>
  22. Bar
  23. EOF
  24.  
  25.  
Good :-)
Where is this line?
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("lineCanvas").iinerHTML = http.responseText
Kind regards,
Dmjpro.
Sep 26 '07 #8

P: 6
Howdy,

Umm, it's still there but it refers to the messages DIV. This is the static html page which calls the perl script. The lineCanvas DIV is in the perl script, which
the graphing script updates.

Expand|Select|Wrap|Line Numbers
  1. function sndReq() {
  2.    http.open('get', '/mrtg/cgi-bin/lg.pl);
  3.    http.onreadystatechange = handleResponse;
  4.    http.send(true);
  5.    setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq()
  6. every 2 seconds
  7. }
  8.  
  9. function handleResponse() {
  10.    if(http.readyState == 4){
  11.       var response = http.responseText;
  12.       if (response != responseold || responsecheck != 1) {
  13.          var responsecheck = 1;
  14.          document.getElementById("messages").innerHTML = http.responseText;
  15.          var responseold = response;
  16.       }
  17.    }
  18. }
  19. </script>
  20.  
  21. </head>
  22.  
  23. <body onLoad="javascript:sndReq();">
  24. <div id="messages"></div>
  25.  
  26.  
Am I missing something simple ?

Thanks,

PT
Sep 26 '07 #9

dmjpro
100+
P: 2,476
Good :-)
Where is this line?
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("lineCanvas").iinerHTML = http.responseText
Kind regards,
Dmjpro.
You are executing JavaScript in the Div area.
I think it will not work.
And Paulie tell me one thing why do u need to load a static page using Ajax.
Does the page change?
If some changes in your Graph then get the updated data from data base in XML format then draw the graph here.
You got my point?
:-)

Kind regards,
Dmjpro.
Sep 26 '07 #10

P: 6
You are executing JavaScript in the Div area.
I think it will not work.
And Paulie tell me one thing why do u need to load a static page using Ajax.
Does the page change?
If some changes in your Graph then get the updated data from data base in XML format then draw the graph here.
You got my point?
:-)

Kind regards,
Dmjpro.
Howdy,

The page does change. It is updated via a perl script. I will certainly give the xml method a go and see if this works.

Thanks for your time and help!

Have a good day.
Sep 27 '07 #11

Post your reply

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