jquery-ui dialog displays only the title bar

Asked

Viewed 323 times

1

in my spring application, every link in the class popup on the page below is opened in a popup window implemented with the widget dialog 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 window title bar is displayed on the screen (as the correct title, taken from the page the script read).

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

UPDATE

rendered html:

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

output screen capture:

javascript jquery jquery-ui

  • Can you make a jsfiddle with the problem? or put the rendered html.

  • @Sergio I added the rendered html and a screenshot with the result of the click.

1 answer

1

The problem seems to me to be this:

The jQuery dialog fetches the content for the body from the dialog to the target element, just as you do. The problem is that you want to fetch the content from the descendant the target... now #target > text won’t work. Take a look here: (http://jsfiddle.net/RTBwm/)

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

Another problem you may have ( because I saw an error in jsFiddle with version 1.9 of jQueryUI) is that it needs to activate the dialog before using it. If you’ve already got the title in place, you shouldn’t have the problem, but I was forced 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");

  • Hello Sergio, here came to work when I switched the dialog_box. for $(dialog_box).. Any idea why? I thought it should work without the $().

  • @Klebermota this makes no difference since it already has var dialog_box = $('#' + target) on top.

Browser other questions tagged javascript jquery jquery-ui

You are not signed in. Login or sign up in order to post.