Bootstrap 3 – ¿Cómo cargar contenido en un cuerpo modal a través de AJAX?

Como puede ver aquí , tengo un botón que inicia un modal. Configurando una URL href para el botón, Bootstrap 3 carga automáticamente esta URL en modal. El hecho es que esta página se carga en la raíz modal (como se dice en la documentación de bootstrap 3 para el uso de modales ). Quiero cargarlo en el cuerpo modal en su lugar.

¿Hay alguna forma de hacerlo a través de atributos (no javascript)? ¿O cuál es la forma más automática de hacerlo?

PD. Recuerdo que en Bootstrap 2 el contenido se cargaba en el cuerpo, no en la raíz.

Verifique esta respuesta SO .

Parece que la única forma es proporcionar toda la estructura modal con su respuesta ajax.

Como puede comprobar desde el código fuente de arranque, la función de carga está vinculada al elemento raíz.

En caso de que no pueda modificar la respuesta de ajax, una solución simple podría ser una llamada explícita del complemento $(..).modal(..) en su elemento de cuerpo, aunque probablemente romperá las funciones de mostrar / ocultar de el elemento raíz

Esto es realmente súper simple con solo un poco de javascript añadido. El href del enlace se usa como fuente de contenido ajax. Tenga en cuenta que para Bootstrap 3. * establecemos data-remote="false" para deshabilitar la función de carga Bootstrap obsoleta .

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 ejemplo oficial ):

   Launch Modal    

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

Supongo que estás buscando esta función personalizada. Toma un atributo de alternancia de datos y crea dinámicamente el div necesario para ubicar el contenido remoto. Simplemente coloque el data-toggle = “ajaxModal” en cualquier enlace que quiera cargar a través de AJAX.

La parte JS:

 $('[data-toggle="ajaxModal"]').on('click', function(e) { $('#ajaxModal').remove(); e.preventDefault(); var $this = $(this) , $remote = $this.data('remote') || $this.attr('href') , $modal = $(''); $('body').append($modal); $modal.modal({backdrop: 'static', keyboard: false}); $modal.load($remote); } ); 

Finalmente, en el contenido remoto, debe poner en funcionamiento toda la estructura.

  

¡Una forma simple de usar modales es con eModal !

Ex de github :

  1. Enlace a eModal.js
  2. use eModal para mostrar un modal para alerta, ajax, solicitud o confirmación

     // Display an alert modal with default title (Attention) eModal.ajax('your/url.html'); 
 $(document).ready(function () {/* activate scroll spy menu */ var iconPrefix = '.glyphicon-'; $(iconPrefix + 'cloud').click(ajaxDemo); $(iconPrefix + 'comment').click(alertDemo); $(iconPrefix + 'ok').click(confirmDemo); $(iconPrefix + 'pencil').click(promptDemo); $(iconPrefix + 'screenshot').click(iframeDemo); ///////////////////* Implementation */////////////////// // Demos function ajaxDemo() { var title = 'Ajax modal'; var params = { buttons: [ { text: 'Close', close: true, style: 'danger' }, { text: 'New content', close: false, style: 'success', click: ajaxDemo } ], size: eModal.size.lg, title: title, url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete' }; return eModal .ajax(params) .then(function () { alert('Ajax Request complete!!!!', title) }); } function alertDemo() { var title = 'Alert modal'; return eModal .alert('You welcome! Want clean code ?', title) .then(function () { alert('Alert modal is visible.', title); }); } function confirmDemo() { var title = 'Confirm modal callback feedback'; return eModal .confirm('It is simple enough?', 'Confirm modal') .then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); }) .fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) }); } function iframeDemo() { var title = 'Insiders'; return eModal .iframe('https://www.youtube.com/embed/VTkvN51OPfI', title) .then(function () { alert('iFrame loaded!!!!', title) }); } function promptDemo() { var title = 'Prompt modal callback feedback'; return eModal .prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title }) .then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) }) .fail(function (/**/) { alert('Why don\'t you tell me your name?', title); }); } //#endregion }); 
 .fa{ cursor:pointer; } 
      

Ajax

You must get the message from a remote server? No problem!

Alert

Traditional alert box. Using only text or a lot of magic!?

Confirm

Get an okay from user, has never been so simple and clean!

Prompt

Do you have a question for the user? We take care of it...

iFrame

IFrames are hard to deal with it? We don't think so!

En el caso donde necesite actualizar el mismo modal con contenido de diferentes llamadas Ajax / API, aquí hay una solución de trabajo.

 $('.btn-action').click(function(){ var url = $(this).data("url"); $.ajax({ url: url, dataType: 'json', success: function(res) { // get the ajax response data var data = res.body; // update modal content here // you may want to format data or // update other modal elements here too $('.modal-body').text(data); // show modal $('#myModal').modal('show'); }, error:function(request, status, error) { console.log("ajax call went wrong:" + request.responseText); } }); }); 

Demostración de Bootstrap 3
Demostración de Bootstrap 4

crea un cuadro modal vacío en la página actual y debajo está la llamada ajax. Puedes ver cómo obtener el contenido en el resultado de otra página html.

  $.ajax({url: "registration.html", success: function(result){ //alert("success"+result); $("#contentBody").html(result); $("#myModal").modal('show'); }}); 

Una vez que finalice la llamada, obtendrá el contenido de la página por el resultado para poder insertar el código en su ID de contenido modal.

Puede llamar al controlador y obtener el contenido de la página y puede mostrarlo en su modal.

A continuación se muestra el ejemplo de modal de Bootstrap 3 en el que estamos cargando contenido de la página registration.html …

 index.html ------------------------------------------------ < !DOCTYPE html>                 registration.html -------------------- < !DOCTYPE html>    

CSS Newsletter

Subscribe to our Newsletter

Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.