0

tengo un proyecto que estoy haciendo en el cual tengo una pagina de productos con un select y algunas opciones que al retroceder a la pagina previa o ir a la pagina siguiente pero luego regresar no se recarga. Es decir sucede esto: introducir la descripción de la imagen aquí

Yo deseo que al cambiar de pagina desde la misma pagina, refrescarla o cerrarla y volverla a abrir el select mantenga la opción 'Sabores disponibles'. Pero yo al tocar por ejemplo en el nav para ir a la sección de 'Nosotros' y luego regresar atrás desde la misma pestaña queda cargada una opción del select si es que lo utilice. Sucede asi: introducir la descripción de la imagen aquí

Selecciono una opcion del select introducir la descripción de la imagen aquí

Toco en el enlace a la sección nosotros desde la misma pestaña pero presiono para volver a la pagina anterior.

introducir la descripción de la imagen aquí

Y al volver la pagina se carga con la opcion del select que presione antes de irme a otra pestaña pero no figura la opción seleccionada por defecto que es 'Sabores disponibles' como la primera vez que se entra a la pagina.

<select id="stock" class="custom-select">                             
  <option selected="" value="" disabled=""> Sabores Disponibles</option>
  <option value="6">Rainbow</option>
  <option value="1">Purple Rain</option>
  <option value="2">Blue Razz</option>
  <option value="4">Orange Dream</option>
</select>
3
  • Puedes compartirnos el código que estas usando para el SELECT? asi podremos ayudarte más rapido
    – EvilFearzZ
    Commented el 26 dic. 2022 a las 23:05
  • Ya lo hice hermano Commented el 26 dic. 2022 a las 23:22
  • Abajo ya hay una respuesta que puedes probar, pero tambien como observación, prueba cambiando esta linea: <option selected="" value="" disabled=""> de esta forma: <option selected value="">
    – EvilFearzZ
    Commented el 27 dic. 2022 a las 16:12

1 respuesta 1

0

Lo que pasa es que existe un caché llamada bfcache que guarda las páginas que están en la pila de navegación, de esta manera al ir hacia adelante o hacia atrás no hace un llamado al servidor sino que muestra la página almacenada en dicho caché, incluso almancenado los datos ingresados a inputs y selects

Una posible solución es usar el evento pageshow para detectar mediante el atributo persisted si la página está en caché o no, y si lo está obligar a hacer un reload o reset al form

window.addEventListener( "pageshow", function ( event ) {
  if ( event.persisted ) {
    //window.location.reload();
    document.querySelectorAll('form').forEach(e=> e.reset()); //reseta todos los forms
  }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.