2

Estimadxs, buenos días, quisiera consultarles: ¿Cómo puedo mantener la persistencia de un div luego de un REFRESH/RELOAD?. Lo que hago es seleccionar un option de un select para ir mostrando un div predeterminado, a través de jQuery mantengo la persistencia del option luego de que se hizo REFRESH/RELOAD en la página. El problema, es que si bien se mantiene seleccionado el option el div no figura y es ahí donde necesito ayuda, este es el div:

<div>
  <div class="opc" id="cerDiv" style="display:none;">
    <div class="divTag" style="width: 350px;">
      <p>
        <span class="spanrojo">|</span>
        <span class="spangris">Certificaciones</span>
        <span class="spanrojo">|</span>
      </p>
      <form method="post" onsubmit="return captchaValidar(this)" action="/Home/Pdf">
        <label for="solicitud">Solicitud: </label>
        <input type="text" id="solicitud" minlength="5" maxlength="7" name="solicitud" placeholder="Ingrese la solicitud..." required="" title="Sólo letras y números. Cantidad mínima de caracteres: 5. Cantidad máxima de caracteres: 7" onkeypress="return validarCertificadosYSolicitudes(event)" autofocus="">
        <input class="buscar" type="submit" id="btn" value="Buscar">
      </form>
    </div>
  </div>
  <div class="opc" id="cuoDiv" style="display:none;">
    <div style="width: 350px; ">
      <p>
        <span class="spanrojo">|</span>
        <span class="spangris">Cuotas</span>
        <span class="spanrojo">|</span>
      </p>
    </div>
    <div class="divTag" style="width: 350px;">
      <form id="frmCU" method="post" action="/Cuotas/DetalleCuota">
        <label for="titulo">Título: </label>
        <input type="number" id="titulo" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="titulo" maxlength="6" placeholder="Ingrese su título..." required="" title="Sólo letras y números. Cantidad mínima de caracteres: 4. Cantidad máxima de caracteres: 5" onkeypress="return cuotasYTitulos(event)" autofocus="">
        <input class="buscar" type="submit" id="btn" value="Buscar">
      </form>
    </div>
  </div>
  <div class="opc" id="solDiv" style="display:none;" data-sort="3">
    <div style="width: 350px;">
      <p>
        <span class="spanrojo">|</span>
        <span class="spangris">Solicitudes</span>
        <span class="spanrojo">|</span>
      </p>
    </div>
    <div class="divTag" style="width: 350px;">
      <form method="post" action="/Solicitudes/Pdf">
        <label for="solicitud">Solicitud: </label>
        <input type="text" id="solicitud" minlength="5" maxlength="7" name="solicitud" placeholder="Solicitud..." required="" title="Sólo letras y números. Cantidad mínima de caracteres: 5. Cantidad máxima de caracteres: 7" onkeypress="return validarCertificadosYSolicitudes(event)" autofocus="">
        <input class="buscar" type="submit" id="btn" value="Buscar">
      </form>
    </div>
  </div>
  <div class="opc" id="titDiv" style="display:none;" data-sort="4">
    <div style="width: 350px;">
      <p>
        <span class="spanrojo">|</span>
        <span class="spangris">Títulos</span>
        <span class="spanrojo">|</span>
      </p>
    </div>
    <div class="divTag" style="width: 350px;">
      <form method="post" action="/Titulos/Pdf">
        <label for="titulo">Título: </label>
        <input type="number" id="titulo" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="titulo" maxlength="6" placeholder="Ingrese su título..." required="" title="Sólo  números. Cantidad mínima de caracteres: 4. Cantidad máxima de caracteres: 6" onkeypress="return cuotasYTitulos(event)" autofocus="">
        <input class="buscar" type="submit" id="btn" value="Buscar">
      </form>
    </div>
  </div>
</div>

Este es el select que tengo:

<select id="sort-item" class="term">
  <option data-sort="0">ELIJA UNA OPCIÓN</option>
  @foreach (var nivel in Model)
  {
    if (nivel.nivel == 0 || nivel.nivel == 1 || nivel.nivel == 2 || nivel.nivel == 7)
    {
      <option value="cerDiv" data-sort="1">Certificados</option>
      <option value="cuoDiv" data-sort="2">Cuotas</option>
      <option value="solDiv" data-sort="3">Solicitudes</option>
      <option value="titDiv" data-sort="4">Títulos</option>
    }
  }
