none
Como mostrar u ocultar un control usando javaScript el cual se encuentra dentro de un control Repeater o DataGrid.

    Question

  • Tengo el siguiente control Repeater

    <asp:Repeater ID="dr1" runat="server"

                onitemcommand="Repeater1_ItemCommand">

                <ItemTemplate>

                    <div>

                        <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>

                    </div>

                    <div>

                        <asp:Button ID="btl1" runat="server" Text="Aceptar" />

                        <input id="Button1" type="button" value="button" />

                    </div>

                </ItemTemplate>

            </asp:Repeater>

     
    Como observan adentro existe un boton y un texto, necesito que cuando el usuario clickee el boton el texto mediante JavaScript se oculte si es visible y se muestre si esta oculto. Como podria hacer eso? Claro el Repeater se cargara con N filas “Items” me interesa que se oculte o muestre el TextBox de la fila seleccionada… Gracias a todos de antemano…
    Thursday, March 17, 2011 10:51 PM

Answers

  • hola

    podrias hacer por medio de jquery, este te permitira seleccionar de forma simple objetos usando la libreria para javascript

    en este caso el boton no puede ser de asp.net porque casuaria un postback, deja solo el segundo boton el de

    <input id="Button1" type="button" ..>

    ademas necesitaras de algun forma relacionar los controles, el div no ayuda para esto, usa por ejemplo tablas

    <asp:Repeater ID="dr1" runat="server"
                onitemcommand="Repeater1_ItemCommand">
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btl1" runat="server" Text="Aceptar" />
                        <input id="Button1" type="button" value="button" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:Repeater>

     

    entocnes pdorias hacer

    <script ...>

        $(document).ready(function()
        {
            $('#Button1').click(function()
            {
                var table =  $(this).parent().parent();
               
                $(":textbox", table).toggle();
            })
        });

    </script>

     

    te dejo algun material de jquery

     

    jQuery

    jQuery Documentacion

    jQuery HowTo's

    Tutorial de jQuery

     

    http://docs.jquery.com/Tutorials

     

    si tu idea es trabjar con javascript recomiendo empeices a conocerlo te salvara la vida

     

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marked as answer by AdyIr Friday, March 18, 2011 5:21 PM
    Thursday, March 17, 2011 11:35 PM
  • Hola de nuevo yo... Estaba inventando “apoyado en algunos ejemplos también que encontré por alli”, hice algo asi…
    Este es mi control Repeater
    <asp:Repeater ID="dr1" runat="server" onitemdatabound="dr1_ItemDataBound">
            <ItemTemplate>
                <div>
                     <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                </div>
                <div>
                    <input id="btlPractica" type="button" value="button" runat="server"/>
                </div>
            </ItemTemplate>
            </asp:Repeater>

    Agrego un atributo al boton que ejecutara la function de ocultar…
    protected void dr1_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                ((System.Web.UI.HtmlControls.HtmlInputButton)e.Item.FindControl("btlPractica")).Attributes.Add("onclick", "javascript:CbPractica('" + ((System.Web.UI.HtmlControls.HtmlInputButton)e.Item.FindControl("btlPractica")).ClientID + "')");
            }

    Luego me creo una funciono javaScript… En esta tomo el nombre del objeto que disparo el evento y como a nivel de renderizacion observe en el codigo fuente de la pagina que los id dentro del control repeater se generan:
    NombreDelRepeater_NombreDelControl_EnumeracionDentroDelRepeater
    Lo que hago es substituir el nombre del botón “el cual disparo el evento” por el de mi txtBox y ya lo puedo ocultar…
    function CbPractica(id) {
                    var nombreCtrl = id.replace(/btlPractica/g, "txtValor");
                    var ctrl = document.getElementById(nombreCtrl);
                    if (ctrl != null) {
                        ctrl.style.visibility = 'hidden';
                    }
                }

    La verdad no se sira una buena opción, pero lo probe con 3 navegadores (IE 9, FireFox y Chrome) y corrió bien en todos…
    • Marked as answer by AdyIr Friday, March 18, 2011 5:21 PM
    Friday, March 18, 2011 3:35 PM

