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

**dmjpro** · Sep 25 '07, 06:18 AM

Originally posted by paulie

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

404 Not Found

http://www.sbmkpm.com/line.html

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

[CODE=javascript]
<script type="text/javascript" src="wz_jsgraph ics.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("lineC anvas", "CPU Usage");
</script>[/CODE]

Bar
<------

The basic code for the ajax (refresh script) is as follows. (cpu_load.html)
------>

Code:

<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>

<------

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.

**paulie** · Sep 25 '07, 07:29 AM

Originally posted by dmjpro

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.

**dmjpro** · Sep 25 '07, 07:32 AM

Originally posted by paulie

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.

**gits** · Sep 25 '07, 08:22 AM

heya pauli,

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

[CODE=javas cript] code goes here [/CODE]

kind regards

**paulie** · Sep 26 '07, 12:01 AM

Hi,

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

Cheers.

**paulie** · Sep 26 '07, 12:25 AM

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

Code:

<div id="lineCanvas" style="border:3px solid #ccc;">
Print Something in here
<FORM> <INPUT TYPE=SUBMIT></FORM>
</div>

Code:

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

The lg.pl looks like this.

Code:

#!/usr/bin/perl -w

use CGI qw(:standard);
print header();

print <<EOF;
Foo

<!-- graph code begins here-->
<script type="text/javascript" src="/mrtg/wz_jsgraphics.js"></script>
<script type="text/javascript" src="/mrtg/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.add('2', 17);
g.setMax(100);g.setColor(4);
g.render("lineCanvas", "Heap Usage");
</script>
Bar
EOF

**dmjpro** · Sep 26 '07, 03:59 AM

Originally posted by paulie

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

Code:

<div id="lineCanvas" style="border:3px solid #ccc;">
Print Something in here
<FORM> <INPUT TYPE=SUBMIT></FORM>
</div>

Code:

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

The lg.pl looks like this.

Code:

#!/usr/bin/perl -w

use CGI qw(:standard);
print header();

print <<EOF;
Foo

<!-- graph code begins here-->
<script type="text/javascript" src="/mrtg/wz_jsgraphics.js"></script>
<script type="text/javascript" src="/mrtg/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.add('2', 17);
g.setMax(100);g.setColor(4);
g.render("lineCanvas", "Heap Usage");
</script>
Bar
EOF

Good :-)
Where is this line?
[code=javascript]document.getEle mentById("lineC anvas").iinerHT ML = http.responseTe xt[/code]

Kind regards,
Dmjpro.

**paulie** · Sep 26 '07, 06:31 AM

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.

Code:

function sndReq() {
   http.open('get', '/mrtg/cgi-bin/lg.pl);
   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>

Am I missing something simple ?

Thanks,

PT

**dmjpro** · Sep 26 '07, 08:55 AM

Originally posted by dmjpro

Good :-)
Where is this line?
[code=javascript]document.getEle mentById("lineC anvas").iinerHT ML = http.responseTe xt[/code]

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.

**paulie** · Sep 27 '07, 12:28 AM

Originally posted by 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.

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.

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment