Estoy tratando de conseguir el acceso y encontrar el cuadro de texto en el GridView con javascript, pero estoy recibiendo un error: «El nombre de txt_UID’ no existe en el contexto actual’. Todo funcionaba bien cuando mi cuadro de texto que estaba fuera de la GridView. Aquí está mi cuadro de texto en el gridview y mi gridview se llama 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>

Aquí está mi 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>
InformationsquelleAutor moe | 2014-02-09

3 Comentarios

  1. 1

    El problema es su GridView crea un TextBox en cada fila. No hay ningún «txt_UID» control fuera de la GridView. Eso es lo que tu mensaje de error te está diciendo.

    Su JavaScript función está diseñada para trabajar con una TextBox. Me imagino que usted desea que la función de Autocompletar para trabajar en TODOS los TextBox controles en el GridView.

    Mi sugerencia sería la de cambiar el JavaScript función para tomar un parámetro con el TextBox ID y, a continuación, agregue un CSS class a cada TextBox, y, finalmente, hacer un contenedor JavaScript función que va a enumerar los TextBox controles mediante getElementsByClassName, y llame a esa función de contenedor en DOM ready.

    Aquí es lo que se verá así:

    Agregar clase CSS para los cuadros de texto:

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

    Nueva JavaScript función:

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

    Siguiente, haga sus otras JavaScript en una función que toma un parámetro (el 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
        });
    };

    Finalmente, su listos cambios en el código para llamar simplemente la función de contenedor creado:

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

    Bonus: Aquí hay una manera de hacerlo con jQuery sólo:

    (sólo requiere la clase CSS en los cuadros de texto)

    $(document).ready(function () {
        $.each($(".AutoCompleteTextBox"), function (i, textBox) {
            textBox.autocomplete( /* your code */);
        })
    });
    • gracias David, ¿es necesario cambiar el textBoxId en txt_UID? debido a que es el id de mi cuadro de texto, gracias.
    • No, porque la forma en que mi código funciona es que textBoxId es la identidad real del cuadro de texto, que la función de contenedor, setAutoComplete, recupera el uso de la incorporada en JavaScript documento.getElementsByClassName() método. Básicamente mi código no importa lo que el ID de tu cuadro de texto – utiliza la nueva clase CSS he añadido para obtener una referencia para todos los cuadros de texto en el GridView (siempre que no ponga que clase de css en otros controles o elementos).
    • Recuerde que usted no tiene UNA caja de texto… tienes un cuadro de texto en CADA fila del gridview. Esto es generado por asp.net para usted como elementos HTML, cada uno con un IDENTIFICADOR único. El único lugar en el que «txt_UID» tiene algún significado está dentro del GridView. Hay formas de acceder a él en .neto (utilizando el método FindControl), pero de la manera que lo hice en realidad es más simple, creo.
    • es correcto, yo estoy haciendo los cambios ahora y probarlo. informaremos en breve. gracias
    • Una cosa más, yo tenía un error en mi jQuery-cambió de $(textBoxId) a $("#" + textBoxId), va a trabajar ahora.
    • bien, permítanme que debido a que tuve algunos problemas antes. gracias
    • David, estoy recibiendo este error:Error: el Objeto no admite esta propiedad o método y no cuando setAutoComplete() se llama a la función. He actualizado mi primer post así que por favor mire a ver qué estoy haciendo mal. gracias
    • Está usted seguro de que la función de autocompletar plugin está cargado? Parece que es el problema; llamar a la función autocompletar() antes de plugin está cargado de fallar
    • yo no estaba usando ningún plugin autocomplete antes, pero acabo de descargar y lo utilizó, pero todavía no para la misma cosa
    • He probado con simple JS funciones, como la configuración haga clic en método y, a continuación, llamar y trabajado; entonces, creo que el problema es con la función de autocompletar. Fue su autocompletar guión de trabajo antes?
    • sí que estaba trabajando bien antes sin utilizar la función de autocompletar plugin, pero la única diferencia es que mi cuadro de texto que estaba fuera de la gridview
    • Ok, posiblemente, usted ya tenía la función de autocompletar plugin. Creo que lo que es probable que suceda es que la función autocompletar (no es un método estándar de elemento HTML Input, yo.e, su cuadro de texto) no está disponible todavía cuando este código es que se llama. Intente esto: comentario la $(document).ready() código, y en la parte inferior de la página, añadir un <script> tag y llamar setAutoComplete(); de ella, para ver si funciona?
    • Tendrás que jugar con un poco más de resolverlo. Sin ver tu código completo/página (o una versión minimizada que muestra este problema) es difícil ayudar desde aquí.
    • gracias David, lo intenté y no funcionó, pero voy a seguir jugando con ella

  2. 1

    Su Gridview se muestra como Table y su control estará contenida en cell de la tabla. Usted puede darle una oportunidad a la siguiente.

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

    reemplazar <<Client ID of the GridView>> con el id de su GridView

    • Gracias, yo no soy un javascript persona, pero ¿cómo se puede aplicar la solución para el código javascript que he publicado? Necesito usar ese código por favor.. gracias
    • Imad, no estoy seguro de donde poner este <body onload=»findControl()»> </body>?? podrías aclarar por favor? gracias
    • ver editado.. es simple ahora? no hay necesidad de <body> y todo.
  3. 0

    puede utilizar el atributo de nombre y el id del grid para encontrarlo:

    <asp:TextBox ID="txt_UID" name="mytextbox" runat="server" Text='<%# Eval("UID")%>'
            Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>

    la parte de javascript:

    $("#<%=MyGrid.ClientID %>[name=mytextbox]").autocomplete({});

Dejar respuesta

Please enter your comment!
Please enter your name here