We Keep Coding

Call a function in javascript only after page load

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>

Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}

The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>

I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}

window.onload function called twice

I have a simple form with post method. I am not sure why window.onload() function gets called twice below it shows up the page? Below is the code
function window.onload() {
initialisePage();
}
<form id="frmMain" method="post" runat="Server">
</form>
I tried using document.isready function before calling initialisePage didn't help.

If window.onload gets called twice, means some changes are still happening on front side after initial load.
A better to way would be by checking
window.onload = function() {
if(document.readyState == 'complete') {
myFunction();
}
};

SYNTAX ERROR in your code. onload should be written as follow:
<script>
window.onload = function() {
initialisePage();
}
</scipt>
OR
window.onload = initialisePage; // Thanks to #nnnnnn
Documentation

You can use below line of code :
$(document).ready(function(){
initialisePage();
})

<script>
window.onload = initialisePage;
</scipt>

Click a button element on page load

I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Watch</button>
<button class="button dh" id="refreshButton" >Refresh Geolocation</button>
</div>
The javascript:
run:function() {
var that = this;
document.getElementById("watchButton").addEventListener("click", function() {
that._handleWatch.apply(that, arguments);
}, false);
document.getElementById("refreshButton").addEventListener("click", function() {
that._handleRefresh.apply(that, arguments);
}, false);
},
Thanks!

I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:
$(function() {
$('#watchButton').click();
});
http://jsfiddle.net/isherwood/kVJVe/
Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4
That said, why not just name your function and call it directly?

It would be click() not click
document.getElementById("watchButton").click();
You would need to call it onload or after the function has run

window.onload = function () {
document.getElementById("watchButton").click(); };
Try this ^^

try trigger
<script>
$(document).ready(function() {
$("#watchButton").trigger('click');
});
</script>

document.getElementById("studyOne").click();
$("#studyOne").trigger('click');
Put this in onload function. It worked for me.

Javascript using onload twice in html file and external script file

I have an external JS file that I load into my HTML
<script type="text/javascript" src="../js/busy.js"></script>
The script file itself looks like this:
window.onload = setupFunc;
function setupFunc() {
document.getElementsByTagName('body')[0].onclick = clickFunc;
hideBusysign();
Wicket.Ajax.registerPreCallHandler(showBusysign);
Wicket.Ajax.registerPostCallHandler(hideBusysign);
Wicket.Ajax.registerFailureHandler(hideBusysign);
}
function hideBusysign() {
document.getElementById('busy').style.display ='none';
}
function showBusysign() {
document.getElementById('busy').style.display ='block';
}
function clickFunc(eventData) {
var clickedElement = (window.event) ? event.srcElement : eventData.target;
if (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT') {
showBusysign();
}
}
Basically, it shows a little busy indicator within my website.
I also have an onload function in my body tag, this is new and helps me focus on the username text field when the page loads.
<body lang="de" class="fade-in one" onLoad="document.forms.login.username.focus();">
However, since I added this last functionality, the busy indicator stopped working because it also uses the onload function. What can I do to make it work again?

it's not the most elegant way .. but it will work
<body lang="de" class="fade-in one" onLoad="document.forms.login.username.focus();setupFunc();">

Remove your body onload tag and put:
<script type="text/javascript">
window.onload = function() {
document.forms.login.username.focus();
setupFunc();
};
</script>
After your external Javascript (make sure it's still in the <head> tag). That should change window.onLoad to your custom function, which does what you need and then calls setupFunc.

Best way to modify an element that is not yet created

I have an <input> field in my web page, and I want to add a particular method on it, let say fooBar().
Here is what I do:
<input id="xxx" .../>
<script type="text/javascript">
$("xxx").fooBar = function() { ... };
</script>
This works well. However, for some reasons I will not detail here (in fact the HTML is generated by JSF components), the <script> will be declared before the <input> tag.
So in others words, I will have that in my HTML:
<script type="text/javascript">
$("xxx").fooBar = function() { ... };
</script>
<input id="xxx" .../>
So of course this code will not work correctly, as the script will try to get ($("xxx")) and modify an element that does not exist yet.
If I want to stick on the exact order of these two tags, what is the best way to accomplish what I want?
Edit
In my case, $ refers to prototype, but I am also using jQuery in my application. And I must be compatible with IE6 :o(

You need to run your script after the document is loaded. With jQuery you'd do that with:
$(document).ready(function () {
//do stuff here
});
I can't tell which library you're using here, but they all have an equivalent of jQuery's document ready.
Here's the prototype equivalent:
document.observe("dom:loaded", function() {
// do stuff
});

Try putting your code in load event:
$(window).load(function(){
$("#xxx").fooBar = function() { ... };
});

If the code has to be directly before the input, you can check if it has loaded after a certain period of time.
<script type="text/javascript">
//Sets up a function to execute once the input is loaded
f = function ()
{
//Checks if 'xxx' exists (may vary between frameworks)
if ($("xxx") !== undefined)
{
$("xxx").fooBar = function() { ... };
//Escapes the timer function, preventing it from running again
return true;
}
//If still not loaded check again in half a second (0.5s or 500ms)
setTimeout(f,500);
return false;
}
f();//Initialize the timer function
</script>
<input id="xxx" .../>

Instead of adding a method to the dom node, why not make it a separate function, so instead of
$("xxx").fooBar = function() {
doStuff(this);
};
you would have something like
function xxx_fooBar () {
var me = document.getElementById('xxx');
doStuff(me);
};
Another suggestion: If you can add attributes to the <input> element, you could do something like this...
<script>
function xxx_init (e) {
e.fooBar = function () {
doStuff(this);
};
}
</script>
<input onload="xxx_init(this)" id="xxx" .../>
Or you could do as others suggest and attach the scripts to the window.onload event.