дублированная строка заголовка при отображении диалогового окна jquery-ui

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-ui

Вопрос:

в моем приложении 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);
});
 

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

Комментарии:

1. Попробуйте добавить event.stopPropagation(); в верхней части вашего click обработчика. Возможно, клики всплывают и запускаются open_dialog() дважды.

2. @RodneyGolpe Я пытаюсь это сделать, но не решаю проблему.

Ответ №1:

Вы уже создаете свои диалоги при загрузке страницы. Вы дублируете это, 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 и т. Д.).

Комментарии:

1. Хорошо, ваш ответ имеет смысл для меня. И последнее: в этом случае, где я должен добавить содержимое в диалоговое окно? в обработчике события clicm или в функции open_dialog? или должно быть в другом месте?

2. Кажется, все в порядке, где у вас это есть. Следует отметить еще пару вещей: 1. вам не нужно переносить dialog_box внутрь $() , потому что это уже объект jQuery; и 2. измените все id="text" на class="text" и измените ассоциированные селекторы jQuery на .find(".text") .

3. Хорошо, я попробую то, что вы предлагаете. Когда я не переношу dialog_box , отображается только строка заголовка. При $() этом первые окна отображаются правильно, а другие отображают дополнительную строку заголовка (как показано на рисунке).

4. Я действительно не знаю, что может быть не так. Вот мое решение (все, кроме вашего .ajax() вызова): jsfiddle.net/rodgolpe/E84sv

5. прямо сейчас я пытаюсь снова без $() и с $( dialog_box ).dialog("option", "title", $temp.find('title').text()) вместо $( dialog_box ).dialog( { title: $temp.find('title').text() } ) , и отображается только заголовок. Я замечаю в инспекторе из браузера (я использую firefox), что каждый раз, когда я открываю окно, на страницу добавляется новый блок кода (с тремя блоками <div> из class dialog ).