3

Estoy buscando la manera de poder actualizar la página a mostrar dando click en el menú sin que se recargue toda la página como tal, es decir, cuando el usuario de click en la pestaña "indicadores", me muestre la información que hay en "indicadores.html", solo actualizando esa parte de la "página a mostrar".

Sé que se realiza con Ajax, de hecho, lo hice de la siguiente manera:

$("a").click(function() {
    $.ajax({  
        url: 'indicadores.html',
        success: function(data) {
            $('#div_dinamico').html(data);  
        }  
    });  
});

Cada vez que el usuario de click en un enlace en el menú, este cargue la página solicitada en el <div> correspondiente.

El problema es que muestra la información del .html solicitado pero recarga inmediatamente.

  • Página Index:
<div class="container-fluid">
        <div class="row fila">

            <nav class="col col-sm-3 col-md-2 nopadding" id="navbar">
                <ul class="nav flex-column">

                    <div class="rounded mx-auto my-auto">
                      <img src="" alt="">Aqui va imagen
                    </div>
                  
                    <hr>
                    
                    <div class="general mx-auto my-auto">
                      <p>
                        General
                      </p>
                    </div>
                  
                    <li class="nav-item active">
                        <a class="nav-link" href=""><i class="fas fa-home"></i> Dashboard</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href=""><i class="fas fa-chart-bar"></i> Indicadores</a>
                    </li>
                  
                    <li class="nav-item">
                        <a class="nav-link" href=""><i class="fas fa-table"></i> Ranking</a>
                    </li>
                  
                  </ul>
            </nav>

            <main class="col nopadding">

                <div id="div_dinamico"></div>
               
            </main>

        </div>
    </div>
  • Página Indicadores en la cual hago el ejemplo:
<div>

    <h2>Lorem, ipsum dolor.</h2>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolore perspiciatis soluta tempore quasi beatae perferendis iusto reprehenderit autem voluptatum veniam repellat error a dolorum praesentium cupiditate atque 
        magnam enim dicta delectus, temporibus nemo consectetur. Nam fugiat quasi nulla dolor officia, saepe quae eaque inventore!
    </p>
    
</div>

introducir la descripción de la imagen aquí

5
  • Hola, creo que para hacer lo que buscas necesitas ajax, ¿de donde obtienes el contenido para llenar el main? Commented el 2 oct. 2019 a las 19:31
  • Para cargar un bloque de pagina o recibir contenido JSON sin refrescar la pagina necesitas emplear Ajax Commented el 2 oct. 2019 a las 19:31
  • Hola @the-breaker, el contenido debería ser otra página .html, es decir, si el usuario le da click a "indicadores", en vez de actualizar y enviarme a indicadores.html, debería mostrar el contenido de dicho .html en la página, se que se necesita Ajax pero ni idea de que manera poder implementarlo Commented el 2 oct. 2019 a las 19:35
  • 2
    Tengo un ejemplo con el código para hacer una demostración pero tengo problemas con la pagina para que se muestre, si otro usuario no responde puedo intentarlo de nuevo mas tarde, de momento +1 Commented el 2 oct. 2019 a las 19:53
  • @Marcos gracias Commented el 2 oct. 2019 a las 20:16

3 respuestas 3

2

Puedes usar event.preventDefault() para evitar el comportamiento por defecto del navegador, que en el caso de <a> sería hacer una petición GET.

$("a").click(function(e) {
  e.preventDefault();//    <-- deshabilita el comportamiento por defecto
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    success: function(data) {
      $('#div_dinamico').html(JSON.stringify(data));
    }
  });
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<a href="">Click acá</a>
<div id="div_dinamico">

</div>

Podría también no tener href, pero en realidad como buena práctica todo <a> tendría que tener href y todo href debería ir al vínculo que dice que va, por una cuestión de claridad del código. Para realizar otro comportamiento esta el <button> por ejemplo. Pero es una cuestión discutible, de hecho bootstrap no lo cumple.

1

Coloca en el attr href="#", lo que pasa que como señala vacío el te hara redireccion a la pagina base.

<li class="nav-item">
  <a class="nav-link" href="#"><i class="fas fa-chart-bar"></i> Indicadores</a>
</li>
0

Puede ser por JQuery, usando el método load():

$("#div_dinamico").load("indicadores.html", function(data){
  // Contenido posterior a la carga
});

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.