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>
Related
I'm pretty new at javascript and I've encountered a problem:
I 've a method which calls an Action through a button in my jsp page.
The thing is, I want to execute this Action immediately after loading my jsp page, without having to use the button event.
I'm trying to use the onload() event inside the body of the JSP. This does executes my Action after loading, however, it stays in an infinite loop, because it loads the page over and over again.
<script language="JavaScript" type="text/javascript">
function send()
{
document.forms['thisForm'].submit();
}
</script
....
<body onload="send()">
<html:form action="/something/foo.do?method=methodFoo" method="post">
Is there anyway to avoid this infinite loop?
Thanks a lot!
You can try AJAX to execute your action without submiting the form.
There are a number of potential ways to solve this, but I will start with the one I like the best:
BODY onLoad="window.location.href='EXAMPLE.html';" onUnload="send();"
What happens here is that the first thing it does is pass you to a new web page ("EXAMPLE.html") but it has to run your JavaScript when it is exiting. By doing this it is unable to get into the infinite loop.
Another approach:
BODY onLoad="send();window.close();"
With this one it will attempt to close the window after running your command. I am not a big fan of this because that window.close command can behave differently depending on the browser they use, and it almost always needs the individual to agree to close it. But, it might work for you.
Why is waiting until the page is loaded to execute this code important ?
window.onload = function () {
//javascript code
}
Most Javascript functions are intended to modify the content or structure of the DOM, but trying to affect the document programmatically should not be undertaken until the document is fully loaded. The onload event fires after the target document is loaded, thus ensuring that the code attached to the event is capable of affecting the corresponding document.
It is important, but you can also not use it.
You need to wait for the page to load when scripts need to modify/read elements in the page (they need to exist, and while the page is loading they don't exist yet): if you don't interact with the page, you don't need to use window.onload.
window.onload will execute the code once everything is loaded. This comes into importance when you need any element in the page to be present in the page for the script to execute.
eg: You are trying to alert a value in a textbox which has a default value and we have a script to alert this. Now this script should be executed once all the elements have been loaded. putting this code within the window.onload will ensure that it is loaded before execution.
on the other side if you do not need anything to be loaded for the script to run it need not be in the window.load.
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.
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 );
});
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.