Dynamically creating ASP.NET AJAX controls

In my previous post I showed how you can cache large HTML elements, such as SELECTs in the web browser's document cache.  What if you want to dynamically create and attach ASP.NET AJAX Control Extenders to the dynamically created SELECT?

I've already shown how you can call extenders from JavaScript, but if you want to create and delete them from scratch, you can use functions such as these:

function AddListSearchTo(list) {
    list.listSearch = $create(AjaxControlToolkit.ListSearchBehavior,
                              { 'promptCssClass' : 'listSearchPrompt' },
                              {}, {}, list);
}

function RemoveListSearchFrom(list) {
    if(list.listSearch ) {
        list.listSearch .dispose();
        list.listSearch = null;
    }
}

I use an expando on the target SELECT to point to the ListSearch Extender that I've dynamically created, which means that I can easily get hold of it if I want to remove it. 

As you can see you can easily pass initial properties too.  The $create function is a shortcut to Sys.Component.create

I use these functions when dynamically fetching HTML SELECTs from the server, in response to user input -- I've rolled my own CascadingDropDown. When I get the new SELECT back from the server the first thing I do is remove the existing extender from the existing SELECT, then I replace the old SELECT with the new one that I've just received, and then I dynamically instantiate a new ListSearch extender:

function OnGetListSucceded(list) {
    var theListDiv = $get('TheListDiv'); // Contains TheList
    var theList = $get('TheList');       // An HTML SELECT
    RemoveListSearchFrom(theList);

    theListDiv.innerHTML = list;
    theList = $get('TheList');
    AddListSearchTo(theList);
}