AJAX Page Load


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

AJAX Page Load

Here we look at some of the events associated with ASP.NET Ajax Page Load to help us in our ASP.NET AJAX and Javascript coding.

PageLoad

When we're coding with Javascript and ASP.NET with ASP.NET Ajax, we may want perform some Javascript with the Page has finished loading, kind of like the PageLoad event in the ASP.NET Page Life cycle. ASP.NET Ajax provides several events you can wireup additional method calls, so you can have Javascript fire off at certain points during the client's page life cycle.

The 'pageLoad' function allows us to wireup a method to fire off once PageLoad has occurred. For instance you may want to do some Javascript calculations or display effects only once the page has finished, so what you need to do is declare a function called pageLoad in your Javascript, and then the code in that method will be called automatically by ASP.NET Ajax once the page has loaded:


// wireup some code to the PageLoad event in ASP.NET Ajax
function pageLoad(sender, args) {

Sys.Application.add_load

You may have Javascript in several places, in several different files and also on the page for instance. Something I've come across before is that having more than one pageLoad method results in not all of them firing. If happens you can use the slightly more involved process of wiring up methods to fire once the page has loaded, but at least you can get all your individual methods from different sources to fire once the page has loaded.

What we need to do is use the Sys.Application.add_load call to assign an additional method to be called when the page is loaded. So in the below example wel get hold of Sys.Application and put into a variable called msApp, then we pass a method we've created called ApplicationLoad into the function .add_load of the msApp object (which refers to Sys.Application), and this will assign our method ApplicationLoad to be called once the page has loaded, just like the pageLoad would do.


// wireup some code to the PageLoad event in ASP.NET Ajax
var msApp = Sys.Application;
msApp.add_load(ApplicationLoad);

function ApplicationLoad(sender, args) {
    .....
}

ASP.NET AJAX UpdatePanel Partial Page Postbacks / Asynchronous Postbacks / Updates - get_isPartialLoad()

If we're using ASP.NET AJAX UpdatePanels, we'll be doing Partial Page Postbacks or Asynchronous Postbacks as they're also known. UpdatePanels make it nice and easy to give our application a smoother and more responsive UI feel without having to get into Javascript or jQuery to perform our Asynchronous calls.

So we may want to know when the page has loaded, whether this was a normal page call or postback, or whether it was a partial page postback. Well the Sys.Application object provides us with a way to determine whether our request is a partial postback or not:


var app = Sys.Application;
app.add_load(ApplicationLoad);

function ApplicationLoad(sender, args) {
    if (args.get_isPartialLoad()) {
        AttachQuantityUpdates();
    }
}

So here we have assigned a method to be called on PageLoad using the Sys.Application.add_load(..) event to add our handler called ApplicationLoad, and in our method we are passed the args object which contains the get_isPartialLoad() method which returns a boolean stating if we are in a partial post back or not, so we can now execute Javascript code specifically if we are posting back from an UpdatePanel, which is ideal if you have some javascript which only needs to run after an UpdatePanel has updated.

jQuery - (document).ready(function() ...

jQuery has a similar method known as document ready, which if you're not using ASP.NET Ajax, but you're using jQuery, will allow you to set a method to be called once the document is ready, so to speak, aka once the page has loaded.


$(document).ready(function() {
    AttachHighLights();
});


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.