Workflow Short – pageLoad() and Dynamic Update Panels

A quick note on using DynamicUpdatePanels and body onload events.  The update panels, when updated, do not trigger the body’s onload event.  To get past this, we can use the form’s “Script” section and use the native function pageLoad() to run the actions we want to have happen.

As an example, I have two DropDownList components inside an update panel.  The first list can be considered a parent list (and is set to post on value change), and the second list is filtered based on the selected parent in the first drop down.  The selection list in the second drop down is determined by a dynamic model; thus the implementation of an update panel.  This all works just fine, as-is.

The issue came up when I tried to use body onload, as I normally do, to update/alter css classes and html types depending on the outcome of value evaluations.  However, when the update panel updates, body onload doesn’t accompany the update, so when the panel refreshes (when a selection is made in the first drop down) the elements inside are reset to their default states.

Symantec Workflow Update Panel vs Body onload()
When a selection is made for the first drop down, if it doesn’t equal the initial option, we want the “required” red right border and gray background to change.

So let’s move the javascript into the “Script” section and let it work from there instead of the body’s onload event.

Symantec Workflow Update Panel vs Body onload()
This illustration shows the elements after the javascript has been moved to the “Script” section inside the pageLoad() function.

Note that as soon as the item is selected in the first drop down list, the panel updates and the pageLoad() script runs.  The proper CSS class is applied based on the selected option.

Now some script.  This isn’t all of it, but it’s the pertinent “Script” section, and should demonstrate how we’re using the pageLoad() function.


function pageLoad() {
// declarations
var woType = document.getElementById('DropDownWorkOrderType');
var problemCode = document.getElementById('DropDownProblemCode');
// assign appropriate css class to Work Order Type drop down
if (woType.options[woType.selectedIndex].text == 'Select a Work Order Type') {
woType.className = 'gaDropDownRequired';
}
else {
woType.className = 'gaDropDown aInputValid';
}
// assign appropriate css class to Problem Code drop down
if (problemCode.options[problemCode.selectedIndex].text == 'Select a Problem Code') {
problemCode.className = 'gaDropDownRequired';
}
else {
problemCode.className = 'gaDropDown aInputValid';
}
}


Featured Components

DropDownList

DynamicUpdatePanel


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s