Solved

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

Posted on 2008-06-25
10
1,060 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
10 Comments
 
LVL 4

Expert Comment

by:FSIFM
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 16

Expert Comment

by:Lolly-Ink
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Excellent work, I probably should have noticed or checked that myself. Thank you very much
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
You are very welcome.  Thank you for the grade & points.

Good luck & have a great day
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now