Estoy usando twitter bootstrap del modal popup.

<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 mediante ajax con este elemento:

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

Ahora tengo que abrir el mismo modal, pero utilizando una dirección url diferente. Estoy usando este modal para editar una entidad de mi base de datos. Así que cuando hago clic en editar en una entidad que necesita para cargar el modal con un 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 yo, a continuación, haga clic en el enlace número 2 el contenido modal ya está cargado y para ello se mostrará el contenido de enlace con el número 1.

¿Cómo puedo actualizar o restablecer el ajax el contenido cargado en un twitter bootstrap modal popup?

InformationsquelleAutor stian.net | 2012-09-16

13 Comentarios

  1. 97

    Estoy teniendo el mismo problema, y creo que la forma de hacerlo será a eliminar el data-toggle atributo 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 intente más tarde y publicar comentarios.

    • Sí, de esta manera se trabaja para mí.
    • $(‘.modal’).en(‘hidden’, function() { $(this).removeData(); }) este es mi modificación de abajo de la solución… limpiador, porque usted no tiene que coger el clic y cargar su auto de manera programática del modelo muestran que todavía funciona
    • De esta manera funciona muy bien para mí, estoy usando bootstrap 3.
    • Estoy usando Bootstrap 3, el contenido en el modal no se actualiza cada vez que crea dos ventanas modal. ¿Alguien más se esto?
    • Hola Sid, su creación de 2 div con la clase «modal-cuerpo», en realidad estás creando ya, y el modal es crear de nuevo. A partir de ese código, quitar el».modal-cuerpo » y debería funcionar bien.
    • A mi me funciona w/ Bootstrap 3, muy frustrante que esto no es apoyado por el núcleo de bootstrap de la biblioteca por defecto.
    • También estoy usando algo como esto y ev.preventDefault(); como también, pero todavía en el clic de enlace, cuando me sale la ventana modal, todo mi página de lista desplegable están consiguiendo restablecer. Cualquier idea, cómo evitar eso?
    • esto es lo que necesito… Gracias

  2. 70

    A descargar los datos cuando el modal está cerrado, usted 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');
    });
    • perfecto. trabajado sin ningún problema. en bootstrap 3. He usado $(‘.modal’).en(‘ocultos.bs.modal’, function() { $(this).removeData(‘bs.modal’); });
    • No es perfecto: se muestra brevemente el contenido antiguo antes de que el nuevo contenido.
    • puedes borrar el contenido anterior añadiendo .html(«). Así, por 2.x: $(this).removeData(‘modal’).find(‘.modal-cuerpo’).html(«). Para las 3: $(this).removeData(‘bs.modal’).html(«) 2.x carga contenido en el .modal-cuerpo, mientras que los otros 3 se carga el contenido directamente en el .modal contenedor
    • pequeña corrección en el último comentario, en bootstrap v3 deberá ser de: $(e.de destino).removeData(‘bs.modal’).html(«); Esta es la solución más elegante hasta el momento (pero se demora un poco).
    • Upvote para la utilización integrada en BS funcionalidad.
    • He utilizado la edición de la versión que @Softlion publicado en esta propuesta de solución funcionó y no tuvimos ninguna velocidad/problemas de demora.

  3. 21

    Puede forzar Modal para actualizar la ventana emergente por añadir esta línea al final del método de ocultar de la Modal plugin (Si usted está utilizando bootstrap-transition.js v2.1.1, debe estar en la línea de 836)

    this.$element.removeData()

    O con un detector de eventos

    $('#modal').on('hidden', function() {
        $(this).data('modal').$element.removeData();
    })
    • -1 La idea de poner ese primer fragmento en el Modal plugin directamente es una idea terrible. Si se va a trabajar en el plugin (que yo no), el más razonable de lo que se hace es para mover el load() llamar al constructor y en el show(), o agregar un método para el plugin para activar manualmente una recarga de remote. En la segunda sugerencia, yo sólo a condición de que como una respuesta para una pregunta que le pide explícitamente que no lo haga el camino @markz sugirió.
    • Me gusta la escucha de enfoque. Creo que incluso puede ser mejorado usando».modal’ en lugar de ‘#modal’ para evitar escribir el id. En mi opinión es un limpiador enfoque de markz, porque usted continúa utilizando el data-toggle como en el original modal de bootstrap.
    • Yo no aconsejaría monkeypatching un marco.
    • Me pregunto por qué esta respuesta no tiene mucho upvotes. Esta respuesta parece ser que la primera, lo que sugiere un detector de eventos que es bastante interesante y rápido de implementar.
  4. 15

    Con Bootstrap 3 puede usar ‘ocultos.bs.modal’ controlador de eventos para eliminar cualquier modal relacionados con los datos, forzando la ventana emergente para recargar la próxima vez:

    $('#modal').on('hidden.bs.modal', function() {
        $(this).removeData('bs.modal');
    });
    • Sí, pero todavía hay una crucial a la zaga en esta solución; que aún muestra el contenido anterior de un segundo o tres antes de que el nuevo.
    • en lugar de #modal intentar cuerpo
  5. 8

    Basado en otras respuestas (gracias a todos).

    Necesitaba para ajustar el código de trabajo, como una simple llamada .html borrado todo el contenido y los modales no se carga con el contenido después de que lo hice. Así que simplemente buscamos para el área de contenido de la modal y aplicar el reajuste de los HTML.

        $(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 aceptada respuesta ya que estoy haciendo unas feas saltar justo antes de la carga modal como el control es con Bootstrap.

  6. 5

    Un poco más comprimido que el anterior aceptado ejemplo. Agarra el destino de los datos-objetivos de la actual pulsado nada con data-toggle=modal en. Esto lo hace para que usted no tiene que saber cuál es el id de destino modal es, sólo la reutilización de la misma! menos código = win! Usted puede también modificar esto para cargar título, etiquetas y botones para su modal si quieres.

     $("[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>
  7. 3

    He hecho un pequeño cambio a Softlion contestar, así que todos mis modales no actualizar en ocultar.
    Los verbos modales con la actualización de datos=’true’ atributo sólo se actualiza, otros a trabajar 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 utilizar 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 se asegurará de que sólo los verbos modales con la actualización de datos=’true’ se actualiza. Y también estoy de restablecer el modal de html porque el viejo se muestran los valores hasta que se carga, haciendo html vacío correcciones que uno.

    • Las grandes obras….
  8. 1

    Se trabaja 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>

  9. 1

    Aquí es un coffeescript versión que trabajó para mí.

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

    Yo también estaba atascado en este problema, entonces vi que el id de los modales son el mismo. Necesita diferentes id de modales si desea que varios verbos modales. He utilizado dinámica id. Aquí está mi código en haml:

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

    usted puede hacer esto

    <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á

    <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 funcionará para usted.

  11. 1

    Que usted puede probar esto:

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

    Yo quería que el AJAX el contenido cargado se retira cuando el modal cerrada, por lo que ajustar la línea de lo sugerido por otros (coffeescript sintaxis):

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

Dejar respuesta

Please enter your comment!
Please enter your name here