Archive

Posts Tagged ‘JQuery’

Differences between ready () and Microsoft AJAX pageLoad(). When to use ready and pageLayout

October 3, 2011 Leave a comment

Introduction

Some time people gets confused about when to use Jquery ready() and pageLoad method. This article explains clear differences between pageLoad and Jquery ready().

Introduction on ready() and pageLoad()

JQuery’s ready() function is part of JQuery framework. Main importance of ready() function is , this event/method gets fired up on load of screen. At times people uses ready() function has initializes and also event binding for some of the control. ready() function is only fired once, for example : If your screen has partial post back /updates, then for every refresh or content refresh, ready () doesn’t get fired. It only fires initially on loading of page. So what is difference between ready and window.onload() . Window.Onload() method gets fired once all the content load in the page, i.e If the page contains heavy image, Window.Onload() will not fire until all the images get loaded. At times, we want some function to fire, once entire DOM structure is constructed. In those scenarios, we will make use of JQuery’s ready() function.

Now comes pageLoad, When Microsoft is developing asynchronous post-backs, it is expected that window.Onload function should be fired on refreshing of panel, but surprising the window.Onload function hasn’t fired, since document content Loaded or document readyState isn’t set to completed state. Onload function get triggered if browser supports DOMContentLoaded (which is presents only in non IE Browser). So Microsoft started implementing similar Onload function in AJAX , which gets fired on every asynchronous request. So If you AJAXify your asp.net page, Sys.Application is the client namespaces which performs all AJAX request, binging events etc. pageLoad is the alias method for sys.Application.add_Load() .

So AJAX pageLoad handlers gets fired up on each and every Asynchronous request. There is caveat here is, Always declare or implement your pageLoad method after declaration of scriptmanager and before closing tag of Form ( ). When AJAX panel makes an partial postback or asynchronous call, panel’s gets refreshed and OnLoading response for asynchronous call, this PageLoad event triggers.

Here is the syntax,

function pageLoad(sender, eventArgs) {

//ur code here

}

In comparison with ready(), ready() triggers only once ,after dom structure is constructed but doesn’t get fired up for every asynchronous calls. Whereas, pageLoad fires every time on every asynchronous calls.

There is another approach incase if you are not happy with above method, in JQuery 1.3 introduces live() method. $(document).live() event solve the famous ASP.NET Ajax and jQuery post back problem s.

With Regards,

Mahender

Categories: Jquery Tags:
%d bloggers like this: