JavaScript - How do I call a JavaScript function AFTER everything has been rendered on the page?

Does anybody know how to call a JavaScript function after the page has been completely rendered. I am trying to hide certain parts of the page using display:none but when I use window.onload I get an error saying the element cant be found, I know it is definately there.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Graham HirstIT EngineerCommented:
I normally do this by downloading the jQuery library and plugging it into the page

eg. <script type="text/javascript" src="jquery.js"></script>

and doing the following:

Another way that relies on a library would be to use prototype.js (

First include the script:

<script src="prototype.js" type="text/javascript" language="javascript"></script>

And then you can call functions after the page is finished loading like so:

Event.observe(window, 'load', function() {
  // call a function or run some code.

The benefit to this approach is that you can have as many of those blocks of code as you would like and none of them will override the other. When you write something into the window.onload property, you overwrite any previous value. Thus,

window.onload = function() { alert("Hello."); };
window.onload = function() { alert("World."); };

Would result in an alert dialog saying "World" and nothing more. If you wanted them both to fire, you could use Event.observe for both.

Event.observe(window, 'load', function() { alert("Hello."); });
Event.observe(window, 'load', function() { alert("World."); });

Then you would get two dialogs in succession. You can use Event.observe() to observe any event from any object, as well. Such as clicks, window resizes, etc. Documentation is at
HonorGodSoftware EngineerCommented:
What does your


look like?  And what does the specified code look like?

The function specified by window.onload will be called once the page is
"completely" loaded.  However, if the function that you invoke changes
(or tries to change) the DOM, or the page, you could get the error that
you are seeing.

I have used this construct numerous times, with great success:

<body onload='init()'>
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

The issue here is not with window.onload. This is a simple event and should work every time.

The issue is with your code in getting the element. Make sure you are using the correct id name. Another common mistake is trying to get an element before the page has loaded. You must get the element after the page has loaded (or at least until after the element has been created), and then you can do anything you like with it.

For example:

<!-- This script will result in an error in function load -->
   var element = document.getElementById("divExample");
   var load()
   { = "none";
   window.onload = load;
<!-- This script will succeed -->
   var element;
   var load()
      element = document.getElementById("divExample"); = "none";
   window.onload = load;

Open in new window

R2CAuthor Commented:
I think I have figured out what is happening, I could still do with a hand figuring out how to fix it though!
The page is using AJAX to do partial page postbacks, on this page there are several panels that are made invisible using server-side code.
One of these hidden panels has the elements I am trying to hide and show using JavaScript.
This panel becomes visible when I click on a certain object (an image button I have put in a template field of a grid).
I am assuming the JavaScript cant find the object when the page first loads because it is within a panel hidden with server-side code.
I need this JavaScript to run at some point so put the code in the onClientClick of the image button (in the grid). It had no effect, the JavaScript ran before the page was re-rendered.
To slightly alter my original question, how do I call a JavaScript function after a partial page postback and all the objects have been redrawn?
Sorry if im being a pain.
HonorGodSoftware EngineerCommented:
You could use a timer to check periodically for the presence of the document element.

function Something( id ) {
  var ele = document.getElementById( id );
  if ( ele ) {
    // do whatever you want with the element
  } else {
    SetTimeout( 'Something("' + id + '")', 1000 );  // Try again in 1 second

Open in new window

R2CAuthor Commented:
I think you might be on to something, that would work perfectly - except it doesnt want to!!
I have put the name of the object straight into the JavaScript as I am only going to use this code once. The problem seems to be with SetTimeout, everytime it gets to it I get 'SetTimeout is not defined' in Firebug. I have tried a whole load double quote, single quote and bracket combinations incase I have the syntax wrong but nothing seems to work!!

function Timer() {
  var ele = document.getElementById("Tab1");
  if ( ele ) {
else {
    SetTimeout(Timer, 1000)   }
HonorGodSoftware EngineerCommented:
Drat...  Please forgive my typographical error.

It should have a leading lowercase s


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
R2CAuthor Commented:
Excellent work, I probably should have noticed or checked that myself. Thank you very much
HonorGodSoftware EngineerCommented:
You are very welcome.  Thank you for the grade & points.

Good luck & have a great day
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.