Bootstrap 4 con Modal remoto

No puedo hacer que Modal funcione en el modo remoto con la nueva versión de Twitter Bootstrap: Bootstrap 4 alpha. Funciona perfectamente bien con Bootstrap 3. Con bootstrap 4 obtengo la ventana emergente, pero el cuerpo del modelo no se está cargando. No se realiza una llamada remota a myRemoteURL.do para cargar el cuerpo del modelo.

Código:

    

Encontrado el problema: han eliminado la opción remota en bootstrap 4

remoto : esta opción está en desuso desde v3.3.0 y se eliminará en v4. En su lugar, recomendamos utilizar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Usé JQuery para implementar esta característica eliminada.

 $('body').on('click', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-body').load($(this).data("remote")); }); 

De acuerdo con la documentación oficial, podemos hacer lo siguiente ( https://getbootstrap.com/docs/4.1/components/modal ):

 $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) }) 

Entonces creo que este es el mejor enfoque:

 $('#modal_frame').on('show.bs.modal', function (e) { $(this).find('.modal-content').load(e.relatedTarget.href); }); 

Adaptarse a sus necesidades

Como indican algunas de las otras respuestas y los documentos de Bootstrap , Bootstrap 4 requiere manejar el evento show.bs.modal para cargar contenido en el modal. Esto se puede usar para cargar contenido desde una cadena HTML o desde una URL remota. Aquí hay un ejemplo de trabajo

 $('#theModal').on('show.bs.modal', function (e) { var button = $(e.relatedTarget); var modal = $(this); // load content from HTML string //modal.find('.modal-body').html("Nice modal body baby..."); // or, load content from value of data-remote url modal.find('.modal-body').load(button.data("remote")); }); 

Demostración remota de URL de Bootstrap 4


Otra opción es abrir el modal una vez que se devuelven los datos de una llamada Ajax …

  $.ajax({ url: "http://someapiurl", dataType: 'json', success: function(res) { // get the ajax response data var data = res.body; // update modal content $('.modal-body').text(data.someval); // show modal $('#myModal').modal('show'); }, error:function(request, status, error) { console.log("ajax call went wrong:" + request.responseText); } }); 

Bootstrap 4 Load Modal de Ajax Demo

Si usa la versión delgada de Jquery (como en todos los documentos y ejemplos de Bootstrap 4), la función de carga fallará

Necesitas usar la versión completa de Jquery

En Asp.NET MVC, esto funciona para mí

html

 Edit item  

jquery

  

Acción

 public PartialViewResult ActionName(int id) { // var model = ... return PartialView("_Modal", model); }