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;
}
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 conlocalStorage
.