2

Estou tentando carregar o conteúdo de um modal de uma página remota.

Este é o código que estou usando para fazer os testes.

$('[data-load-remote]').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var remote = $this.data('load-remote');
        if (remote) {
            $($this.data('remote-target')).load(remote);
        }
    });
.modal-edit-buttom {
        float: right;
        font-size: 18px;
        margin-right: 5px;
        padding: 0;
        cursor: pointer;
        background: 0 0;
        border: 0;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .2;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/3/show/" data-remote-target="#myModal" data-target="#myModal">Remote modal button</button>
    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h3 id="myModalLabel">...</h3>
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>

E o modal que é carregado é este

<div class="modal-dialog" role="document">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <button type="button" class="modal-edit-buttom"> <span data-load-remote="http://fiddle.jshell.net/vafleite/62m9h069/1/show/" data-remote-target="#myModal" data-target="#myModal" class="glyphicon glyphicon-edit" aria-hidden="true">Edit</span>
        </button>
         <h4 class="modal-title" id="myModalLabel">Header test</h4>
    </div>
    <div class="modal-body">Body test</div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>

Consigo carregar o modal remoto usando o método load do jQuery, o conteúdo que estou carregando é um modal completo (já vi alguns exemplos carregando apenas o modal-body, mas também não consegui fazer funcionar com eles), no header coloquei um botão (Edit) que deveria (re)carregar o mesmo modal mas com outro conteúdo, porém ao que parece a função do jQuery nem é chamada quando clico esse botão.

Não sei se consegui explicar bem, mas pelo código acredito que dá pra entender melhor a ideia...

2 Respostas 2

4

Eu uso aqui e funciona normalmente. Segue o meu código:

Chamada do modal:

<a href="modal.html" class="btn btn-info btn-xs" data-toggle="modal" data-target="#meuModal"><i class="fa fa-search"></i> Visualizar</a>

Estrutura do modal:

<!-- Modal -->
    <div class="modal fade" id="meuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
        </div>
      </div>
    </div>

modal.html:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title"><strong>Meu título</strong></h4>
</div>
<div class="modal-body">Lorem ipsum</div>

Remover o cache para não abrir o mesmo conteúdo a cada clique:

<script>
   $('#meuModal').on('shown.bs.modal', function () {
     $(this).removeData('bs.modal');
   });
</script>
4
  • Então @buback, o modal remoto carrega normalmente... o problema é que de dentro do modal que faço o load eu tento carregar outro modal na mesma estrutura do atual. Repare no código que coloquei lá no jsfiddle que do lado do botão de fechar o modal tem um 'Edit'. 16/09/2015 às 19:24
  • Imagina o seguinte, o que eu carrego nesse modal é um cadastro de usuário, aí gostaria de ter um botão dentro desse modal que recarregasse esse mesmo modal mas com form pra editar os dados do usuário 16/09/2015 às 19:29
  • @VictorLeite, entendi. Eu não tinha visto o edit por causa da cor. Vou testar aqui.
    – buback
    16/09/2015 às 20:07
  • verdade tá bem ruim de ver... tirei a maior parte dos estilos pra focar mais no código, mas acho que acabou piorando um pouco hehe 16/09/2015 às 20:30
0

Estudando a documentação do jQuery encontrei o que estava fazendo de errado.

Do jeito que eu estava chamando o método on do jQuery ele só fazia o bind de eventos nos elementos que já tinham sido carregados no momento da execução do script. Ou seja, quando eu clicava no primeiro botão era gerado um evento e modal era carregado com a página remota, mas como essa página era carregada dinamicamente nenhum evento que ocorria nela era capturado.

A solução é usar o que é chamado de delegate pelo jQuery, que é feito passando-se um parâmetro a mais para o método on, que um seletor, e assim ele passa a capturar eventos de conteúdo carregado dinamicamente.

$('#load-wrapper').on('click', '[data-load-remote]', function (e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (remote) {
        $($this.data('target')).load(remote);
    }
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">

<div id="load-wrapper">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/8/show/" data-target="#myModal">Remote modal button</button>

    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">...</h3>
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Exemplo de código que funciona como o esperado: http://jsfiddle.net/vafleite/jf10pdcj/3/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .