This question already has answers here:
Refresh image with a new one at the same url
(23 answers)
Closed 8 years ago.
The code works the first time and the recursive call works but the image does not update. NOTE: The .src does not change - it is just updated in the camera a couple times a second so if I refresh the page it updates but not through the recursive function call - what do I need to do to get it to update? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Image update from cam</title>
<script type="text/javascript">
var t;
function updateimg() {
document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
t = setTimeout('updateimg()', 2000);
}
</script>
</head>
<body>
<img id="camimg" src="" width="1400" alt=""/>
<script type="text/javascript">
t = setTimeout('updateimg()', 2000);
</script>
</body>
</html>
The image is not updated because it is cached by your browser and you are using the same URL. Try to add a date to your image URL and you should use setInterval instead of recursive calls:
var timer = setInterval(function(){
var imgUrl = "image.png?v=" + new Date().getTime();
document.getElementById('camimg').src = imgUrl
},5000);
As #adeneo pointed, do not pass strings to the setTimeout function, you can even get rid of the parenthesis.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Image update from cam</title>
<script type="text/javascript">
var t;
function updateimg() {
document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
t = setTimeout(updateimg, 2000);
}
</script>
</head>
<body>
<img id="camimg" src="" width="1400" alt=""/>
<script type="text/javascript">
t = setTimeout(updateimg, 2000);
</script>
</body>
</html>
Related
I'm working on the radio site and for streaming, the Jazler RadioStar 2 program is used which allows constant updating of files that transmit the information which song is currently streaming..
check image
I am specifically interested in how to transfer the title of the song and the name of the author to my homepage..
customexportfile.htm code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Trenutno Slusate!</title>
</head>
<body>
<p>TNowOnAir: <strong>Cher | Believe</strong>
</body>
</html>
or via xml file, NowOnAir.xml
<Schedule System="Jazler">
<Event status="happening" startTime="09:15:30" eventType="song">
<Announcement Display=""/>
<Song title="Believe">
<Artist name="Cher"> </Artist>
<Jazler ID="6379"/>
<PlayLister ID=""/>
<Media runTime="03:34"/>
<Expire Time="09:19:03"/>
</Song>
</Event>
</Schedule>
These files are automatically updated when the song on the stream changes.
Make a text file to the same directory as NowOnAir.xml!
Name it like filename.html
Type the following inside:
<!DOCTYPE html>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body onload="refresh()">
<p>Now playing: <span id="art"></span>|<span id="title"></span>
<script>
var interval,time
function refresh(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("art").innerHTML = this.responseXML.getElementByTagName("ARTIST")[0].getAttribute("name");
document.getElementById("title").innerHTML = this.responseXML.getElementByTagName("SONG")[0].getAttribute("title");
time=this.responseXML.getElementByTagName("EXPIRE")[0].getAttribute("Time").split(":")
interval=setInterval(checkTime,1000)
}
};
xhttp.open("GET", "NowOnAir.xml", true);
xhttp.send();
}
}
function checkTime(){
var date=new Date()
if(date.getSeconds()==time[2]&&date.getMinutes()==time[1]&&date.getHours()==time[0]){
clearInterval(interval)
refresh()
}
}
</script>
</body>
</html>
Then try it (you will find it like this: http://serveraddress/path/filename.html)
I hope that this will help you!
Hesitantly, you can try out this code...
N.B.
There are a great many reasons why this might not work (from the outset, or later).
You should certainly test this out in an environment where it will not upset anyone if it doesn't work.
The solution below involves checking for a new song and title every 5 seconds using the Javascript setInterval method. That could well be a wholly inappropriate solution because it will run indefinitely every 5 seconds. Without more information, it's impossible to answer this for you really.
This code is untested.
Anyway, here's a punt at solving this problem:
HTML (homepage):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Trenutno Slusate!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>NowOnAir:
<strong>
<span id="artistName">Cher</span> |
<span id="songTitle">Believe</span>
</strong>
</p>
<script>
function getNowPlaying() {
const src = "NowOnAir.xml";
$.ajax({
type: 'GET',
url: src,
dataType: xml,
success: function(xml) {
//parse XML
const xmlDoc = $.parseXML( xml );
const $doc = $( xmlDoc );
const $artist = $doc.find( "Artist" ).attr("name").text();
const $song = $doc.find( "Song" ).attr("title").text();
//update homepage
$("#artistName").text($artist);
$("#songTitle").text($song);
},
error: function(e) {
console.log(e);
}
})
}
setInterval( function() {
getNowPlaying();
}, 5000);
</script>
</body>
</html>
If it doesn't work, feel free to comment and I'll try to help.
My client has problem with website only in IE9 (the page works fine in Firefox and Chrome):
The website has an upload form in pop-up window. After processing, the pop-up window is closed and uploaded file (image) is shown in main (top, "father") page.
The code of pop-up is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>..:: Upload Img ::..</title>
<link href="/css/admin.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function fcnReload() {
top.showFotos('127d4efeef19abfcbc411507bd9d5de6', '_cookie.jpg|_f0.jpg');
}
</script>
</head>
<body onunload="fcnReload();">
<h3>Image uploaded - OK</h3>
Close the window<br /><br />
</body>
</html>
For some reasons, uploaded image not showing on IE9 and there is error:
SCRIPT438: Object doesn't support property or method 'showFotos' 1.html, line 9 character 6.
Probably there is some kind of IE problems on updating parent window: link1, link2
The function showFotos code:
function showFotos(session, names) {
var arrNames = names.split('|');
strNames = '';
for (var i=0; i<mdl_fotos; i++) {
if ((i==0) && (sel_mod==11)) {
document.getElementById('Preview-Color').src = '/uploads/'+session+arrNames[i+1];
document.getElementById('Preview-Color').style.width = '444px';
document.getElementById('Preview-Color').style.height = '350px';
strNames += ','+arrNames[i+1].replace('_','');
} else {
document.getElementById('ExtImg'+(i+1)).src = '/uploads/'+session+arrNames[i+1];
strNames += ','+arrNames[i+1].replace('_','');
}
}
if (arrNames[0] != '')
document.getElementById('Preview-Cookie').src = '/uploads/'+session+arrNames[0];
strSession = session;
strNames = arrNames[0].replace('_','')+strNames;
}
Why does IE8 fail to change the documents title with document.title="test title";
Following works on IE8 for me. But I did get the ActiveX security popup, so perhaps your IE8 is not set to prompt for these issues and just deny scripting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function changeTitle() {
document.title = 'Foobar';
}
</script>
</head>
<body onload="changeTitle()">
</body>
</html>
Really? Using document.title = 'Foo Bar'; has always worked for me. Is your script even executing?
Try shoving this right before the document.title = ...:
alert('I work.');
If you don't get an alert box, your script isn't even running.
found this:
http://support.microsoft.com/kb/296113
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function runTest()
{
var s ="We should set this as the new title"
var mytitle = document.createElement("TITLE");
mytitle.innerHTML = s;
alert(s);
document.documentElement.childNodes[0].appendChild(mytitle);
}
function fix()
{
var s = "Now we change the title";
alert(s);
document.title = s;
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Problem" onclick="runTest()"/>
<input type="button" value="Workaround" onclick="fix()"/>
</BODY>
for me this is works in IE 9,8,7
maybe you dont call your function, or there is something which not works.
the document.title must work!
The code provided below doesn't show all the content of that page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript">
var rootdomain="http://"+window.location.hostname
alert(rootdomain);
function ajaxinclude(url) {
var url=rootdomain+url;
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 ||
page_request.status==200)
document.getElementById("write").innerHTML=page_request.responseText;
}
</script>
</head>
<body>
<div id="write">
</div>
<input type="button" value="Submit !" onclick="ajaxinclude('/songcake/index.php');"/>
</body>
</html>
Please Help
Thanks.
You need to add a closure that reacts upon the completion of the document loading process.
page_request.onreadystatechange = function() {
if(page_request.readystate == 4) {
// data handling here
}
}
As pointed out though, using jQuery will make things a lot easier.
Edit: To clarify, your AJAX call does check for the connection status (request.status), but not for the loading status (request.readystate). Your document probably did not load completely.
Here's a reference for the W3.org XMLHTTPRequest API: http://www.w3.org/TR/XMLHttpRequest/ .
Edit2: Btw, an <iframe> element would solve your problem with a lot less code.
Edit 3: Code
function ajaxinclude(url) {
//...
page_request.open('GET', url, false) //get page synchronously
//<> add onreadystatechange handler
page_request.onreadystatechange = function() {
if(page_request.readystate === 4) {
if(page_request.state === 200) {
//call function on success
writecontent(page_request.responseXML)
}
}
}
page_request.send(null)
}
Some additions:
if you put your ajax call into the <HEAD> you need to either create the dom elements you want to append data to as they are not available when the runtime runs through (which might lead to a dom error); or you need to add an on dom load event handler.
Synchronous calls are not properly implemented in some browsers and this might lead to errors too.
Why you should not use jQuery? You can do this simple as below..
$("#write").load("/songcake/index.php");
[EDITED]
Below you can see the completed code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src='scripts/jquery.js'></script>
</head>
<body>
<div id="write">
</div>
<input type="button" value="Submit !"
onclick="$('#write').load('/songcake/index.php');"/>
</body>
</html>
You can download jQuery from here : http://jquery.com/
The source for my answer you can find here : http://api.jquery.com/load/
try to use FireBug
FireBug show you state of your request.
If it 200 and you see that in reqest answer (in firebug) broken data then
you should check your index.php script
Sorry, I am new to javascript. I am trying to call an object from inside a function to allow me to get a variable from a flash file at set intervals. For some reason the object is not working inside the timer function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIY Map</title>
<style>
* { margin:0; padding:0; }
</style>
</head>
<body style="font-family:verdana;color:#999; background-image:url('bg.png'); background-repeat:no-repeat;">
<script type="text/javascript" src="js/JavaScriptFlashGateway.js"></script>
<script type="text/javascript" src="js/Exception.js"></script>
<script type="text/javascript" src="js/FlashTag.js"></script>
<script type="text/javascript" src="js/FlashSerializer.js"></script>
<script type="text/javascript" src="js/FlashProxy.js"></script>
<script type="text/javascript">
var uid = new Date().getTime();
var flashProxy = new FlashProxy(uid, 'js/JavaScriptFlashGateway.swf');
var tag = new FlashTag('world.swf?data_file=data.xml, 600, 325);
tag.setFlashvars('lcId='+uid);
tag.write(document);
</script>
//flashProxy.call works here:
<p>Zoom Out
Get new data
<p>getZoom | getCoords</p>
<script type="text/javascript">
// Start the refreshing process
var seconds = 3;
var zoom;
var coords;
//timer loop
function checkmap()
{
//flashProxy doesn't work here
flashProxy.call('getCoords');
flashProxy.call('getZoom');
alert (coords);
alert (zoom);
setTimeout('checkmap()',seconds * 1000);
}
checkmap();
//Returns results here:
function gotCoords(n)
{
coords = n;
}
function gotZoom(n)
{
zoom = n;
}
</script>
To clarify, I am trying to get the flashProxy.call('****') to work in the checkmap() function. Thanks in advance.
I found the problem... it was that because there was no timer to start the inital flashproxy.call it was executing before the flash was loaded. I just replaced
checkmap();
with another
setTimeout('checkmap()',seconds * 1000);
Thanks everyone anyway
Did you know you have an extra/unclosed script tag in your source? This would cause problems.
<script type="text/javascript"> // This is your opening tag
<script type="text/javascript"> // Oops, this is parsed by the script engine
var uid = new Date().getTime();
var flashProxy = new FlashProxy(uid, 'js/JavaScriptFlashGateway.swf');
var tag = new FlashTag('world.swf?data_file=data.xml, 600, 325);
tag.setFlashvars('lcId='+uid);
tag.write(document);
</script>
The above code would throw a syntax error in any javascript engine and halt further execution.
Your source is also missing a ' on the following line:
var tag = new FlashTag('world.swf?data_file=data.xml, 600, 325);