Page 1 of 1
Javascript update question
Posted: Wed 08 Jun 2011 11:36 am
by fractonimbus
I have a PHP file whose function is to draw a graph (PNG format, 700x360 pixels). It loads the data and plots a new graph every time it is called.
Given how the experts here are averse to using meta refresh to update pages
, I want to use Javascript to update the PHP-generated image in an HTML page every 60 seconds or so.
What's the simplest way to do that, given that I'm using jquery.js (and wc.js) to update the "page last updated" entry in the html page already. How do I get Javascript to call jquery to get it to call the PHP file? (if that's what I should be doing?)
Thanks
DN
The meta refreshed page is here:
http://www.deakinwx.com/wx/stemp.htm
Re: Javascript update question
Posted: Thu 09 Jun 2011 1:23 am
by fractonimbus
More on the problem: What I've struck (and trying more than one method to replace the object id with the updated PHP output) is that if I add the id to the IMG tag (holding the PNG generated by PHP), nothing happens. If I put the <img..> inside <p> tags and add the id to the <p> tag, it does replace the image but as a text dump of gibberish characters, ie the PNG file treated as text. So I suspect I have a mime-type problem. Does anyone have an idea how to handle this?
(FWIW, I did try seeding the replacement file with a random suffix: xxx.php?random - it generates the PHP-constructed image when entered directly, but the Javascript doesn't replace anything. Anyway, I may not need to do this, as the PHP creates a new image every time it is called)
I may try getting the PHP to explicitly generate a file type header as well as the PNG and see what happens. When I load the current PHP generated image directly into a browser, it displays quite happily, so I am bit confused as to what's going on.
DN
Re: Javascript update question
Posted: Thu 09 Jun 2011 2:02 am
by fractonimbus
A bit more: with the id in the <p> tag, the update does occur, but apparently not when it's in the <img> tag.
Very odd (BTW, I'm using PHPlot to create the graph).
DN
Re: Javascript update question
Posted: Thu 09 Jun 2011 3:09 am
by DaveNZ
I would use a javascript like the following. It should work, though I haven't tested it...
I haven't really learnt much jQuery so tend to write javascript instead.
<script type="text/javascript">
function timer() {
var interval=60; // seconds
var wait=interval*1000;
setTimeout("updateImg()",wait)
}
function updateImg() {
var imgspan=document.getElementById('graph_container');
var d=new Date();
var src="../scw.php?"+d.getTime();
imgspan.innerHTML='<img src="'+src+'" alt="some text" />';
timer();
}
</script>
<body onload="timer()">
Then for the image:
<span id="graph_container">
<img src="../scw.php" alt="some text" />
</span>
Re: Javascript update question
Posted: Thu 09 Jun 2011 3:31 am
by fractonimbus