</select>

Y así mantengo la persistencia:

let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];

$(function () {
  if (selItems) {
    selItems.forEach(obj => {
      const [k, v] = Object.entries(obj)[0]
      $("#" + k).val(v)
    })
  }
  $('.term').on("change", function () {
    selItems = $('.term').map(function () {
      return {
        [this.id]: this.value
      }
    }).get();
    console.log(this.value)
    sessionStorage.setItem("SelItem", JSON.stringify(selItems))
    mostrarDiv(this.value)
  });
});

function mostrarDiv(target) {
  var opciones = document.getElementsByClassName('opc');
  var tagt = document.getElementById(target);
  var esVisible = tagt.style.display == 'block';

  //ocultar todo
  for (var i = 0; i < opciones.length; i++) {
    opciones[i].style.display = 'none';
  }

  //toggle actual
  tagt.style.display = esVisible ? 'none' : 'block';

  return false;
}
9
  • 1
    Los botones tipo submit ya no deberían utilizarse, se han vuelto mala practica de programación. Murieron con la aparición de AJAX y ahora se han olvidado aun mas con la aparición de las las paginas tipo SPA que llevan a AJAX a su máxima expresión. Si diseñas una página con submit vas en contra de todas estas tecnologias.
    – abrahamhs
    Commented el 24 jul. 2023 a las 17:36
  • 1
    Creo que he encontrado la solución, pero parece incluso innecesario usar jQuery, ya que incluso encontré la solución usando JavaScript puro y visualizando el código. ¿Es jQuery realmente necesario en tu proyecto?
    – Rodrigo
    Commented el 24 jul. 2023 a las 17:43
  • 2
    sessionStorage solo mantiene los datos mientras la sesión de navegación está activa, o mejor dicho, es temporal... y puede ser debido a que cuando la sesión se pierda, no te muestre el div persistente... Puedes probar con localStorage. Commented el 24 jul. 2023 a las 18:05
  • 1
    ¿Podrías proporcionar el código HTML completo para replicar fielmente la página web? Commented el 24 jul. 2023 a las 22:30
  • 1
    No es necesario, lo hice así porque estuve siguiendo unos ejemplos. Puede ser js puro @RodrigoRamírez Commented el 25 jul. 2023 a las 1:03

3 respuestas 3

4

La solución más práctica es guardar this.value en conjunto en el sessionStorage. Puedes hacer esto.

Como el valor que guardas es un Array, podemos convertirlo en un objeto para poder guardar más valores de manera indexada, difiriendo del Array.

sessionStorage.setItem("SelItem", JSON.stringify({ items: selItems, selectionValue: this.value }));

De esta forma estarás guardando la elección en un apartado dentro del mismo objeto. De esta forma puedes recuperar el valor selectionValue en la función que ejecutas cuando se carga la página.

Puedes reemplazar estas líneas

if (selItems) {
    selItems.items.forEach(obj => {
      const [k, v] = Object.entries(obj)[0]
      $("#" + k).val(v)
    })
    // usar return para terminar la ejecucion
    return mostrarDiv(selItems.selectionValue);
}

Los cambios que hice fueron los siguientes:

  1. Terminar la ejecución del código Usando return, se terminará la ejecución del código, de esta forma
return mostrarDiv(selItems.selectionValue);

En este contexto, return se usa para terminar la ejecución del código, ya que estamos en un contexto de "bloque". Puedes revisar el siguiente enlace: return.

  1. Iterar selItems.items Como previamente guardamos los valores en el valor items de selItems, ahora podemos recuperar los datos desde selItems.items que contendrá los datos que guardamos anteriormente.

Una consideración a tener en cuenta es que sessionStorage tiene un tiempo de expiración. Por lo general, cuando cierras la página, el sessionStorage se reiniciará. Si quieres asegurar realmente la persistencia de los datos pase lo que pase, puedes usar localStorage en vez de sessionStorage, para hacerlo, simplemente cambia todos los sessionStorage por localStorage.

Documentación y referencias

0
2
+150

No se mencionó si hay algún mensaje de error que pueda aparecer en la consola del navegador para evaluarlo.

Pero tu código está funcionando correctamente.

