Estou usando a inicialização do Twitter, especifiquei um modal
<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.com/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>
E os links
<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
Quando clico em um desses links pela primeira vez, vejo o conteúdo correto, mas quando clico em outros links, ele mostra o mesmo conteúdo carregado pela primeira vez e não atualiza o conteúdo.
Quero que ele seja atualizado sempre que clicar.
PS: Eu posso fazê-lo funcionar facilmente através da função jQuery personalizada, mas quero saber se é possível com a função remota modal Bootstrap nativa, pois deve ser fácil o suficiente e acho que estou apenas complicando as coisas.
jquery
jquery-plugins
twitter-bootstrap
modal-dialog
Dhruv Kumar Jha
fonte
fonte
remote
Modals foram descontinuados a partir do Bootstrap v3.2.1 e desapareceram na v4.Respostas:
O problema é duplo.
Primeiro , uma vez que um objeto Modal é instanciado, ele é persistentemente anexado ao elemento especificado por
data-target
e chamadas subseqüentes para mostrar que o modal apenas o chamarátoggle()
, mas não atualizará os valores nooptions
. Portanto, mesmo que oshref
atributos sejam diferentes nos seus links diferentes, quando o modal é alternado, o valor pararemote
não está sendo atualizado. Para a maioria das opções, é possível contornar isso editando diretamente o objeto. Por exemplo:No entanto, isso não funcionará neste caso, porque ...
Segundo , o plug-in Modal foi projetado para carregar o recurso remoto no construtor do objeto Modal, o que infelizmente significa que, mesmo que seja feita uma alteração no
options.remote
, ele nunca será recarregado .Um remédio simples é destruir o objeto Modal antes de alternar subseqüentemente. Uma opção é destruí-lo depois que ele se esconder:
Nota: Ajuste os seletores conforme necessário. Este é o mais geral.
Plunker
Ou você pode tentar criar um esquema mais complicado para fazer algo como verificar se o link que inicia o modal é diferente do anterior. Se for, destrua; se não for, não será necessário recarregar.
fonte
hide
classe no modal, portanto, se sua janela era muito pequena, o modal pode estar bloqueando os eventos do mouse nos botões. Por alguma razão, o JSFiddle.net está muito ruim esta manhã (tenho um 504 tentando atualizar), então eu apenas refiz o exemplo no plnkr.co, que é melhor para o AJAX de qualquer maneira.bs.modal
em$(this).removeData('bs.modal')
funcionou para mim com o Bootstrap 3$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...
Para o bootstrap 3, você deve usar:
fonte
remoteData
linha:$(this).empty()
$(this).empty()
. Aremote
opção carrega os dados remotos no<div class="modal-content">
elemento aninhado . Use em$('.modal-content', this).empty();
vez disso.No Bootstrap 3.1, você deseja remover os dados e esvaziar a
modal-content
caixa de diálogo (e não toda) (3.0) para evitar oscilações enquanto aguarda o carregamento do conteúdo remoto.Se você estiver usando modais não remotos, o código acima removerá o conteúdo assim que estiver fechado (incorreto). Pode ser necessário adicionar algo a esses modais (como uma
.local-modal
classe) para que eles não sejam afetados. Modifique o código acima para:fonte
$(e.target).removeData("bs.modal").find(".modal-content").empty();
, é como se meu modal estivesse oculto e apenas a sobreposição cinza fosse exibida.Graças merv. Comecei a mexer no boostrap.js, mas sua resposta é uma solução rápida e limpa. Aqui está o que eu acabei usando no meu código.
fonte
A resposta aceita não funcionou para mim, então fui com o JavaScript para fazer isso.
fonte
Isso funciona com o Bootstrap 3 FYI
fonte
Meu projeto é construído no Yii e usa o plug-in Bootstrap-Yii, portanto, essa resposta é relevante apenas se você estiver usando o Yii.
A correção acima funcionou, mas somente após a primeira vez que o modal foi mostrado. A primeira vez que apareceu vazia. Eu acho que é porque, após a iniciação do código, o Yii chama a função hide do modal, limpando assim minhas variáveis de iniciação.
Descobri que colocar a chamada removeData imediatamente antes do código que iniciou o modal fez o truque. Então meu código está estruturado assim ...
fonte
No Bootstrap 3.2.0, o evento "on" deve estar no documento e você deve esvaziar o modal:
No Bootstrap 3.1.0, o evento "on" pode estar no corpo:
fonte
Por que não torná-lo mais geral com o BS 3? Basta usar "[something] modal" como o ID do DIV modal.
fonte
A única opção de trabalho para mim é:
Eu uso o Bootstrap 3 e tenho uma função chamada
popup('popup content')
que acrescenta o html da caixa modal.fonte
Adicionando um $ (this) .html (''); para limpar os dados visíveis também, e funciona muito bem
fonte
Se uma URL remota for fornecida, o conteúdo será carregado uma vez pelo método de carregamento do jQuery e injetado na div .modal-content. Se você estiver usando a API de dados, como alternativa, use o atributo href para especificar a fonte remota. Um exemplo disso é mostrado abaixo
fonte
Eu adicionei algo assim, porque o conteúdo mais antigo é mostrado até o novo, com .html ('') dentro do .modal-content limpará o HTML por dentro, espero que ajude
fonte
Eu escrevi um trecho simples lidando com a atualização do modal. Basicamente, ele armazena o link clicado nos dados do modal e verifica se é o mesmo link clicado, removendo ou não os dados modais.
fonte
Para o Bootstrap 3, no modal.js, mudei:
para
(espaçamento extra adicionado para maior clareza)
Isso evita qualquer flash indesejado do conteúdo modal antigo, chamando empty () no contêiner modal, além de remover os dados.
fonte
Este funciona para mim.
fonte
Essa outra abordagem funciona bem para mim:
fonte
Qual elemento html você deseja esvaziar como (div, abranja qualquer coisa).
fonte
Este funciona para mim:
modal
roteiro
área de links é a área onde eu coloco os dados e preciso limpar
fonte
Versão expandida da resposta aceita por @merv. Ele também verifica se o modal oculto está carregado da fonte remota e limpa o conteúdo antigo para impedir que ele pisque.
https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5
fonte
Testado no Bootstrap versão 3.3.2
fonte
.removeData()
sem parâmetros informará o jquery para remover todos os dados anexados a esse elemento. No que diz respeito ao problema do OP,.removeData('bs.modal')
ou.removeData('modal')
seria suficiente e é muito seguro.Boa sorte com este:
fonte