Solved

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

Posted on 2008-06-25
10
1,074 Views
Last Modified: 2010-04-21
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.
0
Comment
Question by:R2C
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 4

Expert Comment

by:FSIFM
ID: 21866041
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
 
LVL 1

Expert Comment

by:bakuretsu
ID: 21866256
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 21866335
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 16

Expert Comment

by:Lolly-Ink
ID: 21880104
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
 

Author Comment

by:R2C
ID: 21882533
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 21882660
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
 

Author Comment

by:R2C
ID: 21883808
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 21887298
Drat...  Please forgive my typographical error.

It should have a leading lowercase s

setTimeout()

http://www.w3schools.com/htmldom/met_win_settimeout.asp
0
 

Author Closing Comment

by:R2C
ID: 31470575
Excellent work, I probably should have noticed or checked that myself. Thank you very much
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 21917814
You are very welcome.  Thank you for the grade & points.

Good luck & have a great day
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question