Reload a javascript widget based on a time interval - javascript

http://jsfiddle.net/4B2Bc/1/ <- the link to the widget
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 );
});

Related

Javascript run function in background regardless the page

i need to run a function periodically regardless the page where i am. This function will get some data periodically.
I dont think that this works:
function myFunc()
{
//your code
}
//set the interval
setInterval(myFunc,2000) //this will run the function for every 2 sec.
Because it works only for the page where I am right now, so if i go to another page, function is not executed anymore.
I would like to write a function that start running when user is at index page and then is called periodically until user close the page.
Any idea? Thanks in advance!
That's not possible with javascript in the browser. When you navigate away from the page, the script will stop. You have to include a script on every page that initializes this periodical update. Or you could rewrite your application to a "single page application", which seems to be popular nowadays.
You'll need a backend application or cron-job to do that.
Another way do that would be to make an Ajax-only single page application. I guess twitter uses that model.
Depending on what your doing in the function you may be best to use a JS Worker which will run as a new thread and allow you to continue processing as much as you want in the background without having to worry about JS timeouts.
The main point here is what your asking for is near enough impossible within JS unless you use something similar to jQUery and dynamically load your pages in to a div? This would mean you still have the effect (visually) that you changing page but the browser only loads the data in.
Its very easy to in fact to load content in to a DIV using jQuery its:
$('#elementoloadid").load("/path/to/load");
You could achieve this without using jQuery but will take you longer.

How to detect that document loading has started through javascript?

I want to detect when the document has just started to load, so that I can make an ajax call right away...which will determine whether I need to navigate to another page or not. I don't want to wait for the entire page to load before firing the ajax, and then, possibly navigating away from this page on the basis of the result of this ajax request.
just put code in the head of the document, no?
or at the start of the body.
<script type="text/javascript">
function pageLoad() {
// Initialization code here, meant to run once.
}
</script>

back/next button in dynamically constructed webpage (AJAX)

My question is about using Back and Next buttons (of the browser) on an AJAX (dynamical) webpage.
The solution I self came up with:
setInterval(function(){
if (location.hash != hash)
{
hash = location.hash;
app.url = window.location.href.toString().replace('http://xxxxx.nl/xxxx/#!/','')
app.handleURL();
}
}, 500);
this function reads the url(hash) and compares it with the last stored url(hash), every 0.5 second. If url has changed (back/next is pushed) it runs handleUrl() which runs more functions to dynamically build my page.
the problem is, this sort of works BUT when I click an html [A] element or when I change the url in an other way (javascript), that content will be loaded TWICE because of the setInterval()... functionality.
How can I build my HTML/Javascript in such way that my content will always be loaded once,
once when I push back/next
once when I click on an HTML element/use Javascript functions on
runtime
I searched the sh*t out of google for a solution, plz help!
You don't need a timer to check it. Just use the onhashchange event, and fire your AJAX calls when the event is called. This event isn't supported in IE versions below 8, though, so your method seems fine if you need IE support.
Also, it doesn't make sense that they're being called twice for a elements, since there's no reason for the interval to call your AJAX loader twice just because the hash was changed using an a element. You probably have an event listener attached to the a element which causes it to load the AJAX content, which wouldn't be needed since you're detecting any change in the hash, no matter how it was changed.
I suggest using a library for that. It will be tricky to make your own solution. Take a look at these:
http://www.asual.com/jquery/address/docs/#sample-usage
http://benalman.com/projects/jquery-bbq-plugin/

How to execute a javascript before dom is ready?

I need to execute a javascript before the page is start to load? how can i do it? Atfirst my script should execute, after completion of script, if i need i should load the page else i shouln't load it. For example if my script redirect to another page i shouldnot load the current page else i should load it.
Do it server side ...
The logic you present, seems to fit better at the server side, if you really want to avoid the loading of the page completely..
simply write your script in the script tag as a first element in body tag:
-- updated --
for hiding other page elements, use div with full width and height, if you want to show the page, hide the div, that will fix the problem
You can't run a script before the page loads (without messing up the document type), but you can put the script early in the page, i.e. in the head section.
You can't stop the page from loading until your script has finished. The page will continue to load in the background, but it will not render until the script has finished.
If you do a redirect in your script, the page will stop loading, but what's already loaded will render while waiting for the new response to arrive.
Script tags are execute as soon as they are encountered. Just put your script tag early, and then use a redirect if your condition is true. Hooking the window.onload event handler is how you get Javascript to trigger on load.
Is it possible for you to serve a page initially which contains merely the JavaScript which you need to execute within an HTML document? You can then request the page you want based on the result of the JavaScript.
You could use the jQuery load() method to load a part of a page conditionally, which is not running script before the DOM is ready, but may achieve what you want to do.

Holding old image until new image is ready to update

I am using setInterval and the jQuery load function to periodically update an image tag.
var refresh_days = setInterval(function() {
$('#box_name').load("dynamic.php");}, 1000 );
This works, but there is a slight delay before the new image is fully loaded, during which nothing is shown.
Is there a way I can wait until the new image is loaded completely, and then display it, so that the image changes instantaneously from the user's perspective?
My target browser is Chrome and I do not need this to be compatible with IE.
Thanks,
You could load the image into an invisible <img> tag, and use the "load" event to update the visible one.
$('#hiddenImage').attr('src', newImageUrl).load(function() {
$('#realImage').attr('src', newImageUrl);
});
That way you know it's in the cache, so the update to the visible image should be pretty quick.
If you're reloading a whole chunk of stuff, then you're going to have problems because the "load" action will update the page and then the browser will start the HTTP transaction to satisfy the implicit "GET" request in the <img> tag. What you could do, therefore, is:
Load the whole blob into a hidden <div>
Have a live() handler waiting for the "load" event from the image tag in the hidden div;
React to the "load" event by moving the DOM subtree from the hidden div out to the place you really want it.
Try using the get() method instead...
$.get("dynamic.php", function(result){
$("#box_name").replace(result);
});
I'm thinking .load may be causing problems for you since you're actually reloading the entire HTML structure within that section of your HTML code.
Instead of using .load, I'd try using the jQuery.ajax() method. Attach a method to the success option which takes the returned image and swaps it in over the old one. This way, you're just using CSS to swap out the image rather than manipulating the DOM.
Look at http://docs.jquery.com/Ajax/jQuery.ajax#options for more info.

Categories

Resources