How to find text-box in GridView using Javascript

Question

I am trying to get access and find text-box in GridView using javascript but i am getting an error: 'The name txt_UID' does not exist in the current context'. Everything worked fine when my text-box was outside of the GridView. Here is my text-box in the gridview and my gridview is called GridView1:

 <asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
    <ItemTemplate>  
     <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
        CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
       </ItemTemplate>
         <ItemStyle Width="150px" />
         </asp:TemplateField>

Here is my JavaScript:

  <script type ="text/javascript">
        function setAutoComplete() {
            var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
            for (var i = 0; i < textBoxes.length; i++) {
                addAutoComplete(textBoxes[i].id);
            }
        }
</script>

<script type="text/javascript">
    function addAutoComplete(textBoxId) {
        $("#" + textBoxId).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hfUserId.ClientID %>").val(i.item.val);
            },
            minLength: 1
        });
    }; 

<script type ="text/javascript">
     $(document).ready(function () { setAutoComplete(); });
    </script>

Answer 1

The problem is your GridView creates a TextBox on each row. There is no "txt_UID" control outside of the GridView. That is what your error message is telling you.

Your JavaScript function is designed to work with one TextBox. I imagine you want the AutoComplete to work on ALL TextBox controls in the GridView.

My suggestion would be to change the JavaScript function to take a parameter with the TextBox ID and then add a CSS class to each TextBox, and finally make a wrapper JavaScript function that will enumerate the TextBox controls using getElementsByClassName, and call that wrapper function on DOM ready.

Here's what it will look like:

Add CSS class to the TextBoxes:

<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Name">
    <ItemTemplate>  
        <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
            CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
    </ItemTemplate>
    <ItemStyle Width="150px" />
</asp:TemplateField>

New JavaScript function:

function setAutoComplete()
{
    var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
    for (var i = 0; i < textBoxes.length; i++)
    {
        addAutoComplete(textBoxes[i].id);
    }
}

Next, make your other JavaScript into a function that takes a parameter (the id):

function addAutoComplete(textBoxId) {
    $("#" + textBoxId).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfUserId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
};

Finally, your on ready code changes to just call the wrapper function you created:

$(document).ready(function () { setAutoComplete(); });

Bonus: Here's a way to do it with jQuery only:

(just requires the CSS class on the TextBoxes)

$(document).ready(function () {
    $.each($(".AutoCompleteTextBox"), function (i, textBox) {
        textBox.autocomplete( /* your code */);
    })
});

Answer 2

Your Gridview will be rendered as Table and your control will be contained in cell of table. You can give a try to following.

<script type=”text/javascript”>
$(document).ready(function(){
tblTable=document.getElementById(‘<<Client ID of the GridView>>’);
Cell=tblTable.rows[i].cells[j];//i and j are locations of that cell.
FirstControl = Cell.childNodes[0];
});
</script>

replace <<Client ID of the GridView>> with id of your GridView