Login Register

dojo.addOnLoad

dojo.addOnLoad(Function fn)

Sooner or later, every Javascript programmer tries something like this:

<script>
  if(dayOfWeek == "Sunday"){
     document.musicPrefs.other.value = "Afrobeat";
  }
</script>
<form name="musicPrefs">
<input type="text" name="other">
...

It doesn't work because the "other" control is not defined yet. You can move the code to the bottom of the page, but that removes the linear nature of HTML. If you're reading the code, you want to zero in on a control, and see the code that influences it close by.

dojo.addOnLoad(...) defers script execution until all the HTML is loaded. So this code:

function setAfrobeat(){
   document.musicPrefs.other.value="Afrobeat";
}
dojo.addOnLoad(setAfrobeat);

conveniently replaces the one above. When the function is small, you may prefer to write it inline:

dojo.addOnLoad(
    function(){
        document.musicPrefs.other.value="Afrobeat";
    }
);

This is the function literal or anonymous function construct of JavaScript. If it looks really, really wierd to you, take a peek ahead at Functions as Variables for an explanation.

Load your own libraries after...

I'm not completely sure why this is, but when I tried to load my own js library before dojo.addOnLoad(), it was as if the dojo.addOnLoad() was not called. I moved the <script> tag to after the dojo.addOnLoad(), then it worked.

So my <head> element contains all dojo stuff first, then a single call to load my own script library. Perhaps after some more experience I can figure out why this is.

Importantance of wrapping dojo in dojo.addOnload

dojo.require statements execute asynchronously! Therefore code that instantiates a widget may have unpredictable results if not "wrapped" by dojo.addOnLoad. (i.e. make sure that dojo is fully initialized before using any widget from javascript).