Javascript/JQuery after ajaxToolkit:CascadingDropDown populates

[J'Tok]

Sorry for everything being marked as code. It wouldn't let me post it unless I did (and, yes, I did try using the Inline Code option as you can see by the single quotes around much of what is written here).

I have a page with an updatepanel that contains two `ajaxToolkit:CascadingDropDown` controls.
I am trying to populate them after the page loads using javascript and/or JQuery. However, with all of the methods I've tried, the javascript runs before `cascadingdropdown` controls have rendered. It finds the initial `dropdownlist` controls just fine, but the cascadingdropdown controls return null.
I know the javascript function I'm calling is good, because it works if I make a button on the page call my function. So, it seems like the function is firing too early.
I've tried to fire it using `window.load`, `document.ready`, by registering a client startup script in my code behind, and by just calling the function in script tags located at the bottom of my aspx page. I've also tried adding a two second delay at the start of the function by waiting for the clock to reach now plus two seconds. 

To summarize
My function works, but is just not being called at the correct time. Where and when do I need to call it for the page to truly be finished loading all my controls?

Thanks,
    JTok

[JorgeM]

Are you 100% sure the function works? Sorry to ask.

[J'Tok]

JorgeM, thank you for your interest. I did ensure it works when using a button, but it was never finding the cascadingdropdown controls when run during one of the other events I mentioned above.
However, I did manage to get this working as seen here.

Basically, I had to add BehaviorIDs to each of my cascadingdropdown controls and then search for them instead of just the ID. I also had to call my original function using the javascript method pageLoad instead of one of the others. However, since pageLoad is called with any postback, I added a boolean variable to track that so that the function is only called once like so:

var done = false;
function pageLoad(sender, args) {
    if (!done) {
        myFunction();
        done = true;
    }
}

For future readers, I would also like to point out that there is an onPopulated event that should work, but wasn't firing for me. You can see how to add that here:

 function pageLoad(sender, args)
     {
         var cdd = $find("behaviorIDofCDD");
         cdd.add_populated(onPopulated);
     }
 function onPopulated()
     {
         //any function to be called
     }

Also, for those looking to manipulate cascading drop downs via javascript in the future, here is how I did it:

var ddl1 = $get('ddl1');
var cddl1 = $find('bID1');

ddl1.set_SelectedValue = "My Value"
if (cddl1 != null) {
    cddl1.set_SelectedValue("My Text", "My Value");
}

Please be aware that I am finding the dropdownlist controls using $get and their ID, but the cascadingdropdown controls are being found using $find and their behaviorID.

To set them back to the selection prompt, you can set just the primary cascadingdropdown like this:

ddl1.selectedIndex = 0;
if (cddl1 != null) {
    cddl1.set_SelectedValue('', '');
}

I have included all this extra stuff because their is nothing worse that finding the right question in a forum, but not getting a detailed enough answer.

• JTok