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&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">permiss&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" %>

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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -