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

https://stackoverflow.com/questions/903959

05-09-2019
|

Question

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

Solution 8

OTHER TIPS

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.

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

$(document).ready(function() {
  //Call your function here
});

Try the "defer" attribute.

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

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.

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.

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;

I know this is really late for this post, but the reason this isn't working is that PHP renders HTML and then you can't interact with it again (unless you can do some snazzy AJAX stuff). Point being that the JS works fine bc it is client side, PHP doesn't work bc it is server side. Hope that helps anyone else who comes here!

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow