Div que a veces deja un rastro

abmptc · 7 Marzo 2012, 08:25 AM

Hola,

Estoy programando en .Net, y tengo un Div que oculto usando:
document.getElementById("scwIE").style.visibility = "hidden"

Este Div contiene una Tabla. El caso es que "a veces" (pongamos 1 vez de cada 15) cuando cargo la página, se me queda dibujado en la página la estructura de la tabla que contiene el Div.

He hecho la prueba de intentar ocultar el Div volviendo a ponerlo manualmente hidden en un evento onClick, pero no me hace ni caso. Solo desaparece si hago clic en cualquier elemento del formulario que envíe datos al servidor.

¿Se os ocurre como puedo solucionar este problema tan extraño?

Un saludo.

Spider-Net · 8 Marzo 2012, 17:47 PM

¿Has probado a poner la propiedad display en none en lugar de visibility="hidden"?

Pablo Videla · 8 Marzo 2012, 18:16 PM

La tabla debe quedar oculta por default? si es asi usa jQuery

Código (javascript) [Seleccionar]


$(document).ready(function(){

("#idTabla").hide();
});

abmptc · 9 Marzo 2012, 13:07 PM

Si, he probado poner visiblirity a Hidden. Os pongo algún dato más por si puede ser de utilidad:

El script que uso para mostrar un calendario, y en el cual hay un Div que "A veces" me deja el rastro de la tabal que contiene es el siguiente:

http://www.tarrget.info/calendar/scw.js

