Javascript to display sharepoint list items on page load

Question

With Client Object Model API and a bit of javascript, I want to retrieve the items of a sharepoint list and display them into the web page, when the web page loads.

I've successfully implemented examples working with button or link click event handler. But when I try to use the code with onload I get an error.

---

Assuming I've my ViewItem() function defined in the head.

If I use this code in the body:

  <a onclick="javascript:ViewItem()">View</a>

all is fine.

If I try with classic onlaod, the call fails:

 <script type="text/javascript">
  window.onload = ViewItem ;
 </script>

---

The line of code in ViewItem function which generates the error is as follows:

   var myContext = new SP.ClientContext.get_current();

This code works fine with the onclick event handler, but fails with the onload event handler with error:

SP.ClientContext is null or not an object

How can I solve this issue? Why it happens only when the function is called with onload?

---

I've tried managing the onload with ExecuteOrDelayUntilScriptLoaded as suggested by the answers below, but no success. The behavior is as follows now:

The onclick works fine.

As soon as I add the code ExecuteOrDelayUntilScriptLoaded in the HTML body, the ViewItem function does not get executed and the onclick returns the error message which I've described in my initial question.

If I remove the onclick and leave the onload only, no error is returned but the ViewItem does not get executed.

---

I've found that it works fine with jQuery only. Don't know why.

Code Details: https://gist.github.com/1744459

Answer 1

The reason why you get the SP.ClientContext is null or not an object error is because when you call your function on window.onload event, the sp.js file is not loaded on the page yet. The sp.js file contains all the code for the Client Object Model and hence your code is not able to find the SP.ClientContext object.

The solution is pretty simple. Call you function like this:

<script type="text/javascript">
  window.onload = function(){ ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js"); };
</script>

The ExecuteOrDelayUntilScriptLoaded function makes it sure that your ViewItem function is executed only after the sp.js file is completely loaded on the page.

---

The accepted (working) solution is as by the comments jQuery:

$(document).ready(function(){ ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js"); });

Answer 2

SharePoint 2010 introduces new feature named Script On Demand. It means that almost all scripts in sharepoint loaded on demand. In your situation you access to SP.ClientContext that is declared in sp.js, which is not loaded yet. Special function exists to wait until particular js file is loaded - ExecuteOrDelayUntilScriptLoaded. This function accepts two arguments - function and script name. If script with specified name already loaded, function will be called immediately, if not, it will be called as soon as script will be loaded.

Your code using this notes should look like:

window.onload = function(){
    ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
}

And some more notes. If you want to run some js code after page load, preferable way to use shaerpoint built-in mechanism (or jQuery if possible) which involves using _spBodyOnLoadFunctionNames array. This array contains function names that will be called after body loaded. So, updated code:

function myfunc(){
  ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
}
_spBodyOnLoadFunctionNames.push("myfunc");

Answer 3

I would suggest that you shouldn't use the window.onload(); instead try and use this.

$(document).ready(function() 
 {
    // executes when HTML-Document is loaded and DOM is ready
    ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
    alert("(document).ready was called - document is ready!");  
 });  

Hope this fixes the issue.

Answer 4

Using window.onload in a modular application like SharePoint is not a good practice, as the latest window.onload will overwrite all others. My take is that it is your issue here.

Instead, SharePoint implements a built-in mechanism to pile up onload functions (as explained by Kai). I would expect this to work (not tested):

_spBodyOnLoadFunctionNames.push(function(){ExecuteOrDelayUntilScriptLoaded(ViewItem,"sp.js");});