Monday, 24 July 2023

Save data in sessionStorage to show a div after reload page

I've a group of divs that I show after I click an option from a select. The data option is saved after reload to keep the option selected. That works correctly but the problem is onreload, I want to save the value div to show it but I don't know how to do that: look:

This is my div group:

<center>
    <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="@Url.Action("Pdf", "Home")">
                    <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" />

                    @if (ViewBag.Alert != null)
                    {
                        <div class="alert">
                            <span class="closebtn">&times;</span>
                            <strong>Providus informa: </strong>
                            <p>@ViewBag.Alert</p>
                        </div>
                    }
                </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="@Url.Action("DetalleCuota", "Cuotas")">
                    <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" />
                    @if (ViewBag.Alert != null)
                    {
                        <div class="alert">
                            <span class="closebtn">&times;</span>
                            <strong>Providus informa: </strong>
                            <p id="textoAlerta">@ViewBag.Alert</p>
                        </div>
                    }
                </form>
            </div>
        </div>
    </div>
</center>

And this is my select options:

            <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>
                    } 
                }
            </select>

I have a this in my js file:

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

$(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(selItems)
        sessionStorage.setItem("SelItem", JSON.stringify(selItems));
        saveDiv(this.value);
    });
});

function saveDiv(div) {
    div_status[div] = true;
    sessionStorage.setItem("div_status", JSON.stringify(div_status));
}

window.onload = function () {
    console.log(div_status);
    Object.values(div_status).forEach(function (div) {
        monstrarDiv(document.querySelector("#" + div))
    });
}

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

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

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

    return false;
}

I'm trying change the code but nothing works because I don't know how to call the value to show a div.



from Save data in sessionStorage to show a div after reload page

No comments:

Post a Comment