Código [Seleccionar]


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Formulario2.aspx.vb" Inherits="Formulario2" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title></title> 

    <link href="../../common/css/intra.css" rel="stylesheet" type="text/css" /> 

    <meta http-equiv="Pragma" content="no-cache"> 
    <meta http-equiv="Expires" content="-1"> 
        
    <style type="text/css"> 
        body{background-color:#F3F3F3;} 
    </style> 
        
    <style type="text/css"> 
        .style2 
        { 
            width: 264px; 
        } 
        .style3 
        { 
            width: 207px; 
        } 
        .style4 
        { 
            width: 203px; 
        } 
    </style> 

    <style type="text/css"> 
        body{background-color:#F3F3F3;} 
        .ocultaEle{visibility:hidden} 
    </style> 

    <script 
        src="../../common/script/scw.js" 
        type="text/javascript"> 
    </script> 


</head> 
<body bgcolor="#F3F3F3"> 


    <form id="form1" runat="server" > 

    <p>&nbsp;</p> 

    <table style="background-color:#AFEEEE; 
        margin:0 auto 0 auto; 
        border-width: medium; border-style: outset;"> 
    <tr> 
    <td align="center""> 
    Formulario 2 
    </td> 
    </tr> 
    </table> 
        
    <p>&nbsp;</p> 

    <table class="ArbolMadridPeque"> 
        <tr> 
            <td class="style3"> 
                Estado<asp:SqlDataSource 
                    ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:cnBBDD1 %>" 
                    ProviderName="<%$ ConnectionStrings:cnBBDD1 .ProviderName %>" 
                    
                    SelectCommand="SELECT Cod_Estado, Descripcion FROM Aux_Estados WHERE (Cod_Estado IN (2,3,4,5,7,10,16)) "> 
                </asp:SqlDataSource> 
            </td> 
            <td class="style4"> 
                <asp:DropDownList ID="DropDownList1" runat="server" 
                    DataSourceID="SqlDataSource1" DataTextField="Descripcion" 
                    DataValueField="Cod_Estado"> 
                </asp:DropDownList> 
            </td> 
        </tr> 
        <tr> 
            <td class="style3"> 
                Alta Atributos</td> 
            <td class="style4"> 
                <asp:CheckBox ID="CheckBox2" runat="server" Text="Dominio 1" 
                    AutoPostBack="True" Width="90%" /> 
                <br /> 
                <asp:CheckBox ID="CheckBox3" runat="server" Text="Dominio 2" 
                    AutoPostBack="True" Width="90%" /> 
                <br /> 
                <asp:CheckBox ID="CheckBox4" runat="server" Text="Dominio 3" 
                    AutoPostBack="True" Width="90%" /> 
            </td> 
        </tr> 
    </table> 
    
    <p>&nbsp;</p> 
    

    <table class="ArbolMadridPeque"> 
        <tr> 
            <td class="style2""> 
                Ocular:</td> 
            <td style="width:"50%;"> 
                <asp:DropDownList ID="DropDownList5" runat="server" AutoPostBack="True"> 
                    <asp:ListItem Value="0" Selected="True">--</asp:ListItem> 
                    <asp:ListItem Value="S">Si</asp:ListItem> 
                    <asp:ListItem Value="N">No</asp:ListItem> 
                </asp:DropDownList> 
            </td> 
        </tr> 

    <%If Me.DropDownList5.SelectedItem.Value = "S" Then%> 
        <tr> 
            <td class="style2""> 
                Fecha Solicitud Encargo</td> 
            <td style="width:"50%;"> 
                <asp:TextBox ID="TextBox29" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button38" 
        onclick="scwShow(TextBox29,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button39" 
        onclick="javascript:borraFecha('TextBox29')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" 
                    ControlToValidate="TextBox29" 
                    ErrorMessage="Fecha Solicitud Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2""> 
                Fecha Recepción Encargo</td> 
            <td style="width:"50%;"> 
                <asp:TextBox ID="TextBox30" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button40" 
        onclick="scwShow(TextBox30,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button41" 
        onclick="javascript:borraFecha('TextBox30')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" 
                    ControlToValidate="TextBox30" 
                    ErrorMessage="Fecha Recepción Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 

    <%End If%> 
        
        <tr> 
            <td class="style2""> 
                Opciones:</td> 
            <td style="width:"50%;"> 
                <asp:DropDownList ID="DropDownList6" runat="server" AutoPostBack="True"> 
                    <asp:ListItem Value="0" Selected="True">--</asp:ListItem> 
                    <asp:ListItem Value="S">Si</asp:ListItem> 
                    <asp:ListItem Value="N">No</asp:ListItem> 
                </asp:DropDownList> 
            </td> 
        </tr> 

    <%If Me.DropDownList6.SelectedItem.Value = "S" Then%> 
        <tr> 
            <td class="style2"> 
                1º Destinatario</td> 
            <td> 
                <asp:DropDownList ID="DropDownListUnidad" runat="server" 
                    DataSourceID="SqlDataSource5" DataTextField="Nombre_Destinatario" 
                    DataValueField="Cod_Destinatario" 
                    Font-Size="X-Small" AutoPostBack="True"> 
                </asp:DropDownList> 
                <asp:SqlDataSource ID="SqlDataSource5" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:cnBBDD1 %>" 
                    ProviderName="<%$ ConnectionStrings:cnBBDD1.ProviderName %>" 
                    SelectCommand="SELECT * FROM [Aux_Destinatarios]"></asp:SqlDataSource> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2"> 
                1º Fecha Envio</td> 
            <td> 
                <asp:TextBox ID="TextBox31" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button42" 
        onclick="scwShow(TextBox31,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button43" 
        onclick="javascript:borraFecha('TextBox31')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator16" runat="server" 
                    ControlToValidate="TextBox31" 
                    ErrorMessage="Fecha Recepción Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2"> 
                1º Fecha Recepción</td> 
            <td> 
                <asp:TextBox ID="TextBox32" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button44" 
        onclick="scwShow(TextBox32,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button45" 
        onclick="javascript:borraFecha('TextBox32')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator17" runat="server" 
                    ControlToValidate="TextBox32" 
                    ErrorMessage="Fecha Recepción Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2"> 
                2º Destinatario</td> 
            <td> 
                <asp:DropDownList ID="DropDownListUnidad0" runat="server" 
                    DataSourceID="SqlDataSource6" DataTextField="Nombre_Destinatario" 
                    DataValueField="Cod_Destinatario" 
                    Font-Size="X-Small" AutoPostBack="True"> 
                </asp:DropDownList> 
                <asp:SqlDataSource ID="SqlDataSource6" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:cnBBDD1 %>" 
                    ProviderName="<%$ ConnectionStrings:cnBBDD1.ProviderName %>" 
                    SelectCommand="SELECT * FROM [Aux_Destinatarios]"></asp:SqlDataSource> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2"> 
                2º Fecha Envio</td> 
            <td> 
                <asp:TextBox ID="TextBox33" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button46" 
        onclick="scwShow(TextBox33,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button47" 
        onclick="javascript:borraFecha('TextBox33')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator18" runat="server" 
                    ControlToValidate="TextBox33" 
                    ErrorMessage="Fecha Recepción Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2"> 
                2º Fecha Recepción</td> 
            <td> 
                <asp:TextBox ID="TextBox34" runat="server" Width="104px"></asp:TextBox> 
                
    <input type="button" id="Button48" 
        onclick="scwShow(TextBox34,event);return false;" 
        style=" 
        background:url('../../imagenes/Generales/cal_peque.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><input type="button" id="Button49" 
        onclick="javascript:borraFecha('TextBox34')" 
        style=" 
        background:url('../../imagenes/Generales/eliminar3.gif') no-repeat center top; 
        overflow:visible; 
        width:28px; 
        height:20px; 
        border:none;         
        " 
        /><asp:RequiredFieldValidator ID="RequiredFieldValidator19" runat="server" 
                    ControlToValidate="TextBox34" 
                    ErrorMessage="Fecha Recepción Encargo Obligatoria" 
                    EnableClientScript="False"></asp:RequiredFieldValidator> 
            </td> 
        </tr> 
    <%End If%> 


<%  If 1 = 2 Then%> 
<%End If%> 

        <tr> 
            <td class="style2"> 
                Observación Nueva</td> 
            <td> 
                <asp:TextBox ID="TextBox19" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox> 
            </td> 
        </tr> 
        <tr> 
            <td class="style2" colspan="2"> 
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:cnBBDD1 %>" 
                    ProviderName="<%$ ConnectionStrings:cnBBDD1.ProviderName %>" 
                    SelectCommand="SELECT [Fecha], [Observacion] FROM [Observaciones] WHERE (([Ejercicio] = ?) AND ([Num_Expediente] = ?))"> 
                    <SelectParameters> 
                        <asp:SessionParameter Name="Ejercicio" SessionField="vSubEjercicio" 
                            Type="Int32" /> 
                        <asp:SessionParameter Name="Num_Expediente" SessionField="vSubExpediente" 
                            Type="Int32" /> 
                    </SelectParameters> 
                </asp:SqlDataSource> 
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                    AllowSorting="True" AutoGenerateColumns="False" CssClass="ArbolMadrid" 
                    DataSourceID="SqlDataSource2" PageSize="2"> 
                    <Columns> 
                        <asp:BoundField DataField="Fecha" DataFormatString="{0:d}" HeaderText="Fecha" 
                            SortExpression="Fecha" /> 
                        <asp:BoundField DataField="Observacion" HeaderText="Observacion" 
                            SortExpression="Observacion" /> 
                    </Columns> 
                </asp:GridView> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

            </td> 
        </tr> 

        </table> 

   <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> 

    </form> 

<script type="text/javascript"> 
    function ocultarFila(num, ver) { 
        //Si Ver = 1   ->  Dis = '' 
        //Si Ver = 0   ->  Dis = 'none' 
        dis = ver ? '' : 'none'; 
        //alert(dis) 
        tab = document.getElementById('tbDatos'); 
        tab.getElementsByTagName('tr')[num].style.display = dis; 
    } 

    function ocultarColumna(num, ver) { 
        //Si Ver = 1   ->  Dis = '' 
        //Si Ver = 0   ->  Dis = 'none' 
        dis = ver ? '' : 'none'; 
        fila = document.getElementById('tbDatos').getElementsByTagName('tr'); 
        for (i = 0; i < fila.length; i++) 
            fila[i].getElementsByTagName('td')[num].style.display = dis; 
    } 
</script> 

<script type="text/javascript"> 
    // La primera fila es la cero. 

    if (1 == 1) { 
        //ocultarFila(1, 0) 
        //ocultarFila(2, 0) 
        //ocultarFila(3, 0) 
        //ocultarFila(4, 0) 
    } 
    else { 
        ocultarFila(6, 0) 
        ocultarFila(7, 0) 
        ocultarFila(8, 0) 
        ocultarFila(9, 0) 
        ocultarFila(10, 0) 
    } 

    function borraFecha(control) { 
        document.getElementById(control).value = "" 
        //alert(control); 
    } 
</script> 
    
<%'Inicio --- Para borrar el calendario que sale la primera vez que se carga la página%> 
<img id="img33" src="" alt="" onclick="javascript:loQueSea();" width="1" height="1" /> 
<script type="text/javascript" id="clientEventHandlersJS" language="javascript"> 
<!-- 
    //alert("prueba234") 

    document.getElementById("img33").click() 

    function loQueSea() { 
        //alert('prueba loQueSea') 
    } 
//--> 
</script> 
<%  'Fin --- Para borrar el calendario que sale la primera vez que se carga la página%> 


<script type="text/vbscript" language="vbscript" > 
    function convierteMoneda(control) 
        'msgbox(control) 
        'msgbox("Msg Vbscript") 
        'msgbox(document.getElementById("TextBox23").value) 
        'msgbox(formatcurrency(7777777777)) 
        if isnumeric(document.getElementById(control).value) then 
            document.getElementById(control).value = formatcurrency(document.getElementById(control).value) 
        end if 
    end function 

    function asignaValor(control) 
        document.getElementById(control).value = document.getElementById(control).value 
    end function 
</script> 



<script type="text/javascript"> 
<!-- 
    function deshab() { 
        frm = document.forms['form1']; 
        for (i = 0; ele = frm.elements[i]; i++) 
            ele.disabled = true; 
    } 
    
    //alert("<%=Session("vSubPerfil")%>") 

    <%if (Session("vSubPerfil") = "P") or _ 
    not (Session("vEstado") = "1" or Session("vEstado") = "3") _ 
    then %> 
        //deshab(); 
    <%end if %> 

    
    //scwID('scw').style.visibility='hidden' 
    //scwID('scwIframe').style.visibility='hidden'; 
    document.getElementById("scwIE").style.visibility = 'hidden' 
    
    //scwID('scwCell').style.visibility ='hidden'; 

    //document.getElementById("btGrabar").disabled= false; 
//--> 

</script> 

<script type="text/javascript"> 

    function ocultatodo() { 
        estotaabierto = document.getElementsByTagName("div"); 
        for (var i = 0; i < estotaabierto.length; i++) { 
            //### Esto funciona, si tiene Id el Div te lo enseña: 
            //alert(estotaabierto[i].id); //Esto funciona, si tiene 

            //### Esto funciona, el Div existe pero te lo oculta 
            estotaabierto[i].style.visibility = 'hidden' 

            //### Esto funciona, el Div deja de existir 
            //estotaabierto[i].style.display='none' 
        } 
    } 

    ocultatodo(); 

    function ocultascwIE() { 
        alert("ffaaaa"); 
        document.getElementById("scwIE").style.visibility = "hidden" 
        document.getElementById("scwIE").style.display = "none" 
        estotaabierto = document.getElementsByTagName("div"); 
        for (var i = 0; i < estotaabierto.length; i++) { 
            //### Esto funciona, si tiene Id el Div te lo enseña: 
            //alert(estotaabierto[i].id); //Esto funciona, si tiene 

            //### Esto funciona, el Div existe pero te lo oculta 
            estotaabierto[i].style.visibility = 'hidden' 

            //### Esto funciona, el Div deja de existir 
            //estotaabierto[i].style.display='none' 
        } 
    } 

    function reloadfff() { 
        location.reload(); 
    } 

    function ocultaDisplay() { 
        alert("ffdddd55"); 
        //document.addEventListener('click', scwHide, false); 
        //document.attachEvent('onclick', scwHide); 
        scwHide() 
    } 

    scwShow(TextBox1, event); 
</script> 

<label id="lbb1" onclick="javascript:ocultascwIE();">ocultascwIE</label><br/> 
<label id="Label1" onclick="javascript:reloadfff();">reloadfff</label><br/> 
<label id="Label2" onclick="javascript:ocultaDisplay();">ocultaDisplay</label><br/> 



</body> 
</html>

Pablo Videla · 9 Marzo 2012, 14:21 PM

Señala cual tabla exactamente quieres que se oculte y cual div tambien, debes ordenarte y asignarles ID para poder manipularlos de manera adecuada.

Spider-Net · 9 Marzo 2012, 14:44 PM

-.-"

Dije que si has probado a poner display a none, en lugar de visibility a hidden.

abmptc · 9 Marzo 2012, 15:06 PM

Hola Spider-Nat, si te fijas bien en el código, también he probado lo que me has comentado:

document.getElementById("scwIE").style.display = "none"

Hola DonVidela, El Div que contiene la tabla que deja restos en pantalla se llama scwIE (esta en el archivo:

http://www.tarrget.info/calendar/scw.js

La tabla que contiene este Div y que deja el rastro en la pantalla se llama: scw

¿Alguna idea?

Saludos

Pablo Videla · 9 Marzo 2012, 15:14 PM

Podrías mostrarnos el codigo de la pagina renderizada? ve "inspeccioniar elemento" y muestranos el codigo exacto de la tabla renderizada

Spider-Net · 9 Marzo 2012, 22:35 PM

Yo si no coloreas el código con geshi para que medio se entienda como que no lo leo, siendo un código tan largo se hace pesado sin colorear.

abmptc · 14 Marzo 2012, 09:29 AM

Por si le interesa a alguien, os pongo los pasos que seguí, y la solución final por la que opté:

Una cosa curiosa es que el código:
<script
src="../../common/script/scw.js"
type="text/javascript">
</script>

Generalmente lo ponía en la sección Head del html, y de esa forma el rastro me salía una vez de cada 15 que cargaba la página. Por lo que para hacer pruebas era un rollazo. Puse este código al final de la página, justo antes de </body>
</html>, y el rastro de la tabla que contiene el Div me aparecía siempre.

# Intenté ocultar manualmente el Div:
document.getElementById("scwIE").style.visibility = "hidden"
document.getElementById("scwIE").style.display = "none"

# Intenté ocultar la tabla que contiene el Div:
document.getElementById("scw").style.display = "none"
document.getElementById("scw").style.visibility = "hidden"

# Intenté hacer desaparecer todos los Div de la página:
<script type="text/javascript">
function ocultatodo() {
estotaabierto = document.getElementsByTagName("div");
for (var i = 0; i < estotaabierto.length; i++) {
//### Esto funciona, si tiene Id el Div te lo enseña:
alert(estotaabierto.id); //Esto funciona, si tiene

//### Esto funciona, el Div existe pero te lo oculta
estotaabierto.style.visibility = 'hidden'

//### Esto funciona, el Div deja de existir
//estotaabierto.style.display='none'
}
}
ocultatodo();
</script>
En este caso me ocultó hasta el ValidationSummary(parece ser que interiormente este control está compuesto por un Div). Y con este Control también me pasaba que "a veces" me dejaba el rastro de la tabla que contiene interiormente.

# Intenté hacer desaparecer todas las Table de la misma forma que en el código anterior.
En este caso me borraba todas mis Table, pero "a veces" me seguía mostrando el rastro.

# Intenté usar otro tipo de calendarios de Cliente: Jquery Datapicker
Pero a parte de tener que meter en el código varios .js y .css, la utilización era un poco farragosa, y encima uno que me bajé daba problemas en el navegador (daba un error y lo reiniciaba)

# Finalmente conseguí tener un calendario fácil y práctico usando "calendar Extender" de Ajax.

Muchas gracias a todos por vuestra ayuda y un saludo.