Tags

, , ,

I have been working with SharePoint for five years and most of these years were dedicated to JavaScript development in SharePoint. But even after five years, I keep seeing developers making a big mix of code, especially when it comes to execute JavaScript functions when the page is loaded.

As jQuery is very popular today, most of the developers are using $(document).ready() for executing code when page is fully loaded. I am not going to explain this technique, but I am going to tell it is not perfect. And there is a big reason for this. It is not executed when an asynchronous postback occurred.

There is a solution for this and is very simple. Creating a simple function called “pageLoad” and put the logic there should solve the problem, as this function is trigger by the Microsoft Ajax.

function pageLoad(sender,args) {
// This function is executed when page is loaded and even if async postback occured.
}

Of course, different logic can be applied if page is loaded after asynchronous or not (maybe an initial load).

function pageLoad(sender, args) {
    var isAsyncLoad = args.get_isPartialLoad();
    // Split the logic if load is sync or async
}

Handlers for load event can be added also programmatically.

function a(sender, args) {
	alert(sender.get_isInAsyncPostBack());
}

function b(sender, args) {
	alert(sender.get_isInAsyncPostBack());
}

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(a);
prm.add_pageLoaded(b);

In total, there are several events which can be used with Sys.WebForms.PageRequestManager, but these will be treated in a different post: initializeRequest, beginRequest, pageLoading,pageLoaded, endRequest.

However, if all of the above code is working, is because SharePoint is web forms technology based, but there is also another way to do this, this time SharePoint specific. The technique is simple and consists in adding function names to an array called “_spBodyOnLoadFunctionNames”.

function a() {
	alert('a');
}

function b() {
	alert('b');
}

_spBodyOnLoadFunctionNames.push('a');
_spBodyOnLoadFunctionNames.push('b');

Using this method, event handler will be trigger only if load is complete (no function executed after partial postback). This is the reason I personally prefer the first ones.

So here we are at the end of the article. If you feel you need to add something, please let me know. I might missed some information.

Happy Coding!!! 🙂

Advertisements