Comments on: Cleanest way of executing javascript code on page load

By: anthony

anthony — Tue, 30 Jun 2009 06:12:01 +0000

Creating a custom EPiServer property is relatively easy – although I think I’ve not quite got the hang of how to store the actual data. It must be converted to a string for storage in the database. I started to use an XmlSerializer but got confused (mainly as the JavaScript was doing my head in) as to where i should be doing the serialisation. Sadly the only example i could find on the net was how to create a custom property that was a string – about as much use as a chocolate fire guard! So here’s my way of doing it – using a comma separated string (dirty I know!) – please feel free to show me the correct way.
http://www.casinoszocken.de/

By: Trygve Lie

Trygve Lie — Thu, 11 Jun 2009 23:46:20 +0000

Interesting. I’ve been dealing with the same issue in a project which interac heavy with the DOM. I’ve got some limitations in this project which prevents me from using any of the JS libraries out there (so the “ready” function in JQuery are out of the question) and easy injection into a document is a must.

I ended up writing a small bootstrap script for javascript functions.

The bootstrap has a array intended to hold functions. Then there is a small “load” function which attach itself to “DOM readyness” and run trought the array of functions and fire the functions in it’s order in the array when the DOM is ready. For the “DOM readyness” detection I use the DOMContentLoaded which are supported in most new sane browsers and a small “hack” (http://javascript.nwbox.com/IEContentLoaded/) for detecting the same “DOM readyness” in IE. This way of detecting “DOM readyness” is pretty much the same way as JQuery and other JS libraries do.

I did post the bootstrap script with documentation, examples and the source a couple of weeks ago: http://www.trygve-lie.com/blog/entry/bootstraping_javascript

By: cancel bubble

cancel bubble — Tue, 03 Mar 2009 18:01:09 +0000

There’s an even shorter alternative with jQuery:

$(function() {
// your code here
});

By: Learning jQuery

Learning jQuery — Fri, 26 Dec 2008 14:57:31 +0000

There is a shorthand alternative to $(document).ready(); Use this shortcut:

jQuery(function(){
// your code here
});

By: Maicon Peixinho

Maicon Peixinho — Thu, 11 Dec 2008 11:48:10 +0000

There are other ways that do not require a specific framework for this, such as the function addLoadEvent () “, which is added some methods in the page when all the elements are loaded.

Example:

Excuse me shift the focus on the topic, but does not taste much of jquery, and therefore, shared a bit of a different note.

Thank you.

By: Dan

Dan — Mon, 08 Dec 2008 18:34:46 +0000

@Rick F
Thanks, I think that it’s exactly what I was searching for. I’ll try it and write a post about.

By: Rick F

Rick F — Mon, 08 Dec 2008 16:08:08 +0000

Have a look at the jQuery plugin “LiveQuery”. I think it covers some of the cases you mention here.

http://plugins.jquery.com/project/livequery

By: DevelX

DevelX — Wed, 03 Dec 2008 16:13:48 +0000

Hm, well… I prefer this way:
if (document.addEventListener !== undefined) {
document.addEventListener(‘load’, init, false);
} else {
document.attachEvent(‘onload’, init);
}
This way you cannot make a collision with other scripts using document.load and such. But, well, you need to wait until all images etc are loaded.
But for the specific usage you need seems pawel’s script good enough.

By: Dan

Dan — Wed, 03 Dec 2008 13:19:40 +0000

@pawel Yeah… I think that’s a good solution. Nicer and shorter than the “each” technique. Thanks a lot!

By: pawel

pawel — Wed, 03 Dec 2008 12:07:36 +0000

In external JavaScript file:

$(document).ready(function(){

if( $(‘ul#users’)[0] ){
loadUsersWithAjax();
}

});

I think it does exactly what you want to do: no function calls in HTML document, calling loadUsersWithAjax() when the DOM is ready and only if there’s “ul#users” in the DOM.