javascript - not - tooltip bootstrap 4

Recargar contenido en modal(twitter bootstrap)

Question

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 desde 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 de Ajax en una ventana emergente modal de arranque de Twitter?

Answer 1

Aquí hay una versión coffeescript que funcionó para mí.

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

Answer 2

Basado en otras respuestas (gracias a todos).

Necesitaba ajustar el código para que funcionara, ya que simplemente al llamar .html se eliminó todo el contenido y el modal no se cargaría con ningún contenido después de que lo hice. 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 recibiendo un salto feo justo antes de las cargas modales, ya que el control es con Bootstrap.

Answer 3

Con Bootstrap 3 puede usar el controlador de eventos ''hidden.bs.modal'' para eliminar cualquier información relacionada con los modos, forzando que la ventana emergente se vuelva a cargar la próxima vez:

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

Answer 4

Estoy teniendo el mismo problema, y ​​creo que la forma de hacerlo será eliminar el atributo de alternar 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.

Answer 5

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>

pop-up 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>

Answer 6

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 siempre. 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 usa 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 reiniciando el html modal porque los valores anteriores se muestran hasta que se cargan los nuevos, por lo que html empty lo soluciona.

Answer 7

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'');
});

Answer 8

Puede obligar a Modal a actualizar la ventana emergente agregando esta línea al final del método hide del complemento Modal (si está utilizando 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();
})

Answer 9

Puedes intentar esto:

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

Answer 10

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

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

Answer 11

Un poco más comprimido que el ejemplo aceptado anteriormente. Toma el objetivo del objetivo de datos del elemento actual al que se ha hecho clic con data-toggle = modal on. Esto lo hace para que no tenga que saber cuál es la identificación del modal de destino, ¡solo reutilice la misma! menos código = ¡gana! También puede modificar esto para cargar el título, las etiquetas y los 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>

Answer 12

Yo también estaba atascado en este problema, entonces vi que los identificadores del modal son los mismos. Necesitas diferentes identificadores de modales si quieres múltiples modales. Utilicé la 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 sus 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í.