Mostar/Ocultar div's

augusto_jaramil · #1 (**permalink**) 08/11/2011, 09:05

Holas a tod@s,

Tenemos el siguiente codigo:

Código PHP:

  <html> 
<head> 
<title>id Form</title> 
<script language="javascript"> 
 
function mostrarBotones(oculta,muestra) { 
   if (oculta.length != 0 ) { 
alert("DEBE OCULTAR: "+oculta); 
      var el = document.getElementById(oculta); //se define la variable "el" igual a nuestro div 
      el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div 
   } 
   if (muestra.length != 0 ) { 
alert("DEBE MOSTRAR: "+muestra); 
      var el = document.getElementById(muestra); 
      el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 
   } 
} 
</script> 
</head> 
<body > 
<table> 
<form name="form1" method="post"> 
          <div id="formulario"> 
              <tr> 
                <td class="clasetd">Codigo Reporte: 
                </td> 
                <td> 
                  <input type="text" id="codigo" name="codigo" value="" class="claseinput" style="width:50px;"> 
                </td> 
              </tr> 
              <tr> 
                <td class="clasetd">Nombre Reporte: 
                </td> 
                <td> 
                  <input type="text" id="nombre" name="nombre" value="" class="claseinput" style="width:450px;" onChange="mostrarBotones('','botones');"> 
                </td> 
              </tr> 
          </div> 
 
          <div id="grupos" style="display:none"> 
              <tr> 
                <td class="clasetd">Grupos de Columnas: 
                </td> 
                <td> 
                  <input type="text" id="grup" value="" class="claseinput" style="width:30px;"> 
                </td> 
              <tr> 
                <td class="clasetd">Nro. Columnas: 
                </td> 
                <td> 
                  <input type="text" id="cols" value="" class="claseinput" style="width:30px;"> 
                </td> 
              </tr> 
          </div> 
 
          <div id="botones" style="display:none"> 
            <tr> 
              <td colspan="2"> 
                <input type="image" id="definir" name="accion" onClick="mostrarBotones('botones','grupos');" src="./imagenes/painter1.gif"> 
              </td> 
            </tr> 
          </div> 
 
          <div id="resul"> 
          </div> 
</form> 
</table> 
</body> 
</html>

La idea es la siguiente:

Cuando se carga el script debe mostrar el div "formulario". Una vez se diligencian los campos de este div se debe visualizar el div "botones". Al hacer click sobre la imagen debe ocultar el div "botones" y visualizar el div "grupos".

Tengo varias dudas al respecto:
1. Al ejecutar el script muestra todos los divs (formulario, grupos y botones). Si grupos y botones tienen definido style="display:none" supongo que se deben visualizar cuando se cambie el estado none a block, no es asi? Para solucionar esto cambie la etiqueta div por table y asi se soluciono esta parte.

2. Cuando hago click sobre el boton o imagen de la tabla botones pierdo los datos digitados en los dos campos del div formulario y no se cierra el div botones. El resultado debe ser ocultar botones y mostrar grupos sin perder los datos de formulario.

Que enredo tan enredado....

Que puedo hacer para solucionar esto?

Mil gracias de antenamo por su ayuda

Un Cordial saludo

Rappa · #2 (**permalink**) 08/11/2011, 09:14

Prueba con usar

Código:

style.display=""

En lugar de

Código:

style.display="block"

para mostrar los divs.

augusto_jaramil · #3 (**permalink**) 08/11/2011, 09:22

Hola Rappa

Continua igual al hacer los cambios que me decis

Sera que tiene algo que ver el navegador? yo uso Firefox

Rappa · #4 (**permalink**) 08/11/2011, 09:35

En lugar de poner unos DIVs englobando las TRs, ponle id a las TRs.

Código:

<tr id="formulario1">...</tr>
<tr id="formulario2">...</tr>

<tr id="grupo1">...</tr>
<tr id="grupo2">...</tr>

<tr id="botones">...</tr>

<tr id="resul">...</tr>

Y en javascript, puedes usar para referenciarlos algo como esto:

Código:

var el1=document.getElementById(oculta+"1");
var el2=document.getElementById(oculta+"2");

La llamada quedaria igual

Código:

onClick="mostrarBotones('botones','grupos');"

augusto_jaramil · #5 (**permalink**) 08/11/2011, 09:55

Uyyyyshhh Rappa ahi si me perdi.....

Entiendo con eso que debo ponerle iID a los TR's y mostrar/ocultar los TR's mas no a los DIV's? (o TABLE que es como me toco acambiar para que al cargar la pagina no me muestre todos los DIV)

Rappa · #6 (**permalink**) 08/11/2011, 09:59

Cita:

Iniciado por augusto_jaramil

Uyyyyshhh Rappa ahi si me perdi.....

Entiendo con eso que debo ponerle iID a los TR's y mostrar/ocultar los TR's mas no a los DIV's? (o TABLE que es como me toco acambiar para que al cargar la pagina no me muestre todos los DIV)

Si, exacto, aculta los <TR>s.

augusto_jaramil · #7 (**permalink**) 08/11/2011, 10:08

