javascript - duplicated titlebar when jquery-ui dialog is displayed -
javascript - duplicated titlebar when jquery-ui dialog is displayed -
in spring application, each 1 of sub-pages displayed in jquery-ui dialog. right now, facing next problem: when window opened, 2 titlebars presented on screen, this:
links pages , <div>
pages inserted placed in page 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á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õ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" %>
the javascript code handle event click , open jquery-ui dialog that:
$( ".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); });
anyone can see what's wrong code?
you instantiate dialogs on page load. duplicating in open_dialog()
when want set options, so:
$( dialog_box ).dialog("option", "title", $temp.find('title').text()); $( dialog_box ).dialog("option", "height", 680); $( dialog_box ).dialog("option", "width", 1046);
but, since height , width not specific dialog, should hard code them in first phone call .dialog()
other options (autoopen, closeonescape, etc).
javascript jquery jquery-ui
Comments
Post a Comment