Estoy tratando de tener mi modal de bootstrap recuperar datos mediante ajax:

<a href="{{ path('ajax_get_messages', { 'superCategoryID': 35, 'sex': sex }) }}" data-toggle="modal" data-target="#birthday-modal">
  <img src="{{ asset('bundles/yopyourownpoet/images/messageCategories/BirthdaysAnniversaries.png') }}" alt="Birthdays" height="120" width="109"/>
</a>

Mi modal:

<div id="birthday-modal" class="modal hide fade">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Birthdays and Anniversaries</h3>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
    {#<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>#}
</div>
</div>

Cuando hago clic en el enlace, el modal se muestra pero el cuerpo está vacío. Además, no veo ninguna petición ajax se hizo.
Estoy usando Bootstrap 2.1.1

¿Qué estoy haciendo mal?

InformationsquelleAutor fkoessler | 2013-02-20

3 Comentarios

  1. 40

    La parte superior votado respuesta es en desuso en Bootstrap 3.3 y será eliminado en la v4. Pruebe esto en su lugar:

    JavaScript:

    //Fill modal with content from link href
    $("#myModal").on("show.bs.modal", function(e) {
        var link = $(e.relatedTarget);
        $(this).find(".modal-body").load(link.attr("href"));
    });

    Html (Basado en el oficial de ejemplo. Tenga en cuenta que para el Bootstrap 3.* hemos establecido data-remote="false" para deshabilitar el desuso de Bootstrap en función de la carga):

    <!-- Link trigger modal -->
    <a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
        Launch Modal
    </a>
    
    <!-- Default bootstrap modal example -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    Pruébelo usted mismo: https://jsfiddle.net/ednon5d1/

    • No es el aceptado respuesta 😉
    • Tengo una página que lista de cientos de expedientes de la orden que todos necesitamos para cargar contenido en un Modal utilizando AJAX. Este método de carga de mi primer disco clic en pero después de que sólo sigue mostrando modal con los anteriores datos cargados en lugar de hacer nueva petición AJAX para actualizar con nuevas clic en grabar. Cualquier ide?
    • Es el modal aún abierta cuando usted haga clic en uno de los otros enlaces? Este controlador de javascript desencadena la solicitud cuando el modal se muestra. En su caso, usted podría tener que volver a escribir y el uso de un controlador de clic, por ejemplo.
    • Esto desencadena 2x llamadas ajax en Bootstrap v3. Uno de los originales AJAX Modal de la carga y para su show.bs.modal evento (que es despedido después el original llamada ajax).
    • Gracias por darse cuenta de esto. El oficial docs no estaba muy claro aquí – ahora me específicamente deshabilitado la carga original a través de datos remota=»false» y agrega un JSfiddle. En Bootstrap 4 esto ya no debería ser necesario.
    • He encontrado que he tenido que añadir $(document).on("click", '[data-toggle="modal"]', function (e) { e.preventDefault(); }); para evitar que el navegador envío de la solicitud en el href así como la llamada ajax
    • en qué navegador y qué bootstrap versión fue esto? No puedo reproducir el problema en el violín (jsfiddle.net/ednon5d1)
    • Me pregunto por qué es obsoleto – es una característica fresca.
    • buenísimo!!! funciona con mi contenido ajax ahora. Muchas gracias!!!

  2. 27

    Fácil de hacer en Bootstrap 3, así:

    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    • También disponible en 2.3.2 con la misma sintaxis.
    • ¿Podría dar un ejemplo de la respuesta esperada cuando se llama a «remote.html»?
    • asegúrese de que hay un div con el id especificado en data-target. El contenido de remote.html debe cargar en este div como en el bootstrap ejemplo.
    • es realmente disponible en 2.3.2? No puedo parecer para que funcione utilizando la sintaxis anterior. Todo lo demás funciona a la perfección con la 2.3.2 verbos modales. Sin embargo, tenía que utilizar el siguiente código publicado por Marronsuisse con el fin de conseguir que funcione.
    • El truco (según google docs) es tener .modal-div de contenido dentro de su objetivo de div. El contenido de remote.html se carga en .modal-div de contenido.
    • Esta opción está en desuso desde v3.3.0 y será eliminado en v4. Alternativas de respuesta: stackoverflow.com/a/27718716/729324
    • si el uso de botón de ancla, el uso de datos remota=»remote-page.html» además, si utiliza este enlace en tabla para editar filas, agregar este consejos para tu javascript stackoverflow.com/questions/12286332/…

  3. 21

    Aquí es cómo he resuelto el problema, podría ser útil para algunos:

    Ajax modal no parece estar disponible con boostrap 2.1.1

    Así que terminó de codificación a mí mismo:

    $('[data-toggle="modal"]').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
      //var modal_id = $(this).attr('data-target');
      $.get(url, function(data) {
          $(data).modal();
      });
    });

    Ejemplo de un enlace que se llama a una modal:

    <a href="{{ path('ajax_get_messages', { 'superCategoryID': 6, 'sex': sex }) }}" data-toggle="modal">
        <img src="{{ asset('bundles/yopyourownpoet/images/messageCategories/BirthdaysAnniversaries.png') }}" alt="Birthdays" height="120" width="109"/>
    </a>

    Ahora os envío toda modal de marcado a través de ajax.

    Créditos a drewjoh

    • Esto creará un nuevo modal en el DOM cada vez. Prefiero tener el modal contenedor en la página y reemplazar el contenido de la misma mediante JS. por ejemplo. $(«#modalContainer»).html(data); $(«#modalContainer»).modal();
    • Tuve que agregar a la página y, a continuación, llamar a la id que viene de nuevo en un modal. Haciendo $(data).modal() el modal funcionó, pero fue super lag.

Dejar respuesta

Please enter your comment!
Please enter your name here