Refreshing only one <div> in page with just regular Javascript

Question

If I am not grabbing any information from the server but I want to reload/refresh a div every N seconds how do I do this?

New to javascript: I've tried something like

 <script type = 'text/javascript'>
    function refresh(){
        setTimeout(window.location.reload(), 10000);
    }

    </script>

    <div id='target' onLoad='refresh()'>
<?    
var =grab some rapidly changing content from the web    
print var
  ?>  
    </div>
    <div>
    some stuff that doesn't get refreshed
    </div>

Its not clear to me that I need AJAX if im not getting the new info from the server...so for now i'd like to know how to make it work just in javascript

EDIT: I prefer not to use a library for this basic operation so ideally I wouldn't use jquery, prototype etc. EDIT II: Not sure why people are saying the div isnt changing...the content in it is dynamic it is grabbed (say scraped) from the web...and everytime it goes to grab stuff the stuff has changed at the source...an example could be grabbing search results from twitter which change very rapidly...

Answer 1

Yes you do need Ajax, because by definition, that is what Ajax is. ESPECIALLY if you want to grab content from another website.

I know you said you want to use plain javascript, but check this out, maybe you'll like this. Take a look at this awesome jQuery plugin. https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

It VERY SIMPLE TO USE it let's you perform Ajax sing jQuery with one VERY BIG DIFFERENCE: you can grab content from ANYWHERE (e.g. another website where your content comes from). You just use the same jQuery.load() method or .ajax() method just like you would on your own server, except you can grab content from anywhere!

Just add the plugin script to the page (after jQuery), then use the .load() method as described here.

So in your case, you can do something like this:

$('div#target').load('http://somewhere.com #newContent');

That will get #newContent from somewhere.com and place it inside #target on your site.

You could do something like this using javascript's setInterval:

setInterval( function() {
    $('div#target').load('http://somewhere.com #newContent');
}, 5000); //repeat function every 5000 milliseconds

That will repeat whatever is inside the function(){} every 5000 milliseconds (aka 5 seconds).

You can also get content from your own site:

$('div#target').load('http://yoursite.com/some-page #someContent');

That will put #someContent and whatever is inside of it from http://yoursite.com/some-page into #target on http://yoursite.com/whatever-the-current-page-is

All in all, this is a super simple way to load content. jQuery is only 31kb in size (minified), and I believe it's worth it. There's no need to reinvent the wheel when jQuery can do what you want, and efficiently at that, unless you are trying to learn javascript in and out. If you just want your site to work (the end result is what matters), then give the super simple method i just explained a try.