javascript - jquery-ui 对话框显示无内容(请参阅更新 3)

Question

在我的 spring 项目中，我有这个仪表板页面，其中每次单击链接都会在单独的弹出窗口中打开目标页面(使用 jquery-ui 对话框创建):

<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="#">Home</a></li>
        <li> <c:url value="/Usuario/listagem" var="usuario"/> <a class="popup" data-action="${usuario}/1/10/1" data-target="popup" href="#">Usu&aacute;rios</a></li>
        <li> <c:url value="/logout" var="logoutUrl"/> <a href="${logoutUrl}">Sair do sistema</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div id="popup"></div>

执行此操作的代码如下:

$( ".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 add_dialog(container_div) {
    var id_dialog_div = Math.floor(Math.random() * 1000000);
    var dialog_div = $('<div id="dialog-'+id_dialog_div+'" class="dialog" title="Basic dialog"> <p> <span id="text'+id_dialog_div+'"></span> </p> </div>');
    $(container_div).append(dialog_div);
    return id_dialog_div;
}

function open_dialog(url, dialog_div) {
    $.ajax({
        type: "GET",
        url: url
    }).done(function(data){
        var id_dialog_div = add_dialog(dialog_div);
        var dialog_box = $('#dialog-'+id_dialog_div);

        var $temp  = $('<div/>', {html:data});

        $( dialog_box ).dialog( { title: $temp.find('title').text() } );
        $( dialog_box ).find('#text'+id_dialog_div).html( $temp.remove('head').html() );
        $( dialog_box ).dialog( { height: 480 } );
        $( dialog_box ).dialog( { width: 640 } );
        $( 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);
});

应该在弹出窗口中打开的 View 是:

<jsp:include page="../../common/listagem.jsp">
    <jsp:param name="name" value="Usuario"/>
    <jsp:param name="elements" value="login,first_name,last_name,email"/>
</jsp:include>

jsp common/listagem.jsp 就是这样:

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

<c:url value="/${param.name}/cadastra" var="cadastra"/>
<c:url value="/${param.name}/altera" var="altera"/>
<c:url value="/${param.name}/remove" var="remove"/>

<input type="hidden" name="pagina" value="${pagina}">
<input type="hidden" name="items" value="${items}">
<input type="hidden" name="ordem" value="${ordem}">

<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<p>
    <button type="button" class="btn btn-default btn-lg">Cadastrar novo ${param.name} </button>
</p>
</sec:authorize>

<table border="2">
    <thead>
        <tr>
            <th>#</th>
            <c:forEach var="item" items="${param.elements}" varStatus="index">
                <th class="col" data-property="<c:out value="${item}"/>"> <c:out value="${item}"/> </th>
            </c:forEach>
            <th></th>
        </tr>
    </thead>

    <tbody class="content">
    </tbody>

    <tfoot>
        <tr class="comando">
            <sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
                <td data-nome="altera" data-action="${altera}"></td>
            </sec:authorize>
            <sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
                <td data-nome="remove" data-action="${altera}"></td>
            </sec:authorize>
        </tr>
    </tfoot>
</table>

<c:url value="/${param.name}/listagem.json" var="listagem"/>
<script>
$(document).ready(function(){
    load_content("${listagem}", $('table'));
});
</script>

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

我的问题是，当我单击关闭按钮时，窗口不会立即关闭，而是缩小了，只剩下标题栏。如果我再次单击关闭按钮，它就会关闭。此外，窗口中不显示任何标题，但屏幕上会显示第二个(也是最小的)标题栏，并具有正确的标题，并且我只有在第二次单击第一个关闭按钮后才能关闭该标题栏。

这就是发生的事情:

有人知道这里发生了什么以及如何解决这个问题吗？

更新

在上面的代码中，行:

$( dialog_box ).find('#text').html( $temp.remove('head').html() );

应该从jsp页面中删除<head>标签及其内容并附加 <body>元素内的内容 <span>在这个<div> :

    <div id="dialog" class="dialog" title="Basic dialog">
        <p> <span id="text"> </span> </p>
    </div>

但是当我运行应用程序并在浏览器开发工具中查看 html 代码时，jsp 页面中的所有内容都会添加到 <div> 中。 , <head>包括在内。

更新2

我尝试删除函数add_dialog，并更改<div>对此:

<div id="popup">
    <div id="dialog" class="dialog" title="Basic dialog">
        <p> <span id="text"> </span> </p>
    </div>
</div>

以及函数 open_dialog :

function open_dialog(url, dialog_div) {
    $.ajax({
        type: "GET",
        url: url
    }).done(function(data){
        //var id_dialog_div = add_dialog(dialog_div);
        var dialog_box = $('#dialog');

        var $temp  = $('<div/>', {html:data});

        $( dialog_box ).dialog( { title: $temp.find('title').text() } );
        $( dialog_box ).find('#text').html( $temp.remove('head').html() );
        $( dialog_box ).dialog( "open" );
    });
}

但这部分有效:当我第一次打开对话框时，它显示正确，但在我关闭并重新打开它后，问题再次发生。

更新3

我用以下代码解决了压缩环/重复的问题:

$( "#popup" ).dialog({
      autoOpen: false,
      closeOnEscape: true,
      closeText: "fechar",
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      }
});

function open(url, target) {
    $.ajax({
        type: "GET",
        url: url
    }).done(function( data ) {
        var $temp  = $('<div/>', {html:data});
        var conteudo = $temp.remove('head').html();

        target.empty();
        target.find('#text').html(conteudo);

        $("#popup").dialog('open');
    });
}

$(document).on('click', 'a.link', function (event) {
    event.preventDefault();
    var action = $(this).attr('href');
    var target = $('#dialog');
    open(action, target);
});

$(document).on('click', 'button.btn-link', function (event) {
    event.preventDefault();
    var action = $(this).data('href');
    var target = $('#dialog');
    open(action, target);
});

但是现在，我的对话框打开时没有任何内容。有人知道现在出了什么问题吗？

Answer 1

不确定你所有的 javascript，我不会去那里，但取决于你的代码使用的 jQueryUI 版本

close: function( event, ui ) {
          $(this).remove();
      }

抛出错误，检查浏览器中的控制台输出，在我的代码中，我将对话框应用于#page_preview

$("#page_preview").dialog('remove');

错误:对话框小部件实例没有此类方法“删除”

但是一旦我使用

$("#page_preview").dialog('close');

有效

我的整个代码如下所示

$("#page_preview").dialog({
        title: "Page Preview",
        dialogClass: "no-close",
        autoOpen: false,
        resizable: true,
        modal: true,
        width: 1100,
        buttons: [
            {
                text: "OK",
                click: function() {
                    $(this).dialog("close");
                }
            }]
    });

我相信，在 close: 部分中所做的事情实际上是删除了对话框所应用到的元素，但对话框结构仍然存在，这就是为什么它看起来已经缩小了

希望对你有帮助

最终编辑:

看看这里，它略有不同，但有效，抱歉，这将是我能为你做的最好的事情 goo.gl/GLqIYO