HTML - Formulario Html con tabs (pestañas), retroceder luego de navegar

   
Vista:
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 18/05/2014 00:22:52
Estimados,
Tengo un formulario html con varias tabs o pestañas en el que agrupo datos relacionados, ejemplo de un cliente tengo un tabs de DatosPersonales, otro de Domicilio, otro de DatosFiscales, otro de Compras, Etc., estas tabs corresponden a diferentes <div> dentro del formulario html general, y permite que el usuario navegue por cada grupo de datos sin ver todos los demás que quedan en segundo plano. Al navegar por las tabs el propio navegador cuenta una página visitada, lo que retroceder mediante el botón tradicional (windows.history.go(-1) para salir del formulario general y volver a la página anterior no es funcional. La pregunta es si tuvieron el mismo problema y como lo resolvieron, para ganar tiempo de acuerdo a sus experiencias.

Saludos y gracias por adelantado.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por xve (1178 intervenciones) el 18/05/2014 10:06:00
Hola Sergio, entiendo que tu problema, es que al moverse por las pestañas, no se actualiza la pagina, por lo que al pulsar el botón volver, se va de la pagina, aunque haya pulsado varias veces en las pestañas, verdad?

Si es esto, pasa en infinidad de portales, ya que todo lo que se ejecuta en javascript, no cuenta para el botón volver del navegador, por eso en el contenido de las paginas, se pone el típico botón de "volver".

No se si te he ayudado en algo... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Jose maria (8 intervenciones) el 19/05/2014 00:32:45
Recuerdo que en este foro planteaba la misma cuestión y el gran xve me daba la solución.

En aquel caso yo sabía que el form hacía recargar la página y ya no servía volver a la página anterior (era la misma antes de recargarse).

Así que en el caso la solución era
1
<a href="javascript:window.history.go(-2);">Volver a la página anterior</a>'

No sé si te puede servir.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 19/05/2014 13:46:07
Hola José,
Gracias por responder, conozco las funciones java, pero en este caso en realidad necesitaría algo como "java...:windows.history(-xx);" dónde xx es un valor que depende de la cantidad de veces que el usuario navegó por las tabs de mi form, lo probé usando un script java y una variable que se incrementa luego de cada <div> de mi form, pero no esta funcionando (se actualiza con la cantidad total de las tabs, independientemente que el usuario no haya navegado o haya navegado más de una vez por cada tabs).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 19/05/2014 13:55:17
Hola xve, gracias por responder
Si en realidad no es que se vaya de la página, sino que permanece en la misma ya que al navegar por las tabs el navegador cuenta como página visitada. Necesitaría algo como java...windows.history.go(-xx) dónde "xx" debería iniciar en -1 e irse actualizando en la medida que el usuario navegue por las diferentes tabs del formulario. Lo probé insertando este código:

En cada <div> del formulario
<script>
ctbas=ctabs+1
</script>

Al final del formulario antes del botón "Volver"
<script>
retorno='history.go(' + '-' + ctabs +')' ;
</script>

y programando el Botón Volver como:

<input class="clase04" type="button" value="Cancela" onClick="javascript:document.write(retorno)">

Pero retorno siempre tiene el total de las tabs, no se actualiza con la navegación.-
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por xve (1178 intervenciones) el 19/05/2014 17:37:09
Hola Sergio, si quieres mantener el valor ctabs, tendrás que utilizar cookies... con JavaScript es la única manera que se me ocurre.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 19/05/2014 20:44:12
Hola xve,
Bueno al fin lo pude resolver, lo hice con una función en el evento onclick de cada pestaña que me acumula una variable xx :

function contar_click() {
xx=xx-1;
}

Luego inicializo la variable

<script>
xx=-1
</script>

Y por último en el botón cancelar onclick="history.go((xx))",
Funciona perfecto, gracias de todos modos por responder mi consulta.-

Saludos,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por xve (1178 intervenciones) el 19/05/2014 22:10:48
Hola Sergio, muchas gracias por comentarlo, pero no entiendo como te funciona... como sabe la variable x cuantas veces has pulsado en alguna pestaña?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 20/05/2014 13:45:01
Hola xve comento de nuevo los pasos:

Al inicio agrego la funcion js para contar los click e inicio la variable xx con valor -1:

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript" type="text/JavaScript">
}
function contar_click() {
  xx=xx-1;
}
//-->
</script>
<script>
 var xx=-1;
</script>


En los div donde defino las pestañas de cada tabs de mi formulario uso el evento onclick para llamar a la función:

1
2
3
4
5
6
7
<div class=............>
<ul class=............>
<li><a href="#Titular" class="current" onclick="contar_click()">Titular</a></li>
<li><a href="#Domicilio" onclick="contar_click()">Domicilio</a></li>
<li><a href="#Otros" onclick="contar_click()">Otros</a></li>
<li><a href="#Observaciones" onclick="contar_click()">Observaciones</a></li>
</ul>

Por último el botón cancelar que en mi caso debe volver a la página anterior del sistema le asigno el código:

1
<input class="clase04" type="button" value="Cancela" onclick="history.go((xx))">

De este modo cuando el usuario ingresa a este formulario por ejemplo desde la página "A" y navega por todas las pestañas del mismo, puedo volver a la página "A" de forma independiente de la cantidad de veces que haya navegado por cada pestaña, porque el valor de retorno del "history.go" estará dado por la variable "xx".

Soy nuevo explicando estos métodos espero se entienda algo.-

Saludos,

Sergio
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por xve (1178 intervenciones) el 20/05/2014 18:52:49
Hola Sergio, ahora entiendo lo que haces... realmente no cambias de pagina, si no que lo que haces, es que vas a una posición dada de la pantalla...

Ahora entiendo tu problema... creía que realmente cambiaras de pagina...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Formulario Html con tabs (pestañas), retroceder luego de navegar

Publicado por Sergio (8 intervenciones) el 20/05/2014 14:07:26
Adjunto una muestra de mi form, saludos.-

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar