em minha aplicação spring, cada link da classe popup
na página abaixo é aberta em uma janela popup implementada com o widget dialog
do jquery-ui:
<%@ include file="../include/header.jsp" %>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <c:url value="/Usuario/listagem" var="usuario"/> <a href="#" class="popup" data-action="${usuario}/1/10/1" data-target="popup-usuario">Usuários</a></li>
<li> <c:url value="/Permissao/listagem" var="permissao"/> <a href="#" class="popup" data-action="${permissao}/1/10/1" data-target="popup-permissao">Permissões</a></li>
<li> <c:url value="/Grupo/listagem" var="grupo"/> <a href="#" class="popup" data-action="${grupo}/1/10/1" data-target="popup-grupo">Grupos</a></li>
<li> <c:url value="/logout" var="logoutUrl"/> <a href="${logoutUrl}">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="dialog" id="popup-usuario">
<div class="text"></div>
</div>
<div class="dialog" id="popup-permissao">
<div class="text"></div>
</div>
<div class="dialog" id="popup-grupo">
<div class="text"></div>
</div>
<%@ include file="../include/footer.jsp" %>
o código responsável por isso é o seguinte:
$(document).on('click', '.popup', function (event) {
console.log('=== click_event_popup ===');
event.preventDefault();
event.stopPropagation();
var action = $(this).data('action');
var target = $(this).data('target');
console.log('action='+action);
console.log('target='+target);
$.ajax({
type: "GET",
url: action
}).done(function(data){
var $temp = $('<div/>', {html:data});
//var dialog_box = add_dialog(target);
var dialog_box = $('#'+target);
dialog_box.find('.text').empty();
dialog_box.find('.text').html( $temp.remove('head').html() );
dialog_box.dialog('option', 'title', $temp.find('title').text());
dialog_box.dialog( "open" );
});
});
mas quando eu executo a aplicação e clico no link, só é exibida na tela a barra de titulo da janela (como o titulo correto, retirado da página que o script leu).
alguém consegue ver o que está errado no script acima, para causar esse problema?
UPDATE
html renderizado:
<html>
<head>
<title></title>
<link href="/blog/resources/jquery/css/custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href="/blog/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/blog/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="/blog/resources/extra/css/starter-template.css" rel="stylesheet">
<link href="/blog/resources/extra/css/signin.css" rel="stylesheet">
<link href="/blog/resources/extra/css/table.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="#" class="popup" data-action="/blog/Usuario/listagem/1/10/1" data-target="popup-usuario">Usuários</a></li>
<li> <a href="#" class="popup" data-action="/blog/Permissao/listagem/1/10/1" data-target="popup-permissao">Permissões</a></li>
<li> <a href="#" class="popup" data-action="/blog/Grupo/listagem/1/10/1" data-target="popup-grupo">Grupos</a></li>
<li> <a href="/blog/logout">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="container"></div>
<div class="dialog" id="popup-usuario">
<div class="text"></div>
</div>
<div class="dialog" id="popup-permissao">
<div class="text"></div>
</div>
<div class="dialog" id="popup-grupo">
<div class="text"></div>
</div>
<script src="/blog/resources/jquery/js/jquery-2.1.1.min.js"></script>
<script src="/blog/resources/jquery/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/blog/resources/bootstrap/js/bootstrap.min.js"></script>
<script src="/blog/resources/extra/js/jquery.md5.min.js"></script>
<script src="/blog/resources/extra/js/form_submit.js"></script>
<script src="/blog/resources/extra/js/form_valida.js"></script>
<script src="/blog/resources/extra/js/page_link.js"></script>
<script src="/blog/resources/extra/js/page_load.js"></script>
</body>
</html>
captura da tela de saida: