6
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
- <!-- graph code begins here-->
- <script type="text/javascript" src="wz_jsgraphics.js"></script>
- <script type="text/javascript" src="line.js"></script>
- <div id="lineCanvas"> </div>
- <script type="text/javascript">
- var g = new line_graph();
- g.add('0', 14);
- g.add('1', 9);
- g.setMax(100);g.setColor(4);
- g.render("lineCanvas", "CPU Usage");
- </script>
<------
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
