Reload a javascript widget based on a time interval

http://jsfiddle.net/4B2Bc/1/ <- the link to the widget开发者_如何学JAVA

I have this javascript widget, which I want to reload every 60 seconds so the content on it is refreshed. However the problem is that whenever I use set timeout or anything else within the widget or outside the widget, the whole screen goes black when the widget refreshes.

In the debug window I can see that the json file for the new content is retrieved with the right content but it doesnt apply.

So the only other method I was left was to keep on writing the <script type="text/javascript" src="http://domainsoutlook.net/wjs/12_61532/" charset="utf-8"></script> tag which reloads the whole js and refreshes the widget, but the problem with this is that it happens quickly and at once, not periodically.

Any solutions guys...I am willing to use jquery in the widget if it is going to help.

Your script erases the page because you're using document.write:

Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call.

And document.open:

If a document exists in the target, this method clears it.

So if you call document.write any time except when the document is being initially loaded, you'll replace the entire document with what you write.

Don't use document.write to do your updates, just use a bit of AJAX to reload some new data from your server and then replace just the parts you need to replace using what ever DOM manipulation or jQuery techniques work best.

Once you have that working, use setTimeout or setInterval to arrange calls to your server for fresh data.

using jquery you can set an interval, which is like a timer.

$(function() {
    setInterval( "refreshWidget()", timeinmilliseconds );
});