Блог

в моем приложении spring каждая из подстраниц отображается в диалоговом окне jquery-ui. Прямо сейчас я сталкиваюсь со следующей проблемой: при открытии окна на экране отображаются два заголовка, например:

ссылки на страницы и на <div> то, куда вставляются эти страницы, размещены на панели управления страницей.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">Usuamp;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">Permissamp;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" %>
 

код javascript, который обрабатывает событие щелчка и открывает диалоговое окно jquery-ui, заключается в том, что:

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

любой может увидеть, что не так с этим кодом?

Вы уже создаете свои диалоги при загрузке страницы. Вы дублируете это, open_dialog() когда все, что вы действительно хотите, это установить некоторые параметры, например:

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

Но, поскольку ваши высота и ширина не являются специфичными для какого-либо диалогового окна, вы должны жестко закодировать их при первом вызове .dialog() с помощью этих других параметров (AutoOpen, closeOnEscape и т. Д.).