Question

在我的spring应用程序中，每个子页面都显示在jquery-ui对话框中。现在，我面临以下问题：当窗口打开时，屏幕上会显示两个标题栏，如下所示：

页面的链接以及插入此页面的<div>放置在页面dashboard.jsp中：

<%@ 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 id="text"> </div>
    </div>

    <div class="dialog" id="popup-permissao">
            <div id="text"> </div>
    </div>

    <div class="dialog" id="popup-grupo">
            <div id="text"> </div>
    </div>

<%@ include file="../include/footer.jsp" %>

处理事件点击并打开jquery-ui对话框的javascript代码是：

$( ".dialog" ).dialog({
      autoOpen: false,
      closeOnEscape: true,
      closeText: "fechar",
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      },
      close: function( event, ui ) {
          $(this).remove();
      }
});
function open_dialog(url, dialog_box) {
    $.ajax({
        type: "GET",
        url: url
    }).done(function(data){
        var $temp  = $('<div/>', {html:data});

        $( dialog_box ).dialog( { title: $temp.find('title').text() } );
        $( dialog_box ).find('#text').empty();
        $( dialog_box ).find('#text').html( $temp.remove('head').html() );
        $( dialog_box ).dialog( { height: 680 } );
        $( dialog_box ).dialog( { width: 1046 } );
        $( dialog_box ).dialog( "open" );
    });
}
$(document).on('click', '.popup', function (event) {
    event.preventDefault();
    var action = $(this).data('action');
    var target = $(this).data('target');
    var div = $("#"+target);
    open_dialog(action, div);
});

任何人都可以看到这段代码出了什么问题？

Answer 1

您已经在页面加载时实例化对话框。当你真正想要的是设置一些选项时，你在open_dialog()中复制它，如下所示：

$( dialog_box ).dialog("option", "title", $temp.find('title').text());
$( dialog_box ).dialog("option", "height", 680);
$( dialog_box ).dialog("option", "width", 1046);

但是，由于您的高度和宽度并非特定于任何对话框，因此您应该在第一次使用其他选项（autoOpen，closeOnEscape等）调用.dialog()时对其进行硬编码。

显示jquery-ui对话框时重复的标题栏

1 个答案: