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.
So let’s move the javascript into the “Script” section and let it work from there instead of the body’s onload event.
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';
}
}
