Recargar contenido en modal (twitter bootstrap)

Estoy usando la ventana emergente modal de twitter bootstrap.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

Puedo cargar contenido usando ajax con este elemento a:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

Ahora tengo que abrir el mismo modal pero usando una URL diferente. Estoy usando este modal para editar una entidad de mi base de datos. Entonces, cuando hago clic en editar en una entidad, necesito cargar el modal con una ID.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

Si hago clic en el enlace número 1, funciona bien. Pero si hago clic en el enlace número 2, el contenido modal ya está cargado y, por lo tanto, mostrará el contenido del enlace número 1.

¿Cómo puedo actualizar o restablecer el contenido cargado ajax en una ventana emergente modal de arranque de Twitter?

Estoy teniendo el mismo problema, y ​​supongo que la forma de hacerlo será eliminar el atributo de alternancia de datos y tener un controlador personalizado para los enlaces.

Algo en las líneas de:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Lo intentaré más tarde y publicaré comentarios.

Para descargar los datos cuando el modal está cerrado, puede usar esto con Bootstrap 2.x:

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

Y en Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Puede forzar a Modal a actualizar la ventana emergente agregando esta línea al final del método hide del complemento Modal (si está usando bootstrap-transition.js v2.1.1, debería estar en la línea 836)

this.$element.removeData()

O con un oyente de eventos

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

Con Bootstrap 3 puede usar el controlador de eventos 'hidden.bs.modal' para eliminar cualquier dato relacionado con el modo, lo que obliga a que la ventana emergente se vuelva a cargar la próxima vez:

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});

Basado en otras respuestas (gracias a todos).

Necesitaba ajustar el código para que funcionara, ya que simplemente llamar a .html borraba todo el contenido y el modal no se cargaba con ningún contenido después de hacerlo. Así que simplemente busqué el área de contenido del modal y apliqué el restablecimiento del HTML allí.

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });

Todavía puede ir con la respuesta aceptada, ya que estoy obteniendo un salto feo justo antes de las cargas modales, ya que el control es con Bootstrap.

Un poco más comprimido que el ejemplo aceptado anteriormente. Agarra el objetivo del objetivo de datos del actual clic en cualquier cosa con data-toggle = modal activado. Esto hace que no tenga que saber cuál es la identificación del modal de destino, ¡simplemente reutilice el mismo! menos código = ganar! También puede modificar esto para cargar títulos, etiquetas y botones para su modal si lo desea.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

Enlaces de ejemplo:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Hice un pequeño cambio en la respuesta de Softlion , por lo que todos mis modales no se actualizarán en hide. Los modales con el atributo data-refresh = 'true' solo se actualizan, otros funcionan como de costumbre. Aquí está la versión modificada.

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

Ahora use el atributo como se muestra a continuación,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

Esto asegurará que solo se actualicen los modales con data-refresh = 'true'. Y también estoy restableciendo el html modal porque los valores antiguos se muestran hasta que se cargan los nuevos, lo que hace que el html vacío corrija ese.

Aquí hay una versión de coffeescript que me funcionó.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Funcionará para todas las versiones de twitterbootstrap

Código Javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

enlaces a modal son

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

emergente modal

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

También me quedé atrapado en este problema, luego vi que los identificadores del modal son los mismos. Necesita diferentes identificadores de modales si desea múltiples modales. Usé identificación dinámica . Aquí está mi código en haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

Puedes hacerlo

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

y tus enlaces a modal serán

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

Espero que esto funcione para tí.

Puedes probar esto:

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});

Quería eliminar el contenido cargado de AJAX cuando se cerró el modal, así que ajusté la línea sugerida por otros (sintaxis de coffeescript):

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ tabla = $ ('# myTable2');
$ table.bootstrapTable ('destruir');

Trabajó para mi

paso 1: crea un contenedor para el modal llamado clone-modal-wrapper.

paso 2: crea un div en blanco llamado modal-wrapper.

Paso 3: Copie el elemento modal de clone-modal-wrappera modal-wrapper.

paso 4: Alternar el modal de modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});