Juepucha..... pero eso si es como medio tedioso, por no llamarlo de otra forma, porque este script es solo una prueba para un formulario que a la final va a tener muchos TR's y con eso me tengo que preocupar no por 4 o 5 segmentos del formulario sino por n elementos dependiendo de el numero de TR's que contenga cada DIV y el control se complica bastante... no lo crees?

Rappa · #8 (**permalink**) 08/11/2011, 10:22

Ok, en ese caso puede agregar al ID el nombre o algun identificador unico del reporte, por ejemplo (estoy suponiendo que generas la tabla dinámicamente):

Código:

<tr id="REP1234-formulario1">...</tr>
<tr id="REP1234-formulario2">...</tr>

<tr id="REP1234-grupo1">...</tr>
<tr id="REP1234-grupo2">...</tr>

<tr id="REP1234-botones">...</tr>

<tr id="REP1234-resul">...</tr>

<tr id="REP1235-formulario1">...</tr>
<tr id="REP1235-formulario2">...</tr>

<tr id="REP1235-grupo1">...</tr>
<tr id="REP1235-grupo2">...</tr>

<tr id="REP1235-botones">...</tr>

<tr id="REP1235-resul">...</tr>

Luego a la llamada le debes agregar otro parámetro:

Código:

onClick="mostrarBotones('botones','grupos','REP1234');"

Y cuando referencies:

Código:

var el1=document.getElementById(numreporte+"-"+oculta+"1");
var el2=document.getElementById(numreporte+"-"+oculta+"2");

augusto_jaramil · #9 (**permalink**) 08/11/2011, 10:29

OK Rappa,

Voy a cuadrarlo segun lo que dices y te estare contando,

Mil Gracias

augusto_jaramil · #10 (**permalink**) 08/11/2011, 12:22

Nada...

La situacion es la siguiente con el codigo:

Código PHP:

  <html>
<head>
<title>id Form</title>
<script language="javascript">

function ocultaTodo() {
  if (document.getElementById) {
     var elemento = document.getElementById("grupos");
     elemento.style.display = "none";
     var elemento = document.getElementById("botones");
     elemento.style.display = "none";
  } 
     var elementog = document.getElementById("grupos");
     var elementob = document.getElementById("botones");
  alert("Termina ocultaTodo BOTONES: "+elementog.style.display+" GRUPOS: "+elementob.style.display);
}

function mostrarBotones(oculta,muestra) {
   if (oculta.length != 0 ) {
      var el = document.getElementById(oculta); //se define la variable "el" igual a nuestro div
      el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
   }
   if (muestra.length != 0 ) {
      var el = document.getElementById(muestra);
      el.style.display = (el.style.display == 'none') ? 'block' : 'none';
   }
     var elementog = document.getElementById("grupos");
     var elementob = document.getElementById("botones");
  alert("Termina mostrarBotones BOTONES: "+elementog.style.display+" GRUPOS: "+elementob.style.display);
}

</script>
</head>
<body onLoad="ocultaTodo()">
<table>
<form name="form1" method="post">
          <div id="formulario">
              <tr>
                <td class="clasetd">Codigo Reporte:
                </td>
                <td>
                  <input type="text" id="codigo" name="codigo" value="" class="claseinput" style="width:50px;">
                </td>
              </tr>
              <tr>
                <td class="clasetd">Nombre Reporte:
                </td>
                <td>
                  <input type="text" id="nombre" name="nombre" value="" class="claseinput" style="width:450px;" onChange="mostrarBotones('','botones');">
                </td>
              </tr>
          </div>

          <table id="grupos">
              <tr>
                <td class="clasetd">Grupos de Columnas:
                </td>
                <td>
                  <input type="text" id="grup" value="" class="claseinput" style="width:30px;">
                </td>
              <tr>
                <td class="clasetd">Nro. Columnas:
                </td>
                <td>
                  <input type="text" id="cols" value="" class="claseinput" style="width:30px;">
                </td>
              </tr>
          </table>

          <table id="botones">
            <tr>
              <td colspan="2">
                <input type="image" id="definir" name="accion" onClick="mostrarBotones('botones','grupos');" src="./imagenes/painter1.gif">
              </td>
            </tr>
          </table>

          <div id="resul">
            <tr></tr>
          </div>
</form>
</table>
</body>
</html>

1. El comportamiento de las etiquetas DIV y TABLE en lo que respecta al atributo style="display=...." es diferente. Al asignar este atributo a el tag DIV al cargar la pagina se hace visible aun cuando se defina display:none . Caso contrario a la etiqueta TABLE.

2. La funcion ocultarTodo() llamda con el evento onLoad en BODY trabaja bien, es decir, oculta los dos tags TABLE (grupos y botones).

3. La funcion mostrarBotones() tambien hace bien lo que debe hacer al momento de la llamada. El lio que veo es que cuando termina de ejecutar debe ocultar botones y mostrar grupos y por algun raro motivo hace un reload de la pagina.

De acuerdo a esto, como se hace para que no ocurra el reload de la pagina?

