having trouble with document.getElementById for dynamic client id

Question

Do you have to do anything special while passing in a dynamically created string as a clientID for document.getElementById?

I have a asp:gridview control that has a textbox column and a checkbox column. I added an onclick event to the checkboxes to set the textbox value of that row to the max value of all checked rows +1. I pass in the IDs of the grid and the controls of the row that was selected. I can getElementByID fine for these controls, but When I dynamically build the IDs of the other controls, I keep getting null, even though I know that the IDs are correct. My code is bellow.

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        for (var i = 0; i < grid.rows.length; i++) {
            var indexID = 102 + i;
            var cbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_chkGroup';
            var tbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_txtPriority';

            console.log("row" + i);

            //just for example of how it should be working
            console.log(cbID);
            var cbx = document.getElementById(cbID);
            console.log(cbx);

            //get row checkbox
            console.log(cbClientID);
            var thisCB = document.getElementById(cbClientID);
            console.log(thisCB);

            //get row textbox
            var thisTB = document.getElementById(tbClientID);
            console.log(thisTB);

            if (thisCB) {
                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }

        }
        tb.value = parseInt(maxv) + 1;
    }
}

Here is how its showing up in the console, where you can see the IDs for the first row are the same console log screenshot

For Those wondering about How I am calling the function, I am adding it on to a checkbox in a .net gridview control on row databind. It renders as follows:

<input id="LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup" type="checkbox" name="LeaveInfo$pnlMain$wgbLeaveSummary$gridSubmitted$ctl02$chkGroup" onclick="javascript:SetPriority('LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_txtPriority','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted');">

The vb .net code to add the function is this...(on-_RowDataBound)

        Dim chk As CheckBox = CType(e.Row.FindControl("chkGroup"), CheckBox)
        Dim tb As TextBox = CType(e.Row.FindControl("txtPriority"), TextBox)

        chk.Attributes.Add("onclick", String.Format("javascript:SetPriority('{0}','{1}','{2}');", chk.ClientID, tb.ClientID, gridSubmitted.ClientID))

Could you please log `cbID === cbClientID`? They seem to be similar, but maybe are not. — Bergi, Dec 17 '12 at 18:19
cbID === cbClientID is false for the first row... hmmmm weird.... looking into how that is now — jumpdart, Dec 17 '12 at 18:59

score 0 · Accepted Answer · answered Dec 17 '12 at 18:23

No, you don't have to do anything special when dynamically building a string. A string in javascript is the same string whether it was built dynamically or specified directly in your code. If document.getElementById() is not working, then one of the following is likely the cause:

Your string isn't what you think it is so it doesn't match the target id.
Your DOM id isn't what you think it is.
You have multiple elements with the same id (not likely here because you won't get null)
You are calling getElementById() before the DOM is ready or before the desired elements have been added to the DOM.

In this case, it seems more likely that 1) or 2) are the issues here, but you don't show us any context to know whether 4) could be the problem.

sounds like 1. is my issue here since cbID === cbClientID is false. and looking at the log should rule out the rest. I just need to figure how these strings are different — jumpdart, Dec 17 '12 at 19:02

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

Not 100% sure, but I think it could be a context issue. Try this:

           function ( id ) {

            var ID  = document.getElementById;
            this.id = id;
            this.newvar = ID.call( document, this.id );

                  ... 

                }

Also, this question may help you — it has a good explanation on context and assigning a var to getElementById Why can't I directly assign document.getElementById to a different function?

edited May 23 '17 at 12:18

Community

1
1

answered Dec 17 '12 at 19:16

Foreign Object

1,630
11
22

Where did you use the `getElementById` function without `document`? – Bergi Dec 17 '12 at 22:02
I didn't — I assigned the getElementById method to a var, and then used call() to bind `this` to `document` instead of `window`. I ran into this problem making a generic `Canvas` constructer, when I passed in the `Id` of the element as a parameter it would continually return an error, even though the DOM was loaded. I'm not sure if this is @jumpdart's problem, but it might be something worth exploring. – Foreign Object Dec 17 '12 at 23:47
Oops, typo. I wanted to ask where *he* (the OP) uses that function without context. He doesn't, so I think your answer is irrelevant. – Bergi Dec 17 '12 at 23:52
I said it could be a context issue, I never said he uses the function without context. I thought it might be something to quickly test. – Foreign Object Dec 18 '12 at 00:00

score 0 · Answer 3 · answered Dec 17 '12 at 20:21

I couldnt figure out why my IDs that seemed identical were not. I will leave this question open for anyone to add insight on how to remedy this. I ended up just getting my elements by cell and not by ID.

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        if (grid.rows.length > 0) {
            for (row = 1; row < grid.rows.length; row++) {
                var thisCB = grid.rows[row].cells[5].childNodes[1];
                if (thisCB == cb) {
                    continue;
                }
                var thisTB = grid.rows[row].cells[6].childNodes[1];

                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }
        }

        tb.value = parseInt(maxv) + 1;
    }
}

I would have expected some invisible characters somewhere, but I couldn't find any. Maybe in the invocation of `SetPriiority`? — Bergi, Dec 17 '12 at 22:06

having trouble with document.getElementById for dynamic client id

3 Answers3