How to refresh part of a page automatically
I have a page with a webcam image in it. The webcam uploads a new image every 60 seconds, and I use a HTML refresh to refresh the whole page every 60 seconds. It seems a bit clunky to me. It's worked just fine for several years, but I'd like to see if i can find a way to refresh only the div that contains the image. (or iframe if that's a better way to do it but i'd like ot stay away from frames and iframes if i can). Does anyone know how I could do this? i.e. just refresh part of the page automatically?Is there a jquery plugin that would do that? It needs to be fully automatic so the page just changes, a bit like the way facebook changes all by itself as new material is received. -- Cheers Mike Kear Windsor, NSW, Australia Adobe Certified Advanced ColdFusion Developer AFP Webworks http://afpwebworks.com ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356926 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to refresh part of a page automatically
You can use a setInterval call in JS to run every 60 seconds and reload the image. You don't need a jQuery plugin for this. On Thu, Oct 17, 2013 at 6:16 AM, Mike K afpwebwo...@gmail.com wrote: I have a page with a webcam image in it. The webcam uploads a new image every 60 seconds, and I use a HTML refresh to refresh the whole page every 60 seconds. It seems a bit clunky to me. It's worked just fine for several years, but I'd like to see if i can find a way to refresh only the div that contains the image. (or iframe if that's a better way to do it but i'd like ot stay away from frames and iframes if i can). Does anyone know how I could do this? i.e. just refresh part of the page automatically?Is there a jquery plugin that would do that? It needs to be fully automatic so the page just changes, a bit like the way facebook changes all by itself as new material is received. -- Cheers Mike Kear Windsor, NSW, Australia Adobe Certified Advanced ColdFusion Developer AFP Webworks http://afpwebworks.com ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356927 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to refresh part of a page automatically
Real quick example here. It uses a date object to add a unique URL
parameter to the end which should help with caching. No jQuery used, just
standard HTML. The querySelector call is *kinda* modern-ish only (see
caniuse.com for specifics) and could be replaced by
document.getElementById. Oh - and I used 3 seconds. You want to change that.
!doctype html
html
head
titleMy Page/title
meta name=viewport content=width=device-width, initial-scale=1
/head
body
img src=sourceimage.jpg width=300 height=300 id=theImage
script
document.addEventListener(DOMContentLoaded, function() {
var img = document.querySelector(#theImage);
var src = ./sourceimage.jpg;
window.setInterval(function() {
img.src = src + ?d= + (new Date().getTime());
console.log(img.src);
},3000);
}, false);
/script
/body
/html
On Thu, Oct 17, 2013 at 6:36 AM, Raymond Camden raymondcam...@gmail.comwrote:
You can use a setInterval call in JS to run every 60 seconds and reload
the image. You don't need a jQuery plugin for this.
On Thu, Oct 17, 2013 at 6:16 AM, Mike K afpwebwo...@gmail.com wrote:
I have a page with a webcam image in it. The webcam uploads a new image
every 60 seconds, and I use a HTML refresh to refresh the whole page every
60 seconds.
It seems a bit clunky to me. It's worked just fine for several years,
but
I'd like to see if i can find a way to refresh only the div that contains
the image. (or iframe if that's a better way to do it but i'd like ot
stay
away from frames and iframes if i can).
Does anyone know how I could do this? i.e. just refresh part of the page
automatically?Is there a jquery plugin that would do that? It needs
to
be fully automatic so the page just changes, a bit like the way facebook
changes all by itself as new material is received.
--
===
Raymond Camden, Adobe Developer Evangelist
Email : raymondcam...@gmail.com
Blog : www.raymondcamden.com
Twitter: cfjedimaster
~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356928
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to refresh part of a page automatically
If you want to get anal, you could set a setTimeout and listen for the load
event on the image. That way if it takes a bit longer to load an image one
time the code will hold off on firing another request. (Probably not an
issue though if you are waiting 60 seconds.)
On Thu, Oct 17, 2013 at 6:46 AM, Raymond Camden raymondcam...@gmail.comwrote:
Real quick example here. It uses a date object to add a unique URL
parameter to the end which should help with caching. No jQuery used, just
standard HTML. The querySelector call is *kinda* modern-ish only (see
caniuse.com for specifics) and could be replaced by
document.getElementById. Oh - and I used 3 seconds. You want to change that.
!doctype html
html
head
titleMy Page/title
meta name=viewport content=width=device-width, initial-scale=1
/head
body
img src=sourceimage.jpg width=300 height=300 id=theImage
script
document.addEventListener(DOMContentLoaded, function() {
var img = document.querySelector(#theImage);
var src = ./sourceimage.jpg;
window.setInterval(function() {
img.src = src + ?d= + (new Date().getTime());
console.log(img.src);
},3000);
}, false);
/script
/body
/html
On Thu, Oct 17, 2013 at 6:36 AM, Raymond Camden
raymondcam...@gmail.comwrote:
You can use a setInterval call in JS to run every 60 seconds and reload
the image. You don't need a jQuery plugin for this.
On Thu, Oct 17, 2013 at 6:16 AM, Mike K afpwebwo...@gmail.com wrote:
I have a page with a webcam image in it. The webcam uploads a new image
every 60 seconds, and I use a HTML refresh to refresh the whole page
every
60 seconds.
It seems a bit clunky to me. It's worked just fine for several years,
but
I'd like to see if i can find a way to refresh only the div that contains
the image. (or iframe if that's a better way to do it but i'd like ot
stay
away from frames and iframes if i can).
Does anyone know how I could do this? i.e. just refresh part of the page
automatically?Is there a jquery plugin that would do that? It needs
to
be fully automatic so the page just changes, a bit like the way facebook
changes all by itself as new material is received.
--
===
Raymond Camden, Adobe Developer Evangelist
Email : raymondcam...@gmail.com
Blog : www.raymondcamden.com
Twitter: cfjedimaster
--
===
Raymond Camden, Adobe Developer Evangelist
Email : raymondcam...@gmail.com
Blog : www.raymondcamden.com
Twitter: cfjedimaster
~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356933
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to refresh part of a page automatically
Ray, thanks for this. I can see you get your kicks writing bits of code like this dont you. You've gone wy past answering my question as you usually do, and I'm most grateful. I have a suspicion your idea of a relaxing evening on your vacation is a coding problem and a laptop, where the rest of us will waste our time on a cold beverage and warm company on the couch. Actually Ray waiting for the image to finish uploading IS an issue.We frequently see the webcam page with no image on it because the page refreshed while the new image was uploading. I experimented with getting ColdFusion to read the file and write it out to another file, and have the page call that one, but coldfusion still hiccupped when there wasn't a complete image. ( I never got to finishing writing a handler for that - this is a probono site for me and I had to move on to paying work.) Cheers Mike Kear Windsor, NSW, Australia Adobe Certified Advanced ColdFusion Developer AFP Webworks http://afpwebworks.com ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month On Fri, Oct 18, 2013 at 6:12 AM, Raymond Camden raymondcam...@gmail.comwrote: If you want to get anal, you could set a setTimeout and listen for the load event on the image. That way if it takes a bit longer to load an image one time the code will hold off on firing another request. (Probably not an issue though if you are waiting 60 seconds.) ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356936 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to refresh part of a page automatically
On Thu, Oct 17, 2013 at 8:40 PM, Mike K afpwebwo...@gmail.com wrote: Ray, thanks for this. I can see you get your kicks writing bits of code like this dont you. You've gone wy past answering my question as you usually do, and I'm most grateful. I have a suspicion your idea of a relaxing evening on your vacation is a coding problem and a laptop, where the rest of us will waste our time on a cold beverage and warm company on the couch. Heh, you don't notice that week or so when I don't blog? That's vacation. ;) ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:356937 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
