javascript - dynamically generated table being displayed with errors -
javascript - dynamically generated table being displayed with errors -
in current spring project, have structure: dashboard page, have menu links sub-pages application. each link opened within <div> displayed in jquery-ui dialog.
the 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" %> as did page above, pages have header , footer in external files, are:
header
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <%@ page session="false" language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <html> <head> <title>${param.name}</title> <link href="${pagecontext.servletcontext.contextpath}/resources/jquery/css/custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet"> <link href="${pagecontext.servletcontext.contextpath}/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="${pagecontext.servletcontext.contextpath}/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="${pagecontext.servletcontext.contextpath}/resources/extra/css/starter-template.css" rel="stylesheet"> <link href="${pagecontext.servletcontext.contextpath}/resources/extra/css/signin.css" rel="stylesheet"> <link href="${pagecontext.servletcontext.contextpath}/resources/extra/css/table.css" rel="stylesheet"> </head> <body> footer
<script src="${pagecontext.servletcontext.contextpath}/resources/jquery/js/jquery-2.1.1.min.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/jquery/js/jquery-ui-1.10.4.custom.min.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/bootstrap/js/bootstrap.min.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/extra/js/jquery.md5.min.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/extra/js/form_submit.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/extra/js/form_valida.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/extra/js/page_link.js"></script> <script src="${pagecontext.servletcontext.contextpath}/resources/extra/js/page_load.js"></script> </body> </html> each 1 of views mapped controller send client jsp page similar this:
<jsp:include page="../../common/listagem.jsp"> <jsp:param name="name" value="usuario"/> <jsp:param name="elements" value="login"/> <jsp:param name="elements" value="pnome"/> <jsp:param name="elements" value="unome"/> <jsp:param name="elements" value="email"/> <jsp:param name="label" value="login"/> <jsp:param name="label" value="nome"/> <jsp:param name="label" value="sobrenome"/> <jsp:param name="label" value="e-mail"/> </jsp:include> where common/listagem.jsp this:
<%@ 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, 'cadastra_${param.name}')"> <p> <button type="button" class="btn btn-sm btn-link action" data-action="${cadastra}" data-target="cadastro">cadastrar ${param.name}</button> </p> </sec:authorize> <!-- nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#listagem" data-toggle="tab">listagem</a></li> <sec:authorize access="haspermission(#user, 'cadastra_${param.name}')"> <li><a href="#cadastro" data-toggle="tab">cadastro</a></li> </sec:authorize> <sec:authorize access="haspermission(#user, 'altera_${param.name}')"> <li><a href="#alteracao" data-toggle="tab">alteração</a></li> </sec:authorize> <sec:authorize access="haspermission(#user, 'remove_${param.name}')"> <li><a href="#remocao" data-toggle="tab">remoção</a></li> </sec:authorize> </ul> <!-- tab panes --> <div class="tab-content"> <div class="tab-pane active" id="listagem"> <div class="panel panel-default"> <div class="panel-heading"> listagem </div> <div class="panel-body"> <p>...</p> </div> <table class="bordered"> <thead> <tr> <th class="col" data-property="#"></th> <c:foreach var="item" items="${paramvalues.elements}" varstatus="status"> <th class="col" data-property="<c:out value="${item}"/>"> <c:out value="${paramvalues.label[status.index]}"/> </th> </c:foreach> <th class="col" data-property=""></th> </tr> </thead> <tbody class="content"> </tbody> <tfoot> <tr> <sec:authorize access="haspermission(#user, 'altera_${param.name}')"> <td class="comando" data-nome="altera" data-action="${altera}"></td> </sec:authorize> <sec:authorize access="haspermission(#user, 'remove_${param.name}')"> <td class="comando" data-nome="remove" data-action="${altera}"></td> </sec:authorize> </tr> </tfoot> </table> </div> </div> <div class="tab-pane" id="cadastro"> ... </div> <div class="tab-pane" id="alteracao"> ... </div> <div class="tab-pane" id="remocao"> ... </div> </div> <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 run application, , open each 1 of sub-pages, first time fine (except table displays 1 item, when should display all). if close page, other times open it, table displayed duplicated columns.
anyone can see what's wrong here?
ps.: js code handle click in link dashboard this:
$( ".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).empty(); $( dialog_box ).find('#text'+id_dialog_div).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); }); the code dinamically generate table this:
function load_content(lista, target) { var atributos = []; $(".col").each(function(){ var property = $(this).data('property'); atributos.push(property); }); var pagina = $('input[name=pagina]').val(); var items = $('input[name=items]').val(); var ordem = $('input[name=ordem]').val(); var url = lista; $.ajax({ type: 'get', url: url, data: {pagina: pagina, items: items, ordem: ordem} }).done(function(data){ var json = jquery.parsejson( info ); $.each(json.item, function(index, item){ target.find("tbody.content").empty(); var row = $('<tr id='+item.id+'>'); var counter = 0; for(var i=0; i<atributos.length; i++) { if(atributos[i] == '#') { row.append('<td></td>'); } else if(atributos[i] == '') { var col = $('<td>'); $(".comando").each(function(){ var nome = $(this).data("nome"); var action = $(this).data("action"); col.append('<button type="button" class="btn btn-sm btn-primary action" data-target="'+nome+'" data-action="'+action+'/'+item.id+'">'+nome+'</button>'); }); row.append(col); } else { var token = item[atributos[i]]; row.append('<td>'+token+'</td>'); } } target.find("tbody.content").append(row); target.find("tfoot").hide(); counter++; }); }); }
then solve problem presented in topic. part of page displaying 1 item, solve replacing line: target.find("tbody.content").empty(); out of block $.each(json.item, function(index, item). duplication of columns, guess solved alterations in function open_dialog, code this:
function open_dialog(url, dialog_box) { $.ajax({ type: "get", url: url }).done(function(data){ var $temp = $('<div/>', {html:data}); $(dialog_box).find('.text').empty(); $(dialog_box).find('.text').html( $temp.remove('head').html() ); $(dialog_box).dialog( { title: $temp.find('title').text() } ); $(dialog_box).dialog( "open" ); }); } and in dashboard.jsp, block <div> related dialog that:
<div class="dialog" id="popup"> <div class="text"> </div> </div> javascript jquery html jsp
Comments
Post a Comment