es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Javascript: función para mostrar una pestaña basada en datos de un contenedor de texto

27 Jul, 2023 Programación

Estoy tratando de mostrar dos pestañas en MicroStrategy Web, basadas en una cadena predefinida dentro de un contenedor de texto.

Por ejemplo, quiero mostrar una pestaña para un usuario que solo cumpla con la categoría “Trader”. Si el texto en un contenedor que he creado en la página de la pestaña tiene el texto “Trader” como cadena, entonces la visualización de la pestaña cambiará a “block” para mostrar esa página a los Traders, de lo contrario cambiará a “none” y cambiará el estilo de visualización a “block” en la página para otro tipo de clientes.

En este momento estoy atascado tratando de hacer que funcione cuando el usuario cambia entre pestañas, ya que al cargar por primera vez, una de las pestañas está oculta y se muestra la otra dependiendo del contenedor de texto, como se esperaba, pero cuando cambio a otras pestañas / páginas en el panel de control, ambas se muestran.

¿Qué sugieres para hacer que funcione incluso cuando cambio entre páginas / pestañas?

Esto es lo que tengo hasta ahora.

¡Gracias chicos!

<script type="text/javascript">

(function verify_branch(){
    if(document.getElementsByClassName('vi-doc-tf-value-text')[0].innerHTML == "Trader")
    {
        document.getElementById("mstr2056").style.display = "block";
        document.getElementById("mstr2058").style.display = "none";
        console.log("Trader");

    }else{
        document.getElementById("mstr2056").style.display = "none";
        document.getElementById("mstr2058").style.display = "block";
        console.log("Other");
    }
})();

</script>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que funcione incluso al cambiar entre páginas/pestañas, puedes agregar un event listener para detectar cuándo el usuario cambia de pestaña. Dentro del event listener, puedes ejecutar el mismo código para verificar la sucursal y mostrar la pestaña adecuada en función del contenedor de texto.

    Aquí tienes un ejemplo de cómo puedes modificar el código para incluir el event listener:

    <script type="text/javascript">
function verificar_sucursal(){
    if(document.getElementsByClassName('vi-doc-tf-value-text')[0].innerHTML == "Trader")
    {
        document.getElementById("mstr2056").style.display = "block";
        document.getElementById("mstr2058").style.display = "none";
        console.log("Trader");
    }else{
        document.getElementById("mstr2056").style.display = "none";
        document.getElementById("mstr2058").style.display = "block";
        console.log("Otro");
    }
}

// Agregar event listener para detectar cuándo el usuario cambia de pestañas
document.addEventListener("DOMContentLoaded", function() {
    const tabsContainer = document.querySelector('.mstrmojo-TabContainer');
    if (tabsContainer) {
        tabsContainer.addEventListener('click', function(event) {
            // Esperar a que el contenido de la pestaña se cargue antes de verificar la sucursal
            setTimeout(verificar_sucursal, 500);
        });
    }
});

// Ejecutar verificar_sucursal() en carga inicial
verificar_sucursal();
</script>

    En este código modificado, agregamos un event listener para el evento click en el contenedor de pestañas. También envolvimos la función verificar_sucursal() dentro de la función setTimeout() para darle tiempo suficiente al contenido de la pestaña para cargarse antes de verificar la sucursal nuevamente.

    Finalmente, llamamos a verificar_sucursal() una vez en la carga inicial para verificar la sucursal y mostrar la pestaña adecuada.

Comments are closed.