All replies

  • hola

    podrias hacer por medio de jquery, este te permitira seleccionar de forma simple objetos usando la libreria para javascript

    en este caso el boton no puede ser de asp.net porque casuaria un postback, deja solo el segundo boton el de

    <input id="Button1" type="button" ..>

    ademas necesitaras de algun forma relacionar los controles, el div no ayuda para esto, usa por ejemplo tablas

    <asp:Repeater ID="dr1" runat="server"
                onitemcommand="Repeater1_ItemCommand">
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btl1" runat="server" Text="Aceptar" />
                        <input id="Button1" type="button" value="button" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:Repeater>

     

    entocnes pdorias hacer

    <script ...>

        $(document).ready(function()
        {
            $('#Button1').click(function()
            {
                var table =  $(this).parent().parent();
               
                $(":textbox", table).toggle();
            })
        });

    </script>

     

    te dejo algun material de jquery

     

    jQuery

    jQuery Documentacion

    jQuery HowTo's

    Tutorial de jQuery

     

    http://docs.jquery.com/Tutorials

     

    si tu idea es trabjar con javascript recomiendo empeices a conocerlo te salvara la vida

     

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marked as answer by AdyIr Friday, March 18, 2011 5:21 PM
    Thursday, March 17, 2011 11:35 PM
  • hola

    podrias hacer por medio de jquery, este te permitira seleccionar de forma simple objetos usando la libreria para javascript

    en este caso el boton no puede ser de asp.net porque casuaria un postback, deja solo el segundo boton el de

    <input id="Button1" type="button" ..>

    ademas necesitaras de algun forma relacionar los controles, el div no ayuda para esto, usa por ejemplo tablas

    <asp:Repeater ID="dr1" runat="server"
                onitemcommand="Repeater1_ItemCommand">
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btl1" runat="server" Text="Aceptar" />
                        <input id="Button1" type="button" value="button" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:Repeater>

     

    entocnes pdorias hacer

    <script ...>

        $(document).ready(function()
        {
            $('#Button1').click(function()
            {
                var table =  $(this).parent().parent();
               
                $(":textbox", table).toggle();
            })
        });

    </script>

     

    te dejo algun material de jquery

     

    jQuery

    jQuery Documentacion

    jQuery HowTo's

    Tutorial de jQuery

     

    http://docs.jquery.com/Tutorials

     

    si tu idea es trabjar con javascript recomiendo empeices a conocerlo te salvara la vida

     

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    Hola Leandro que tal, gracias por la respuesta y por los links…
    Bueno ya descargue la librería pero no me sale como me indicas.
    Tengo lo siguiente…
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#Button1').click(function () {
    var table = $(this).parent().parent(); <error>
                        $(":txtValor", table).toggle();
                    });
                });
            </script>

    <asp:Repeater ID="dr1" runat="server">
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="Button1" type="button" value="button" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
            </asp:Repeater>

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    List<Data> valores = new List<Data>();

                    Data data1 = new Data();
                    data1.Valor = "Valor 1";
                    valores.Add(data1);

                    Data data2 = new Data();
                    data2.Valor = "Valor 2";
                    valores.Add(data2);

                    Data data3 = new Data();
                    data3.Valor = "Valor3";
                    valores.Add(data3);

                    dr1.DataSource = valores;
                    dr1.DataBind();

                    GridView1.DataSource = valores;
                    GridView1.DataBind();
                }
            }
            class Data
            {
                public string Valor { get; set; }
            }

    Y pasan 2 cosas, primero el javaScript se ejecuta únicamente cuando se da click al botón del primer ítem del repeater, los otros no lo capturan y lo otro da error y dice que no conoce la expresión.
    Gracias una vez mas por la ayuda…

    Friday, March 18, 2011 2:32 PM
  • Hola de nuevo yo... Estaba inventando “apoyado en algunos ejemplos también que encontré por alli”, hice algo asi…
    Este es mi control Repeater
    <asp:Repeater ID="dr1" runat="server" onitemdatabound="dr1_ItemDataBound">
            <ItemTemplate>
                <div>
                     <asp:TextBox ID="txtValor" Text='<%# Eval("Valor") %>' runat="server"></asp:TextBox>
                </div>
                <div>
                    <input id="btlPractica" type="button" value="button" runat="server"/>
                </div>
            </ItemTemplate>
            </asp:Repeater>

    Agrego un atributo al boton que ejecutara la function de ocultar…
    protected void dr1_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                ((System.Web.UI.HtmlControls.HtmlInputButton)e.Item.FindControl("btlPractica")).Attributes.Add("onclick", "javascript:CbPractica('" + ((System.Web.UI.HtmlControls.HtmlInputButton)e.Item.FindControl("btlPractica")).ClientID + "')");
            }

    Luego me creo una funciono javaScript… En esta tomo el nombre del objeto que disparo el evento y como a nivel de renderizacion observe en el codigo fuente de la pagina que los id dentro del control repeater se generan:
    NombreDelRepeater_NombreDelControl_EnumeracionDentroDelRepeater
    Lo que hago es substituir el nombre del botón “el cual disparo el evento” por el de mi txtBox y ya lo puedo ocultar…
    function CbPractica(id) {
                    var nombreCtrl = id.replace(/btlPractica/g, "txtValor");
                    var ctrl = document.getElementById(nombreCtrl);
                    if (ctrl != null) {
                        ctrl.style.visibility = 'hidden';
                    }
                }

    La verdad no se sira una buena opción, pero lo probe con 3 navegadores (IE 9, FireFox y Chrome) y corrió bien en todos…
    • Marked as answer by AdyIr Friday, March 18, 2011 5:21 PM
    Friday, March 18, 2011 3:35 PM