javascript - jquery-ui dialog being displayed with no content (see update 3) -

javascript - jquery-ui dialog being displayed with no content (see update 3) -

in spring project, have dashboard page, each click in link open destination page in separate popup window (created jquery-ui dialog):

<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 sistema</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div id="popup"></div>

the code it's following:

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

the view should opened in popup it's that:

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

and jsp common/listagem.jsp it's that:

<%@ 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" %>

my problem when click in close button, windows isn't closed immediately, it's shrunked, remaining titlebar. if click 1 time again in close button, close. also, no title displayed in window, sec (and smallest) titlebar displayed on screen right title, , 1 close after sec click in first close button.

this happening:

anyone knows what's happening here , how solve this?

update

in code above, line:

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

should remove jsp page <head> tag , content , append <body> content within element <span> in <div>:

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

but when run application, , html code in browser dev tool, content jsp page added <div>, <head> included.

update 2

i seek remove function add_dialog, , alter <div> this:

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

and function open_dialog this:

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

but work partially: when open dialog in first time, it's displayeh correctly, after close , reopen it, issue happens again.

update 3

i solve problem shunkring / duplication code:

$( "#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( info ) { 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); });

but now, dialog opened without content. knows wrong now?

not sure javascript , not going there depending on version of jqueryui code uses

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

throws error, check console output in browser, in code have dialog applied #page_preview

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

error: no such method 'remove' dialog widget instance

but use

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

it works

my entrire code looks this

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

i believe doing doing in close: section removing element dialog applied to, dialog construction remains, thats why seems has shrunk

hope helps

final edit:

take in here, different works, sorry best can u goo.gl/glqiyo

javascript jquery jsp