Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Ir a un sitio concreto de la pagina despues de guardar datos

Estas en el tema de Ir a un sitio concreto de la pagina despues de guardar datos en el foro de Javascript en Foros del Web. Hola. Necesito vuestra ay uda para conseguir lo siguiente: Tengo un formulario con varios botones guardar. Lo que quiero es que, despues de pulsar guardar, ...
  #1 (permalink)  
Antiguo 30/10/2020, 06:20
 
Fecha de Ingreso: mayo-2009
Mensajes: 741
Antigüedad: 11 años, 7 meses
Puntos: 6
Ir a un sitio concreto de la pagina despues de guardar datos

Hola.

Necesito vuestra ay uda para conseguir lo siguiente:

Tengo un formulario con varios botones guardar.

Lo que quiero es que, despues de pulsar guardar, hace las operaciones oportunas, vuelve a la pagina donde estaba pero en lugar de que se situe en el principio, quiero que se situe donde estaba el boton guardar, si estaba abajo, pues abajo, si estaba en medio, pues en medio, etc.

Gracias.

Un saludo.
  #2 (permalink)  
Antiguo 30/10/2020, 09:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 12 años, 10 meses
Puntos: 1145
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Lo ideal es que hagas este proceso con ajax para que no tengas que recargar la pagina,

si te es inevitable colocale un ID al boton y cuando redirecciones agrega #id-del-boton al final de la URL

En automatico te enviara a esa posicion

Otra opcion es que cuando envies el formulario tambien envies la posición de la ventana

window.scrollY

Despues cuando recargues incluyas un script al final que contenga

Código Javascript:
Ver original
  1. window.scroll(0, posicionAnterior)



Francamente yo preferiria la opcion de AJAX o en su defecto un ancla en la URL por facilidad
  #3 (permalink)  
Antiguo 30/10/2020, 09:59
 
Fecha de Ingreso: mayo-2009
Mensajes: 741
Antigüedad: 11 años, 7 meses
Puntos: 6
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Hola. Muchas gracias por tu respuesta.

El tema del ajax está descartado por otros motivos.

He conseguido antes de pulsar el boton guardar, grabar en el localstorage bien el nombre del id o bien la posicion del scrooll como me has dicho.

Al volver a la pagina, bien con el id y .focus() o bien con window.scroll va a donde quiero.

El problema ahora es el efecto, es decir, pulso guardar, va al inicio de la pagina y un segundo despues se situa en el foco donde quiero (normalmente bien abajo).

Ahora la pregunta es si hay alguna forma de que ese segundo o bien no se vea y aparezca directamente ya en el foco sin ver el inicio de la pagina, o bien si se tiene que ver, que sea con algún efecto que "mole".

No se si me he explicado.
  #4 (permalink)  
Antiguo 30/10/2020, 10:06
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.475
Antigüedad: 9 años, 2 meses
Puntos: 952
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Puedes guardar el identificador del botón en una cookie o en almacenamiento local, leerlo al retornar a la página y desplazar la barra vertical hasta la posición de dicho elemento mediante el método .scrollIntoView().

Una manera más sencilla de darle solución a esto sería si guardaras los datos mediante una petición asíncrona (AJAX), de tal forma que la ventana no se recarga y el usuario puede seguir navegando mientras la información se almacena.

Código Javascript:
Ver original
  1. var form = document.querySelector("#id_del_formulario");
  2.  
  3. form.addEventListener("submit", function(event){
  4.     event.preventDefault();
  5.  
  6.     let self = this,
  7.         ajax = new XMLHttpRequest(),
  8.         data = new FormData(self);
  9.  
  10.     ajax.open("POST", self.action, true);
  11.     ajax.send(data);
  12.     ajax.addEventListener("load", function(){
  13.         this.status == 200 && alert("Datos guardados");
  14.         self.reset();
  15.     });
  16. }, false);

En esencia, el código anterior envía los datos del formulario hacia la dirección establecida en el atributo action del formulario (en donde se van a guardar los datos). Una vez que dicha operación se ha completado, se muestra un mensaje de alerta avisándole al usuario que los datos se han guardado para, finalmente, dejar los campos del formulario en blanco. Todo ello se realiza sin la necesidad de recargar la ventana, por lo cual ya no es necesario tomar la posición del botón del formulario para hacer el scroll hacia su ubicación.

EDITO: Estuve escribiendo esto antes de que se publicaran las respuestas que ahora veo. Si dices que no puedes emplear AJAX, te sugiero tomar la primera opción que menciono.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 30/10/2020 a las 12:16 Razón: Respuestas no advertidas
  #5 (permalink)  
Antiguo 31/10/2020, 10:44
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.139
Antigüedad: 16 años, 7 meses
Puntos: 831
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Esto es viejo, pero quizá sirva:
http://www.forosdelweb.com/f13/volve...4/#post4637477
  #6 (permalink)  
Antiguo 31/10/2020, 20:52
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 12 años, 5 meses
Puntos: 2235
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

No sé si mole, pero podría servir aplicar "smooth scroll" al documento con CSS para que no "brinque de golpe". Referencia: https://developer.mozilla.org/es/doc...croll-behavior

Código CSS:
Ver original
  1. html, body {
  2.     scroll-behaviour: smooth;
  3. }
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 02/11/2020, 01:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 12 años, 10 meses
Puntos: 1145
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

@triby creo que la propiedad CSS mecionada no tiene soporte para Safari, algo lastimosamente requerido en muchos ambitos/proyectos

ya que yo propuese usar scroll en javascript para evitar que brinque tan feo tenemos esta forma de implementar

Código Javascript:
Ver original
  1. window.scroll({ top: scrollTo, behavior: 'smooth' });

Por lo que he visto tiene mejor compatibilidad
  #8 (permalink)  
Antiguo 02/11/2020, 17:15
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 12 años, 5 meses
Puntos: 2235
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

@ArturoGallegos, parece que el problema será el mismo con Javascript, Safari no soporta smooth behaviour: https://caniuse.com/element-scroll-methods
__________________
- León, Guanajuato
- GV-Foto
  #9 (permalink)  
Antiguo 02/11/2020, 21:41
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 12 años, 10 meses
Puntos: 1145
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Ya valio madres, paren todo se cancela el proyecto.

Ni hablar Triby tienes toda la razón, me fui con la finta en la tabla de compatibilidad... hoy he aprendido algo nuevo.
  #10 (permalink)  
Antiguo 03/11/2020, 05:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 741
Antigüedad: 11 años, 7 meses
Puntos: 6
Respuesta: Ir a un sitio concreto de la pagina despues de guardar datos

Hola. Gracias a todos por vuestras respuestas.

Me sirvió el behavior: 'smooth' aunque no funcione en Safari

Dicho esto, no me gusta el efecto, buscaré por ahí algún plugin que haga un fade o algo parecido.



La zona horaria es GMT -6. Ahora son las 09:00.