1

he probado varias cosas pero decidí venir aquí porque me parece curioso lo que está pasando.. tiene mucho sentido pero al mismo tiempo creo que no debería pasar.

Tengo un dropdown menu con Bootstrap con subitems y funciona sin problemas pero necesito que al entrar a uno de los submenús cargue una pagina en un div que también está funcionando al crearla sin usar el botón...

Lo que pasa es que cuando pongo la ID en el botón del submenú, ósea el ítem 1 funciona pero presionando el botón que despliega el menú, no el del sub ítem debe tener un script js que trae la pagina que necesito y no lo muestra en un Div que ya está creado.

Básicamente lo que necesito es que se pueda usar el botón de dropdown menu para mostrar los 2 items que hay dentro, luego al presionar uno de los sub ítems cargue una pagina con un Js en un DIV que ya está fijado, agrego los fragmentos de código que estoy utilizando.

Dependencias:

    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-4.5.0-dist/css/bootstrap.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Estos son los botones con el dropdown

<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Titulodropdown
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu1" id="dropdownMenu1">
                            <a class="dropdown-item" href="#" id="carga_primerbotonjs">subitem 1</a>
                            <a class="dropdown-item" href="#">Subitem2</a>
                        </div>

Y este último es el Div y el js que quiero ejecutar para que se muestre la pagina que solicito.

<div id="carga_primerbotonjs">//En este DIV debería verse la pagina//</div>

    <script type="text/javascript">
        $(document).ready(function(e){
            $('#carga_primerbotonjs').load('cargar/rutadearchivo.php', function(data)
            {
                $(this).html(data);

            });
        });

    </script>

No se si fui lo suficientemente claro 😅 pero espero que alguno pueda explicarme que está mal y como debería ser.

Muchas Gracias de antemano.

1 respuesta 1

1

El método load() va a tratar de cargar el contenido especificado en el elemento donde lo ejecutas, es decir... ¡Ups! Tanto el enlace como el div tienen mismo ID y esto podría generar comportamientos extraños, recuerda que deben ser únicos.

Lo que necesitas es agregar un evento para que cuando se haga clic en el enlace se cargue contenido en el div:

<div id="div_primerbotonjs"></div>

<script type="text/javascript">
    $(document).ready(function() {
        // "Escuchar" clics en el enlace
        $('#carga_primerbotonjs').on('click', function() {
            // Actualizar contenido del div
            $('#div_primerbotonjs').load('cargar/rutadearchivo.php');
        });
    });

</script>
1
  • Tienes razón, tenia una ID repetida 😅 las secuelas de no dormir bien en varios días... jaja gracias! solucionado con eso.
    – Dante
    el 11 jun. 2020 a las 12:47

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.