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">×</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...