Recarregue o conteúdo em modal (bootstrap do Twitter)

Estou usando o pop-up modal do bootstrap do Twitter.

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

Posso carregar conteúdo usando ajax com este elemento a:

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

Agora tenho que abrir o mesmo modal, mas usando uma url diferente. Estou usando este modal para editar uma entidade do meu banco de dados. Portanto, quando clico em editar em uma entidade, preciso carregar o modal com um 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>

Se eu clicar no link número 1, funciona bem. Mas se eu clicar no link número 2, o conteúdo modal já está carregado e, portanto, mostrará o conteúdo do link número 1.

Como posso atualizar ou redefinir o conteúdo carregado ajax em um pop-up modal bootstrap do Twitter?

Estou tendo o mesmo problema e acho que a maneira de fazer isso será remover o atributo data-toggle e ter um manipulador personalizado para os links.

Algo nas linhas 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"); 
    });
});

Vou tentar mais tarde e postar comentários.

Para descarregar os dados quando o modal é fechado, você pode usar isso com o Bootstrap 2.x:

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

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

Você pode forçar o Modal a atualizar o pop-up adicionando esta linha no final do método de ocultar do plug-in Modal (se você estiver usando bootstrap-transit.js v2.1.1, deve estar na linha 836)

this.$element.removeData()

Ou com um ouvinte de evento

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

Com o Bootstrap 3, você pode usar o manipulador de eventos 'hidden.bs.modal' para excluir qualquer dado relacionado ao modal, forçando o pop-up a recarregar na próxima vez:

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

Com base em outras respostas (obrigado a todos).

Eu precisei ajustar o código para funcionar, já que simplesmente chamar .html apagava todo o conteúdo e o modal não carregava com nenhum conteúdo depois que eu fizesse isso. Então, simplesmente procurei a área de conteúdo do modal e apliquei a redefinição do HTML lá.

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

Ainda posso ir com a resposta aceita, pois estou obtendo um salto feio pouco antes do modal carrega, pois o controle é com Bootstrap.

Um pouco mais comprimido do que o exemplo acima aceito. Pega o alvo do alvo de dados do objeto clicado atual com data-toggle = modal ativado. Isso faz com que você não precise saber qual é o id do modal de destino, apenas reutilize o mesmo! menos código = vitória! Você também pode modificar isso para carregar títulos, rótulos e botões para o seu modal, se desejar.

 $("[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"); 
    });
});

Links de exemplo:

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

Fiz uma pequena alteração na resposta do Softlion , então todos os meus modais não serão atualizados em hide. Os modais com atributo data-refresh = 'true' são apenas atualizados, outros funcionam normalmente. Aqui está a versão 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('');
    }
});

Agora use o atributo conforme mostrado abaixo,

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

Isso garantirá que apenas os modais com data-refresh = 'true' sejam atualizados. E também estou redefinindo o html modal porque os valores antigos são mostrados até que os novos sejam carregados, tornando esse html vazio.

Aqui está uma versão em coffeescript que funcionou para mim.

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

Funcionará para todas as versões do 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>

links para modal são

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

Eu também estava preso neste problema quando vi que os ids do modal são os mesmos. Você precisa de diferentes ids de modais se quiser vários modais. Eu usei id dinâmico . Aqui está meu código em haml:

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

você consegue fazer isso

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

e seus links para modal serão

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

Eu espero que isso funcione para você.

Você pode tentar isto:

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

Eu queria que o conteúdo carregado em AJAX fosse removido quando o modal fosse fechado, então ajustei a linha sugerida por outros (sintaxe coffeescript):

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

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

Funcionou para mim

etapa 1: crie um wrapper para o modal chamado clone-modal-wrapper .

etapa 2: crie um div em branco chamado modal-wrapper.

Etapa 3: copie o elemento modal de clone-modal-wrapperpara modal-wrapper.

etapa 4: Alterne o 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');
});