PDA

View Full Version : Refresh content within a page using jquery


dobbies
06-19-2011, 06:01 PM
Hi

I am using the jquery code below to primarily load a preloader and then my webcam image. This works just fine.

I now want to refresh the image every 5 seconds or so. Could somebody offer me advice to do just that? I've tried all sorts code and can't get it to work. Bit of a novice really!! :confused:

Help on this matter would be appreciated.

==============

<head>

DIV#loader {
border: 1px solid #ccc;
width: 640px;
height: 480px;
overflow: hidden;
}
DIV#loader.loading {
background: url(/preloader.gif) no-repeat center center;
}
</style>
<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var img = new Image();
$(img).load(function (){
$('#loader').removeClass('loading').append(img);
}).attr('src', '/webcam.jpg');
});
</script>
</head>

<body>
<div id="loader" class="loading"></div>
</body>

===============

jmichae3
06-26-2011, 10:13 PM
there is a meta refresh tag which will do just that.
[utl]http://www.metatags.org/meta_http_equiv_refresh[/url]

dobbies
06-27-2011, 05:56 AM
Your help is appreciated. I'll post my findings.

Many thanks.

domedia
06-27-2011, 01:02 PM
You should be able to reload the image only with jQuery. Meta refresh will reload the whole page.

gentleone
06-27-2011, 01:40 PM
Domedia is right. Here are some pointers:
http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/

http://designgala.com/how-to-refresh-div-using-jquery/

jmichae3
06-30-2011, 03:42 AM
yes, this is correct. another poster was having trouble with this type of jquery code, however. I can't get it to work in xhtml. and there is a safari bug that doesn't work properly with .hide()

still tinkering, but ran out of ideas of late. I am also new to jquery, but I am getting the hang of things quickly.

domedia
06-30-2011, 01:16 PM
One of the benefits of the jQuery framework is that it's stable, it works. No other JS framework has been as much implemented.

No doubt many people have problems implementing it, just like some people have issues writing HTML or CSS. That does not mean you can't use it. Even if Safari were to have a problem with the hide function (link please) it's not relevant to an image refresh.

jmichae3
06-30-2011, 04:58 PM
solved the problem. if using xhtml, avoid using uppercase with css for ff5 and avoid using js comments for ff5. causes stuff to not work.

it seems to me the old way of doing things was to use the timeout() function in js, in which you set up the timeout to have a callback function which called timeout() to do the same thing (using itself as the callback) at the end.

it seems to me you could do the same thing with jquery using its .Deferred() feature.
http://api.jquery.com/category/deferred-object/

jmichae3
06-30-2011, 05:25 PM
you realize all your code does is make a blank image? you need to fade the new one in, even if it's with time parameter of 0

I just learned that .Deferred has nothing to do with timeouts. sorry. I am still exploring jquery. I'm setting up a temporary test environment up here in this office. will get back to you. I am positive now it will have something to do with setTimeout()

jmichae3
06-30-2011, 07:44 PM
I used setInterval() instead since it is more appropriate.

jquery I don't think is capable of doing this kind of thing.



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img#i.loading {
}
</style>
<script type="text/javascript">
function refreshimage() {
var img = new Image(640,480);
img.src='blah.jpg';//apply new source image url here in place of a[index]
document.getElementById('i').src=img.src;
}
setInterval(refreshimage,5000);

</script>
</head>

<body>
<img src="some.png" id="i" class="loading" width="640" height="480"></div>
</body>
</html>

dobbies
07-01-2011, 09:13 AM
I used setInterval() instead since it is more appropriate.

jquery I don't think is capable of doing this kind of thing.



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img#i.loading {
}
</style>
<script type="text/javascript">
function refreshimage() {
var img = new Image(640,480);
img.src='blah.jpg';//apply new source image url here in place of a[index]
document.getElementById('i').src=img.src;
}
setInterval(refreshimage,5000);

</script>
</head>

<body>
<img src="some.png" id="i" class="loading" width="640" height="480"></div>
</body>
</html>



Thanks to everyone for all your imput but I am still really stumped. I'm a total newby to JS and JQuery and from what I see and read here I'm probably not even on the first rung of the ladder in terms of understanding what the code does.

My initial posting contains some code that loads a preloader, then seconds later my webcam image. It works well but now I want to incorporate some code that will then refresh the image every 5 seconds thereafter.

As far as I can make out the code that "jmichea3" just posted only refreshes the image once after 5 seconds but not thereafter.

I have some code here that I've been using for a couple of years now that refreshes my image every 5 seconds, but I do not understand why the code is set after the div tag within the body and not in the head, as seems to be the place to put it. If the script is moved and put in the head section the code doesn't work. Here it 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>Webcam</title>
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>

<div id="webcam"><img width="640" height="380" src="webcam.jpg" border=1 name="tcimage0" alt="If the image fails refresh the page">
<!-- Script for the "Cam Refresh" below has been condensed to a file "Camrefresh.js" placed in the (js) folder -->
<script language="JavaScript" type="text/javascript"
<!--
var tcimages = new Array();
tcimages[0] = "webcam.jpg";
interval = 5000;
function Refresh() {
for (i=0; i<=0; i++) {
tmp = new Date();
tmp = "?" + tmp.getTime();
document.images["tcimage" + i].src = tcimages[i] + tmp;
}
setTimeout("Refresh()", interval);
}
Refresh();
// -->"></script>

</div>


</body>
</html>

It was obviously written for a purpose other than what I use it for because there are parts of code that i don't think are relevent to me, but I got it off the net and it does the job.

I would appreciate any help with incorporating the two codes or infact any feeedback.

Finally, could anyone recommend any good books to learn Js from the basics to beyond?

cheers

jmichae3
07-05-2011, 08:27 AM
*SetInterval* is a periodic function whereas SetTimeout is a one-shot function. PLEASE note the difference and read about this function in Danny Goodman's Javascript bible, 7th ed or 2nd ed.

I could not figure out any working way to merge SetInterval with jquery. but I am a noob to jquery I admit. I am not new to JS, and I got done developing my own recursive tree menu, so I'm no slouch. jquery has a strange syntax to me that I don't fully comprehend.

the code as given should work just fine, it did for me, and I tested it on my test web server. it just looked a little different. in my case, it looked like this (enhanced more, modularized):

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img src="some.png" id="i" width="640" height="480">
<script type="text/javascript">
function preloadimage(id,source) {
var img = new Image(640,480); //new image object
img.src=source;
document.getElementById(id).src=img.src;
//I don't understand how this works, but it does.
}

function refreshimage() {
preloadimage('i', a[i]);
// wrap index i back to 0 if it gets close to array length
i++;
i %= a.length;
}

//simulate change of images using an array of image names
var a=new Array('i/DSCN0522-retouched.jpg','i/DSCN0579_stitch.jpg','i/DSCN0644-retouched.jpg','i/DSCN0657-retouched.jpg','i/DSCN0721.jpg','i/DSCN0742.jpg','i/DSCN0778-retouched.jpg');
var i=0;
//load up spinner image
preloadimage('i', 'spinner.gif');

setInterval(refreshimage,5000); //call refreshimage() every 5 seconds



</script>
</body>
</html>

jmichae3
07-06-2011, 03:17 AM
you could probably modfy this jquery code if you want to use jquery (I was wrong, it IS possible to use JQuery and SetInterval! Yay!) one of the scripts listed here:
http://snook.ca/archives/javascript/simplest-jquery-slideshow
I still think JQuery is a mystery to me. Until it isn't, I'm going to write regular JS code.