Quizás sea el uso de jQuery lo que no está configurado de manera correcta.

 Antes de usar jQuery,:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!------| - mira  - |------>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!--...........-->


    <title>Test</title>
</head>
<body>
   
</body>

Así como JavaScript, ahora se necesita hacer el enlace en las páginas donde se debe usar jQuery.

 $(function(){

        // Código JS / jQuery
        
    })

Al colocar todo dentro de este evento, se evitará que una función en un elemento que aún no ha sido cargado genere un error; Todo lo que esté dentro del evento "Ready" no se cargará antes de jQuery.

 Lo que hace tu código es que no muestra el resultado cuando seleccionas la opción "Titulos", la última opción. No es un error, sino que nada aparecerá debido a cómo colocaste la función.

Al reubicar la función dentro del evento Ready, todo funcionará correctamente.

let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];

    $(function () {
      if (selItems) {
        selItems.forEach(obj => {
          const [k, v] = Object.entries(obj)[0]
          $("#" + k).val(v)
        })
      }
      $('.term').on("change", function () {
        selItems = $('.term').map(function () {
          return {
            [this.id]: this.value
          }
        }).get();
        console.log(this.value)
        sessionStorage.setItem("SelItem", JSON.stringify(selItems))
        mostrarDiv(this.value)
      });
      
      
      //-----------------------
      
      function mostrarDiv(target) {
      var opciones = document.getElementsByClassName('opc');
      var tagt = document.getElementById(target);
      var esVisible = tagt.style.display == 'block';
    
      //ocultar todo
      for (var i = 0; i < opciones.length; i++) {
        opciones[i].style.display = 'none';
      }
    
      //toggle actual
      tagt.style.display = esVisible ? 'none' : 'block';
    
      return false;
    }
    });

Siguiendo el ejemplo de lo que mencioné y como está funcionando correctamente sin ninguna modificación en el código, simplemente realoqué la función y especificé el enlace de jQuery.

CODE.. codepen
Como coloqué en el HTML fue:

primero select y luego las div's.

1
  • 1
    Gracias por tu contribución, te sugerimos revisar Cómo responder, recuerda dar crédito correspondiente para evitar "plagio".
    – Jorgesys
    Commented el 26 jul. 2023 a las 19:52
-1

Para mantener la persistencia de un div después de un REFRESH/RELOAD en una página web, puedes utilizar el almacenamiento de sesión (sessionStorage) en JavaScript. Osea, aca te dejo un ejemplo:

let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];

$(function () {
  if (selItems) {
    selItems.forEach(obj => {
      const [k, v] = Object.entries(obj)[0]
      $("#" + k).val(v)
    })
  }
  $('.term').on("change", function () {
    selItems = $('.term').map(function () {
      return {
        [this.id]: this.value
      }
    }).get();
    sessionStorage.setItem("SelItem", JSON.stringify(selItems))
    mostrarDiv(this.value)
  });
});

function mostrarDiv(target) {
  var opciones = document.getElementsByClassName('opc');
  var tagt = document.getElementById(target);
  var esVisible = tagt.style.display == 'block';

  //ocultar todo
  for (var i = 0; i < opciones.length; i++) {
    opciones[i].style.display = 'none';
  }

  //toggle actual
  tagt.style.display = esVisible ? 'none' : 'block';

  return false;
}

Este código utiliza sessionStorage para almacenar los valores seleccionados del en el almacenamiento de sesión del navegador. Luego, al cargar la página nuevamente, recupera estos valores del sessionStorage y los asigna a los elementos correspondientes para mantener la persistencia de la selección y mostrar el div adecuado.

Recuerda que sessionStorage se borra cuando se cierra la pestaña o el navegador, por lo que la persistencia solo se mantendrá durante la sesión actual del usuario.

3
  • 3
    pero ÉL ya estaba usando sessionStorage, esa no es la solución Commented el 24 jul. 2023 a las 21:39
  • 4
    Gracias por tu contribución, te sugerimos revisar Cómo responder, recuerda dar crédito correspondiente para evitar "plagio".
    – Jorgesys
    Commented el 24 jul. 2023 a las 21:46
  • 3
    @cardosource la respuesta es generada con una IA, obviamente es errónea. Commented el 24 jul. 2023 a las 21:52

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.