1

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&aacute;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&otilde;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&aacute;rios</a></li>
            <li>  <a href="#" class="popup" data-action="/blog/Permissao/listagem/1/10/1" data-target="popup-permissao">Permiss&otilde;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:

2
  • Pode fazer um jsfiddle com o problema? ou colocar o html renderizado.
    – Sergio
    20/06/2014 às 21:18
  • @Sergio Eu adicionei o html renderizado e uma captura de tela com o resultado do clique.
    – user7414
    20/06/2014 às 21:29

1 Resposta 1

1

O problema parece-me ser o seguinte:

O jQuery dialog vai buscar o conteudo para o body do dialog ao elemento target, exatamente como você faz. O problema é que você quer ir buscar o conteúdo ao descendente o target... ora #target > text não vai funcionar. Dê uma olhada aqui: (http://jsfiddle.net/RTBwm/)

<div class="dialog" id="popup-usuario">
    Isto aparece
    <div class="text">Isto não aparece</div>
</div>

Outro problema que pode ter ( porque vi erro no jsFiddle com a versão 1.9 do jQueryUI) é que ele precisa ativar o dialog antes de o usar. Se você já consegui ter o titulo no sitio, não deve ter o problema, mas eu fui obrigado a fazer isto:

    dialog_box.dialog();  // tive de inicializar o dialog antes de lhe passar option
    dialog_box.dialog('option', 'title', $temp.find('title').text());
    dialog_box.dialog("open");
2
  • Olá Sergio, aqui passou a funcionar quando eu troquei o dialog_box. por $(dialog_box).. Alguma ideia do porquê disso? Eu achava que deveria funcionar sem o $().
    – user7414
    21/06/2014 às 11:11
  • @KleberMota isso não faz diferença uma vez que já tem var dialog_box = $('#' + target) em cima.
    – Sergio
    21/06/2014 às 14:50

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