function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RuchieRuchie 

How to call the body- onload() javascript function in the VisualForce page.

Hi All,
Can anybody tell, how to call, the javascript onload() function in the <body> in a javascript. I wanted to call an alert statement, through a javascript on the onload function. Please help. Below is the code for reference:
 
<apex:page>
  
    <script type="text/javascript" src="/js/functions.js"></script>
    <script src="/soap/ajax/11.1/connection.js"></script>
    
<apex:pageBlock>
<apex:form>
  
<body onload="init();">       
<table width="100%">
<tr>
<td>
  <input type="text" id="txtName" />
  <input type="button" value="Save"  />
 
</td>
</tr>
</table>
</body>
 <script language="javascript">
sforce.connection.sessionId = '{!$Api.Session_ID}';
function init()
{
  alert('hi');
}
 </script>

  </apex:form>
</apex:pageBlock>
</apex:page>
Best Answer chosen by Admin (Salesforce Developers) 
Ron WildRon Wild

Try adding this script after your <apex:page> tag:

 

 

<script>
    
    var previousOnload = window.onload;        
    window.onload = function() { 
        if (previousOnload) { 
            previousOnload();
        }
    alert('loading...');

    }
</script>
 
 This should give you a popup on page load to confirm that the script is working.  Then swap out the alert() with the actual function you want to call.
 
Also, make sure the function you want to call has been defined or included prior to this script.
 
 
 


All Answers
JimRaeJimRae
You were pretty close.  I try to create any functions prior to their being called on the page, which seems to work.  Also, you need to move your session variable inside of the function, or it won't get executed.

Code:
<apex:page >
    <script type="text/javascript" src="/js/functions.js"></script>
    <script src="/soap/ajax/11.1/connection.js"></script>
    <script language="javascript">
        function init()
        {
                sforce.connection.sessionId = '{!$Api.Session_ID}';
                alert('hi');
        }
     </script>
    
<apex:pageBlock >
<apex:form >
  
<body onload="init()">       
<table width="100%">
<tr>
<td>
  <input type="text" id="txtName" />
  <input type="button" value="Save"  />
 
</td>
</tr>
</table>
</body>
  </apex:form>
</apex:pageBlock>
</apex:page>

 
NOTE: Fixed code error per Doug's suggestion.


Message Edited by JimRae on 12-28-2008 04:16 PM


dchasmandchasman
Please be aware that trouncing on the current value of body onload along with blindly adding base HTML structural elements like this when you have not suppressed the standard salesforce header/sidebar UI is very likely to cause the standard salesforce UI elements to not function correctly. Salesforce's standard generated HTML already contains a <body> element (along with others) and what you are generating from your VF page is not going to be valid HTML even though most browsers will try to make some sense of it and may appear to work - not something you want to depend on though.

I would recommend leveraging more of the VF component model in general - typically better ways to do things using components than raw HTML. For example, if you switch from external script includes to <apex:includeScript value="/soap/ajax/11.1/connection.js"/> VF will automatically take care of implementing once and only once inclusion in the <head> area.

I noticed that your init() declaration is not syntactically correct - you have the opening curly brace in the wrong location. 

In your specific case a better approach to hooking into body onload would be to do something along these lines:

Code:
<script>
    function init() {                
        sforce.connection.sessionId = '{!$Api.Session_ID}';
        alert('hi: ' + sforce.connection.sessionId);
    }
    
    var previousOnload = window.onload;        
    window.onload = function() { 
        if (previousOnload) { 
            previousOnload();
        }
    
        init();
    }
    </script>

Also, it is highly unusual to need to use the ajax toolkit anymore in the context of visualforce - VF already provides rich bidirectional value binding, ajax/partial page update support, etc which remove the majority of use cases for the ajax toolkit in a modern salesforce application. Can you provide some detail on what you are trying to accomplish where you believe you will need to use the ajax toolkit?

Finally, be careful about what parts of salesforce you chose to reverse engineer - functions.js is an internal detail we do not support customers/partners using in their pages. Anything you might see in the generated source that is not specifically designated/documented as a public API is very much subject to change - e.g. functions.js is undergoing some radical work in Spring '09 that is almost guaranteed to result in your unsupported uses no longer functioning after the update.


Message Edited by dchasman on 12-27-2008 09:26 AM


RuchieRuchie
Thanks Doug for you reply..


OlbrestOlbrest
To dchasman
   

I copied your final code and it does not work....


Message Edited by Olbrest on 01-20-2009 01:07 PM


Ron WildRon Wild
Try adding this script after your <apex:page> tag:
 
 
<script>
    
    var previousOnload = window.onload;        
    window.onload = function() { 
        if (previousOnload) { 
            previousOnload();
        }
    alert('loading...');

    }
</script>
 
 This should give you a popup on page load to confirm that the script is working.  Then swap out the alert() with the actual function you want to call.
 
Also, make sure the function you want to call has been defined or included prior to this script.
 
 
 
This was selected as the best answer
kkoenigkkoenig
An example of where I still need to use ajax is when i place a custom component inside an apex:repeat, and the component has, for example, a button that calls an actionfunction (that's also inside the component) with its rerender target being another element (that's also inside the component).  That rerender target is NOT given a unique id; all occurences of the rerender target are given the same id for each time the component is redrawn in the apex:repeat), so the rerender fails.  So, for things that need "repeating" with "rerendering", which in my case is quite a lot, I have to abandon the use of most visual force tags and go with plain old ajax and html.
 
Frankly, given what I described above, and the fact that you can't use apex:repeat to do thinks like populate rows in an apex:panelgrid, I think apex:repeat isn't ready for production release.  I really wasted a lot of time with it, thinking it could do what it should do, and it just doesn't.


DovaDova
Instead of window.onload you could use add event listener (and attach event for IE9 and earlier) like so:
 
if(window.addEventListener) {  window.addEventListener('load', functionToCall,false);
}
elseif(window.attachEvent) {  window.attachEvent('onload', functionToCall);
}


Sagar Nagvekar 14Sagar Nagvekar 14
<apex:page>
  <apex:form>
    <script>
      window.onload = function () {
         alert('hi');
      }      
    </script>
    This is your VF page. 
  </apex:form>
</apex:page>