Cannot get an AjaxToolkit CascadingDropDown on client side after disabling it

Question

I have a CascadingDropDown that I don't want to run on PageLoad, but will run after a drop down list has been changed. In order to accomplish this, I'm disabling it server side on the page load event before it has a chance to run. Then when the ddl is changed, I'll use jquery to enable the CascadingDropDown. The problem I'm having is that jquery can't find the CascadingDropDown after it has been disabled. Does anyone know how I can get a hold of it, or an alternate way of doing this?

Here's my Cascading DropDown:

<ajaxToolkit:CascadingDropDown id="ajaxccd_ddlFoo" runat="server"
TargetControlid="ddlFoo" ParentControlid="ddlBar" PromptText="-- Select --"
Category="Foo" ServicePath="~/AJAXWebServices/CascadingDropDownPopulator.asmx" 
ServiceMethod="Populate_ddlFoo" />

The code where I disable it in the VB.net page load event:

ajaxccd_ddlTPA.Enabled = False

And here's where I try to get a hold of the object client side:

$(".ddlBarCls").click(function () {
        var ajaxccd_ddlFooID = document.getElementById('ajaxccd_ddlFooID').value;
        var ajaxccd_ddlFoo = $find(ajaxccd_ddlFooID);
    });

The problem is that ajaxccd_ddlFoo always returns back nothing. I have confirmed that when the ajaxccd_ddlTPA is not disabled server side, then jquery will have no trouble finding it.

Any help will be greatly appreciated!

Answer 1

ajaxccd_ddlTPA.Enabled = False

When you disable a control server side (see above), what actually happens is that the asp.net framework does not render the control to the browser. That's why your jquery can't find the control, because the control doesn't exist in the browser.

If you need to manipulate the control in the browser, then you'll need to disabled it in a way that the framework will still render it to the browser.

One way is to to render the control enabled, but then use javascript on the page load event of the browser to disabled it.

Example

Add this code in the head section of your Page(*.aspx).This code executes on Page Load event.

<script type="text/javascript">
    function pageLoad(sender, args) {
        $find("myFoo").add_populated(onPopulated);
    }
    function onPopulated() {
        $get("ddlFoo").disabled = true;
    }
</script>

And on your CascadingDropDown control add the necessary BehaviorID attribute

<ajaxToolkit:CascadingDropDown id="ajaxccd_ddlFoo"
    runat="server"
    TargetControlid="ddlFoo"
    ParentControlid="ddlBar"
    BehaviorID="myFoo"
    PromptText="-- Select --"
    Category="Foo"
    ServicePath="~/AJAXWebServices/CascadingDropDownPopulator.asmx" 
    ServiceMethod="Populate_ddlFoo" />