How to find a dynamically-generated HTML element?

Question

I need to get the client-side instance of a RadComboBox (or the newly-selected value of a RadComboBox) when my RadGrid is leaving edit mode so I can post back the changed value to the server.

The problem is, the client-side id of the object always changes. Also, the RadComboBoxes aren't created at runtime -- they're only created after the user double-clicks a specific row of my RadGrid. Therefore, syntax such as

var SundayLoc = $find("<%= FieldOpsScheduler_ctl00_ctl05_RCB_SunLocale.ClientID %>");

equals FAIL. Until I started getting changing values, I was able to get away with this:

var SundayLoc = $find("FieldOpsScheduler_ctl00_ctl05_RCB_SunLocale");

This worked perfectly every time until I added some row separator objects which now cause the "ctl05" of the ids to always change depending on what row the user puts into edit mode. I've tried using all matters of getting this object and its value, but to no avail.

I was going to try using regular expressions until after reading a community wiki answer by bobince at http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 has brought me to the realization that the temptation to parse HTML with regular expressions is the work of unholy Satan-spawn (that and after further research I've come to the conclusion that regular expressions probably won't help me).

Anyway if someone could throw some ideas my way I'd greatly appreciate it. Thank you in advance.

Answer 1

• create a list of some sort on the server side to keep track of control id's
• when you render the page for whatever reason, write those id's out in a script block (put them in an array or whatever)
• when you need to submit your values, you can use the javascript array contents to reference the controls.

you might have to do a little more work to find your actual values. for ingragistics' fancy-pants controls they provide a special method to get information about the "control" as a whole. rad controls might have something similar.

Answer 2

Okay so the answer I ended-up coming up with isn't really eloquent, but it's 100% reliable and all on the client-side (which is good because my company has IE7 as its standard web browser x_x).

I was able to get rid of a bunch of $find commands and if-statements because I no longer have to search for the specific HTML ids.

        function SelectedIndexChanged(sender,eventArgs)
        {
            var rcbID = sender.get_id();
            var LocID = rcbID.substring(0,37) + "Locale";
            pastCombo = currentCombo;
            currentCombo = eventArgs.get_item().get_text();

            if(editedRow != null)
            {
                var Location = $find(LocID);

Since the ids weren't being generated server-side (as far as I could tell, although admittedly I didn't try Roatin's solution because I had thought of mine before I saw his answer + mine seemed simpler since I'm already doing a bunch of stuff client-side inside JavaScript), I looked around to see what I was already getting, and realized that var rcbID = sender.get_id(); was already getting me an extremely similar value to what I was already looking for (only instead of it saying SunLocale, it said SunActivity).

So I figured hey, I can substring() out everything in rcbID and then append "Locale" to it, and then run a $find() command on that in order to get me the proper RadComboBox. Turns out it works. Anyway though I do thank you guys for looking into my problem even though I ended-up finding my own solution. :-)