1

Tengo un pequeño problema a la hora de recargar un div con Jquery.

Tengo un <div> llamado notificaciones y dentro de ese <div> tengo una etiqueta <a> que cuando hago click en ella me debe mostrar el modal y además recargar el div notificaciones

Mi idea es actualizarlo con JavaScript a la vez que me muestre el modal, pero cuando hago click, el modal se muestra pero no actualiza el div notificaciones

Aquí mi código

JavaScript

function recargarDiv() {
        $("#notificaciones").load(" #notificaciones");
     }

HTML

<div id="notificaciones">
  <a href="#" data-toggle="modal" data-target="#Modal" onclick="recargarDiv()">Mostrar modal</a>
</div>

<!-- Modal -->

    <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="width=50%;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!--<div class="modal-header">
                        <button class="btn btn-danger cerrar" type="button" data-dismiss="modal" aria-label="Close">Cancel</button>
                        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>-->
                    <div class="modal-body">
                        <h1>Prueba</h1>
                    </div>
                </div>
            </div>
        </div>

Mi problema es que cuando pulso el enlace, el div se recargar pero el modal no lo muestra, solo muestra la pantalla con tonos oscuros que es la que se muestra cuando abres un modal pero en mi caso el modal no se muestra. ¿Alguna ayuda?

Gracias!

5
  • 1
    Pregunta meramente curiosa, que tiene de malo fetch? y que tiene de bueno JQuery? jeje Commented el 25 jun. 2021 a las 12:42
  • El parámetro de .load() es incorrecto, debería ser una URL y tú le estás pasando el mismo ID del contenedor que quieres actualizar. ¿Qué es lo que debería aparecer en el div #notificaciones?
    – Triby
    Commented el 25 jun. 2021 a las 15:08
  • @DєηyηCrawford, creo que la respuesta para ambas es la misma: Nada. Aunque jQuery "facilita" el código para esa petición y la ventana modal. Se pueden lograr sin tener que depender de una librería, pero eso ya es otro tema.
    – Triby
    Commented el 25 jun. 2021 a las 15:15
  • Y bueno la pregunta era retorica pero gracias. Igualmente esto es un problema que con reactividad ni te lo tienes que pensar, por ejemplo con vue ni tienes que preocuparte por estas cosas. Eso si quieres usar un framework o librería, pero si no, creo que un simple fetch es hasta mas entendible a diferencia de como funciona load o url internamente. La pregunta es retorica porque usar jquery hoy dia deberia ser algo prohibido, frena mas de lo que ayuda. Si es por el query syntax puedes hacer tu propio jquery en dos lineas jeje, un saludo. Commented el 25 jun. 2021 a las 15:28
  • @DєηyηCrawford, lo entiendo, mi comentario "esconde" el argumento de que una búsqueda de tutoriales para peticiones AJAX o ventanas modales incluye muchos ejemplos con jQuery; lamentablemente, es lo que hay.
    – Triby
    Commented el 25 jun. 2021 a las 17:02

1 respuesta 1

0

revise tu código y funciona a la perfección, talvez tiene un error de cache, te recomendaría borrar y cache y volver a probar. recuerda que estas utilizando bootstrap debes de incluir las librerías de JS.

<div class="container my-5">

    <div id="notificaciones">
        <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#Modal" onclick="recargarDiv()">Mostrar
            modal</a>
    </div>

    <!-- Modal -->

    <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true" style="width:50%;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <!--<div class="modal-header">
                              <button class="btn btn-danger cerrar" type="button" data-dismiss="modal" aria-label="Close">Cancel</button>
                              <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">×</span>
                              </button>
                          </div>-->
                <div class="modal-body">
                    <h1>Prueba</h1>
                </div>
            </div>
        </div>
    </div>
</div>





<script>
    function recargarDiv() {
        $("#notificaciones").load(" #notificaciones");
    }
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>

introducir la descripción de la imagen aquí

1
  • Para que tu respuesta sea bien recibida es recomendable que pongas el código como texto y no como imagen. Te recomiendo leer ¿Cómo elaboro una buena respuesta?
    – Triby
    Commented el 25 jun. 2021 a las 15:16

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.