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.
R2CAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
Drat...  Please forgive my typographical error.

It should have a leading lowercase s

setTimeout()

http://www.w3schools.com/htmldom/met_win_settimeout.asp
0
 
James GlenIT 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:

$(function(){function_Name()})
0
 
bakuretsuCommented:
Another way that relies on a library would be to use prototype.js (www.prototypejs.org).

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 www.prototypejs.org/api
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
HonorGodSoftware EngineerCommented:
What does your

window.onload

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()'>
0
 
Lolly-InkCommented:
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 -->
<script>
   var element = document.getElementById("divExample");
   var load()
   {
      element.style.display = "none";
   }
   window.onload = load;
</script>
 
<!-- This script will succeed -->
<script>
   var element;
   var load()
   {
      element = document.getElementById("divExample");
      element.style.display = "none";
   }
   window.onload = load;
</script>

Open in new window

0
 
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.
0
 
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

0
 
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 ) {
    ShowTab(1)
  }
else {
    SetTimeout(Timer, 1000)   }
}
0
 
R2CAuthor Commented:
Excellent work, I probably should have noticed or checked that myself. Thank you very much
0
 
HonorGodSoftware EngineerCommented:
You are very welcome.  Thank you for the grade & points.

Good luck & have a great day
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.