jquery-ui dialog displays only the title bar

Navigation
1

In my spring application, every link of class popup on the page below opens in a popup window implemented with the dialog widget of 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" %>

The code responsible for this is as follows: 

$(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" );
    });
});

But when I run the application and click on the link, only the title bar of the window (like the correct title, taken from the page the script has read) is displayed on the screen.

Can anyone see what is wrong in the above script to cause this problem?

UPDATE

html rendering: 

<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>

screenshot output:

    
asked by anonymous 20.06.2014 / 23:06

1 answer

1

The problem seems to me to be this:

The jQuery dialog will fetch the contents of the dialog body from the target element, just like you do. The problem is that you want to go get the content to the descendant target ... now #target > text will not work. Take a look here: ( link ) 

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

Another problem I may have (because I saw jsFiddle error with version 1.9 of jQueryUI) is that it needs to activate the dialog before using it. If you already have the title on the site, you should not have the problem, but I had to do this: 

    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");
    
21.06.2014 / 10:31
Generate PDF from selector in current page with CSS Selecting data in cURL Java