Beginning Ajax With ASP.NET (2006).pdf

Chapter 6
Using a for loop to iterate over each element of the ids array, you create a new selection option using the
following line:
htmlCode = document.createElement(‘option’);
This creates something like the following markup:
This is then added to the list of options for the drop-down list, and the corresponding id and textual display
values are then assigned to this newly added drop-down list option. Once all the options have been
added, the drop-down list is enabled by setting the disabled flag to false:
ddl.disabled = false;
The drop-down list is now populated with values from your asynchronous server-side call and ready for
selection. To illustrate that the drop-down list has been populated correctly, the drop-down list has had
its onchanged event assigned a JavaScript method to display the selected value, or ID of the textual
selection element. The following is the complete code listing for both web page and server-side code.
Try It Out
A More Complex Asynchronous Client Script Callback Example
Web Page (AsyncDropDownListExample.aspx):
Asynchronous Drop Down List Example
function LoadListItems()
{
StartAsyncCall(null,null);
}
function OnServerCallComplete(arg, ctx)
{
var idsAndNames = arg.split(“~”);
var ids = idsAndNames[0].split(“|”);
var names = idsAndNames[1].split(“|”);
var htmlCode;
var ddl = document.getElementById(“ddlList”);
for (var i=0; i < ids.length; i++)
{
htmlCode = document.createElement(‘option’);
150