tags:

views:

2197

answers:

9
Q: 

How do I trigger a Javascript function AFTER the page loads?

** EDIT **

I'm afraid I wasn't in the right direction - the problem isn't what I asked about. the Javascript works as it should, it's the PHP that doesn't show what I want it to on the first "run" - and I'm stil not sure why. Sorry for somewhat wasting your time...

**

I have a form that might or might not already contain data in its fields. If a user reaches the form and he already has some data in the system, his ID number, for instance, will appear in the ID field - and a JavaScript function running onLoad will disable the input field and change its style:

<body onload="runFunction()">

the problem is that it seems to run before the PHP does its part, and only if I refresh the page, the JS function does everything I want it to (it disables and styles some other form fields that depend on a PHP condition).

Is there a way to have this JS function run AFTER the page was rendered? I tried running this before closing the page:

<body>
...
...
<script>
runFunction();
</script>
</body>
</html>

but to no avail.

any ideas? Thanks!

some of the relevant PHP code: [I removed id attributes to make reading easier]

<?php if ($h_phone != '' && $h_phone_pre != '') {  
echo "<td class=\"input\"><input type=\"text\" id=\"new_user_home_tel\" value=\"$h_phone\" size=\"8\" maxlength=\"7\" disabled=\"disabled\" /> -  
<select id=\"new_user_home_tel_pre\" disabled=\"disabled\">  
  <option value=\"$h_phone_pre\" selected=\"selected\"></option>";

     } else {

echo '<td class="input"><input type="text" id="new_user_home_tel" size="8" maxlength="7" /> -  
 <select id="new_user_home_tel_pre">  
   <option value=" " selected="selected"></option>';
    }?>  <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="08">08</option>
     <option value="09">09</option>
</select> 
</td>

the Javascript code just changes the style if the field isn't empty and that works, but the PHP works only after a refresh.

A: 

jquery will help you: http://jquery.open2space.com/node/9

Stephen Wrighton  2009-05-24 15:15:28
+5  A: 

Your Javascript does run after the page is loaded, the problem is elsewhere.

It must be that your server sends different HTML before and after refresh. I suggest that if you save the source of the page you get first time and compare it with the source you get after refresh. I bet you will spot the difference and that will tell you what is wrong.

buti-oxa  2009-05-24 15:17:07
I tried that - the HTML is identical...
Calvin_il  2009-05-24 15:31:21
Does it repro if you save the HTML locally and open in from local machine?
buti-oxa  2009-05-24 15:48:46
@buti-oxa: yes.
Calvin_il  2009-05-24 16:10:12
I suggest you add a debug button that calls runFunction() on click and see what happens if you click that when you are sure the page is loaded.There are no miracles, identical HTML should produce identical results.
buti-oxa  2009-05-24 16:15:23
One suggestion... When I run into a JavaScript problem I try and step through the JavaScript code using a debug editor like Visual Studio.
Dscoduc  2009-05-24 16:19:32
@Dscoduc - this isn't a Javascript problem... so stepping through it is irrelevant here, I think.
Calvin_il  2009-05-25 11:54:03
Are you saying that the two HTMLs were not identical after all? That first one contains empty first option, and the second one has user phone there?It seems then that the problem lies in the part of your PHP code that sets $h_phone and $h_phone_pre. I suspect some SQL problem.
buti-oxa  2009-05-25 15:04:51
it's definitely a PHP problem but the generated HTML was identical before and after refreshing, which is weird, I double-checked that...
Calvin_il  2009-05-26 10:40:40
Weird. I doubt we can help you w/o reproing the situation. :(
buti-oxa  2009-05-26 15:48:05
+2  A: 

JQuery does this. Anything inside the following will execute once the page is rendered:

$(document).ready(function() {
  //Call your function here
});
Boiler Bill  2009-05-24 15:18:14
That jQuery code does exactly what his code does, there could be no difference.The reason jQuery way is better is that it does not require changing HTML, nothing more.
buti-oxa  2009-05-24 15:28:08
I tried jQuery and it gives me Javascript errors, both the minified version, the uncompressed version, and even if I link directly to it.
Calvin_il  2009-05-24 16:08:11
@buti, that *is not* the same. jQuery will run that code when the document is ready but his onload handler will wait until all images have downloaded including banners.
Neil Trodden  2009-05-25 13:37:08
A: 

Try the "defer" attribute.

mr-euro  2009-05-24 15:19:23
A: 

One way is to output-buffer the page in PHP. That means everything generated goes into memory until the script finishes running and then it's all sent out at once.

Take a look at http://uk.php.net/ob_start

Oli  2009-05-24 15:27:24
A: 

the non JS library answer is:

<script>
window.onload = function(){
 /* do stuff */
}
</script>

However using a JS library like JQuery will take care of all those niggle cross browser bug/problems.

Your right to place your <script> blocks at the end of you body. This improves page load performance as the browser blocks when it hits a <script> block.

Andrew  2009-05-24 15:29:16
what's the difference between your suggestion and my calling the function from the JS I called at the document's <head>?and the JS isn't so heavy - right now I don't mid if it takes a few more milliseconds to load...)
Calvin_il  2009-05-24 15:48:57
It wouldn't matter if you placed the window.onload at the beginning or the end of the body, as it will only get executed after the body finishes loading.
Dscoduc  2009-05-24 16:17:24
A: 

Definitely hacky, but you could always put a 2x2 transparent image below your form and run the function using it's onLoad. I did a similar thing on a conditionally included file so there were no errors in the case that the file wasn't included.

Shadow  2009-05-24 16:21:06
I tried that... I added: <img src="images/test.gif" alt="test" onload="runFunction();"/>instead of onload at the body tag, but sadly this dodn't work.
Calvin_il  2009-05-25 11:55:47
A: 

I'd suggest that you add your content to an output variable and than echo it at the end of the file. Ex:

...
$output .= '<body onload="runFunction();">';
while(...)
{
   $output .= '...';
}
$output .= '</body>';
...
echo $output;
Ivarska  2009-05-24 16:35:09
A: 

I'm afraid I wasn't in the right direction - the problem isn't what I asked about. the Javascript works as it should, it's the PHP that doesn't show what I want it to on the first "run" - and I'm stil not sure why. Sorry for somewhat wasting your time...

Calvin_il  2009-05-25 13:35:27

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?