возникли проблемы с document.getElementById для динамического идентификатора клиента

Нужно ли вам делать что-то особенное при передаче динамически созданной строки в качестве идентификатора клиента для document.getElementById?

У меня есть элемент управления asp:gridview, который имеет столбец текстового поля и столбец флажка. Я добавил событие onclick к флажкам, чтобы установить значение текстового поля этой строки на максимальное значение всех отмеченных строк +1. Я передаю идентификаторы сетки и элементы управления выбранной строки. Я могу получитьElementByID в порядке для этих элементов управления, но когда я динамически создаю идентификаторы других элементов управления, я продолжаю получать нуль, хотя я знаю, что идентификаторы верны. Мой код ниже.

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;
    }
}

Вот как это отображается в консоли, где вы можете видеть, что идентификаторы для первой строки одинаковы. ">

Для тех, кто интересуется, как я вызываю функцию, я добавляю ее в флажок в элементе управления .net gridview в привязке данных строки. Это выглядит следующим образом:

<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');">

Код vb.net для добавления функции таков... (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))

person jumpdart    schedule 17.12.2012    source источник
comment
Не могли бы вы войти cbID === cbClientID? Вроде похожи, а может и нет.   -  person Bergi    schedule 17.12.2012
comment
cbID === cbClientID является ложным для первой строки... хмммм странно.... глядя на то, как это сейчас   -  person jumpdart    schedule 17.12.2012


Ответы (3)


Нет, вам не нужно делать ничего особенного при динамическом построении строки. Строка в javascript — это одна и та же строка, независимо от того, была ли она построена динамически или указана непосредственно в вашем коде. Если document.getElementById() не работает, вероятно, причиной может быть одна из следующих причин:

  1. Ваша строка не такая, как вы думаете, поэтому она не соответствует целевому идентификатору.
  2. Ваш идентификатор DOM не то, что вы думаете.
  3. У вас есть несколько элементов с одинаковым идентификатором (здесь это маловероятно, потому что вы не получите null)
  4. Вы вызываете getElementById() до того, как DOM будет готов или до того, как нужные элементы будут добавлены в DOM.

В этом случае кажется более вероятным, что здесь проблемы 1) или 2), но вы не показываете нам никакого контекста, чтобы узнать, может ли 4) быть проблемой.

person jfriend00    schedule 17.12.2012
comment
звучит как 1. это моя проблема, так как cbID === cbClientID является ложным. и просмотр журнала должен исключить все остальное. Мне просто нужно понять, чем эти строки отличаются - person jumpdart; 17.12.2012

Не уверен на 100%, но я думаю, что это может быть проблема контекста. Попробуй это:

           function ( id ) {

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

                  ... 

                }

Кроме того, этот вопрос может вам помочь — в нем есть хорошее объяснение контекста и назначение var для getElementById Почему я не могу напрямую назначить document.getElementById другой функции?

person Foreign Object    schedule 17.12.2012
comment
Где вы использовали функцию getElementById без document? - person Bergi; 18.12.2012
comment
Я этого не делал — я присвоил метод getElementById переменной, а затем использовал call() для привязки this к document вместо window. Я столкнулся с этой проблемой при создании универсального конструктора Canvas, когда я передал Id элемента в качестве параметра, он постоянно возвращал ошибку, даже если DOM был загружен. Я не уверен, что это проблема @jumpdart, но, возможно, это стоит изучить. - person Foreign Object; 18.12.2012
comment
Ой, опечатка. Я хотел спросить, где он (ОП) использует эту функцию без контекста. Он не знает, поэтому я думаю, что ваш ответ не имеет значения. - person Bergi; 18.12.2012
comment
Я сказал, что это может быть проблема с контекстом, я никогда не говорил, что он использует функцию без контекста. Я подумал, что это может быть что-то, чтобы быстро проверить. - person Foreign Object; 18.12.2012

Я не мог понять, почему мои идентификаторы, которые казались идентичными, не были такими. Я оставлю этот вопрос открытым для всех, кто может добавить понимание того, как это исправить. В итоге я просто получил свои элементы по ячейке, а не по идентификатору.

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;
    }
}
person jumpdart    schedule 17.12.2012
comment
Я ожидал, что где-то появятся невидимые символы, но я их не нашел. Может в вызове SetPriiority? - person Bergi; 18.12.2012