How to find text-box in GridView using Javascript

Total Post:119

Points:835
 1807  View(s)
Ratings:
Rate this:

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>

  1. Post:110

    Points:776
    Re: How to find text-box in GridView using Javascript

    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

      Modified On Apr-07-2018 05:12:47 AM
  1. Post:104

    Points:728
    Re: How to find text-box in GridView using Javascript

    you can use name attribute and the grid id to find it: 

    <asp:TextBox ID="txt_UID" name="mytextbox" runat="server" Text='<%#Eval("UID")%>'
            Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
    the javascript part: $("#<%=MyGrid.ClientID %>[name=mytextbox]").autocomplete({});

      Modified On Apr-07-2018 05:12:27 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!