JavaScript pageLoad() for MasterPage and ContentPage

I was experimenting with the DragPanelExtender recently, and almost immediately ran into the question of how to position it upon opening.

There are a lot of articles to be found on this question, and they always deal with it by means of a JavaScript function called pageLoad(), which is called by the ASP.Net Ajax framework sometime while the page is loading.

Now my application already has a pageLoad() function in the MasterPage, so adding a function of the same name in the ContentPage just did not work, as it would not be called by the framework.

My knowledge of JavaScript is not too profound, and I found that a function definition in JavaScript is actually a property of the window object. The hint was a line in the MicrosoftAjax.js file:

if (window.pageLoad) window.pageLoad(this,a);


meaning: if there is a defined function named pageLoad(), it is a property of the window object, and the value of the property is not null (== not false), and I can call it.

The solution was clear to me soon: if I need a pageLoad() method in the ContentPage, I need to name it differently and check for its definition in the MasterPage.

The pageLoad() in the MasterPage looks like this:

function pageLoad(sender, args)
{
    ...
    // ... do my MasterPage JavaScript stuff...
    ...
    if (window.contentPageLoad) {
        window.contentPageLoad(sender, args);
    }
}

and the ContentPage has its equivalent contentPageLoad() function:

function contentPageLoad(sender, args)
{
    // do something
}

Initializing HoverMenuExtender and CollapsiblePanelExtender

A few tips on how to avoid screen flicker during page load when working with HoverMenu and CollapsiblePanel

Some AjaxControlToolkit tips

I collected a couple of tips searching the web for answers…

ASP.Net Ajax: make sure you check for IsAsync!

I am experimenting with a couple of Ajax controls from the AjaxControlsToolkit. I have read quite a couple of articles about them, but you never know when to apply that knowledge you acquired by browsing around.

Well, today I hit a problem using a CalendarExtender in a FormView on an UpdatePanel:

Selecting the Edit mode of the FormView always raised a Javascript exception stating a Javascript syntax error, and a .js file not being able to be loaded.

After googling around and finding that I am the only one on the planet that experiences that problem, I remembered an article about Ajax traps and handling of asynchronous events.

Handling CollapsiblePanelExtender events in Javascript

I am currently migrating two ASP.Net projects to VS 2005 AjaxControlToolkit.

Of course I had a glance at the samples, and compared the functionality to its open source counterpart, namely Prototype plus Scriptaculous.

When I built a navigation menu using a couple of CollapsiblePanelExtender controls, I ran across two problems:

1) It seems extremely difficult to store the current state of CollapsiblePanelExtenders to be retrieved in the next GET. The simplest solution would be an asynchronous callback from the extender, but that functionality is not included in the framework.

2) I wanted to collapse the whole navigation menu, which is kept inside an HTML table. To keep the table format static, I used a style=”width: 200px” attribute. However, if the navigation menu is to hide, the width should be set to the size of the expanding icon.