Rappa · #11 (**permalink**) 08/11/2011, 12:44

Yo no pondria una funcion para que oculte al cargar la página, directamente les asignaría una clase a todos los tr que quiero ocultar desde el principio y a esa clase le pondria el atributo display:none;

estilos.css

Código CSS:

Ver original.oculto{
     display:none;
}

Y en los TRs que quieres ocultar desde el principio, los pones asi:

Código HTML:

Ver original<tr class="oculto" id="...">...</tr>

augusto_jaramil · #12 (**permalink**) 08/11/2011, 13:57

Hola de nuevo,

Atendiendo tus sugerencias el codigo que tengo es el siguiente:

Código PHP:

            <table id="grupos">
              <tr class="oculto" id="trg_0">
                <td class="clasetd">Grupos de Columnas: </td>
                <td> <input type="text" id="grup" value="" class="claseinput" style="width:30px;"> </td>
              <tr class="oculto" id="trg_1">
                <td class="clasetd">Nro. Columnas: </td>
                <td> <input type="text" id="cols" value="" class="claseinput" style="width:30px;"> </td>
              </tr>
          </table>

          <table id="botones">
            <tr class="oculto" id="bot_0">
              <td colspan="2"> <input type="image" id="definir" name="accion" onClick="mostrarBotones('botones','grupos');" src="./imagenes/painter1.gif"> </td>
            </tr>
          </table>

Funcion mostrarBotones:

Código PHP:

  function mostrarBotones(oculta,muestra) {
alert("ENTRO");
   if (oculta.length != 0 ) {
      var el = document.getElementById('trg_0'); //se define la variable "el" igual a nuestro div
      if (el.style.display == "")
         el.style.display="none";
      el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
      var ex = document.getElementById('trg_1'); //se define la variable "el" igual a nuestro div

      if (ex.style.display == "")
         ex.style.display="none";
      ex.style.display = (ex.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
   }
   if (muestra.length != 0 ) {
      var bo = document.getElementById('bot_0');
      if (bo.style.display == "")
         bo.style.display="none";
      bo.style.display = (bo.style.display == 'none') ? 'block' : 'none';
   }
}

clase oculta: la que me indicates

Adicional en BODY adicione onLoad="alert('Toy aca'); con el fin de que me avise cuando hace un reload

Cuando aparece el boton y le hago click lo que hace es ocultar el boton, mostrar la tabla grupos y recarga la pagina, lo que me parece ilogico ya que por ningun lado le indico que haga reload a la pagina y todo me indica es que haga lo que haga en lo referente a modificar el codigo de la funcion mostrarBotones el resultado final es que me recarga la pagina y pierdo datos capturados... es decir arrancamos de cero nuevamente sin querer queriendo....

Sigo con mi duda: por que motivo hace reload?

augusto_jaramil · #13 (**permalink**) 08/11/2011, 16:03

Alguna otra idea?

augusto_jaramil · #14 (**permalink**) 09/11/2011, 06:15

Hola de nuevo,

Al fin se solucionó la vaina.....

Era solo colocar en la etiqueta form el evento onSubmit="return false" y listo con esto se evita el reenvío del formulario, ademas, como la idea es utilizar ajax no es necesario hacer recarga de la pagina

<form name="form1" method="post" onSubmit="return false">

Agradezco mucho el interés de Rappa en el tema y su voluntad de ayuda

Al final de todo queda la experiencia y los nuevos conocimientos

Mil Gracias

Rappa · #15 (**permalink**) 09/11/2011, 06:15

Es la única función que tienes en la página?

augusto_jaramil · #16 (**permalink**) 09/11/2011, 06:32

No, esta es una prueba para una aplicación que estoy desarrollando y se me presentó todo este lío. Para reducir la cantidad de código me enfoqué solo en el problema.

La idea es desarrollar una aplicación generadora de reportes en la que el usuario pueda personalizarlos a su gusto, accediendo al información almacenada en la BD.

De pronto si conoces de alguna herramienta datagrid fácil de utilizar que se alimente de la información devuelta por el servidor para implementarla en este proyecto te agradecería me dieras el dato

Saludos,

Rappa · #17 (**permalink**) 09/11/2011, 06:38

Si la función es solamente eso que hemos estado viendo, miraría si no es otra la función que te recarga la página.

Herramientas no conozco ninguna, :(

augusto_jaramil · #18 (**permalink**) 09/11/2011, 07:06

No, en este script hay solo es esa función

Rappa · #19 (**permalink**) 10/11/2011, 08:36

Cita:

Iniciado por augusto_jaramil

Hola de nuevo,

Al fin se solucionó la vaina.....

Era solo colocar en la etiqueta form el evento onSubmit="return false" y listo con esto se evita el reenvío del formulario, ademas, como la idea es utilizar ajax no es necesario hacer recarga de la pagina

<form name="form1" method="post" onSubmit="return false">

Agradezco mucho el interés de Rappa en el tema y su voluntad de ayuda

Al final de todo queda la experiencia y los nuevos conocimientos

Mil Gracias

Me alegro que lo hayas solucionado.

Saludos