使用数据库生成的导航栏无法正常工作
navigation bar generated using data base is not working properly
我使用数据库生成了导航栏。第一次导航栏工作时 fine.but 当单击子菜单然后第二次单击主菜单时，子菜单不显示。不知道是切换还是子菜单没有 there.i 通过会话变量传递子菜单和主菜单。
我使用 tile 和 spring mvc。
菜单jsp：
<%@page import="net.opticare.service.LoginServiceImpl"%>
<%@page import="net.opticare.service.LoginService"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="net.opticare.service.LoginService"%>
<%@ page import="net.opticare.service.LoginServiceImpl"%>
<%@ page import="java.util.List"%>
<%@ page import="net.opticare.form.Subtab"%>
<%@ page import="net.opticare.form.Maintab"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" />
<script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<%
LoginService loginService=new LoginServiceImpl();
int usertype=(Integer)session.getAttribute("usertype");
List<Maintab> MaintabsList=(List<Maintab>)session.getAttribute("MaintabsList");
List<Subtab> SubtabsList=(List<Subtab>)session.getAttribute("SubtabsList");
try{
request.setAttribute("MaintabsList", MaintabsList);
request.setAttribute("SubtabsList", SubtabsList);
}catch(Exception ex){
ex.printStackTrace();
}
%>
<nav id="bb" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="Loginsucess">home</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<c:if test="${not empty SubtabsList}">
<c:forEach var="maintab" items="${MaintabsList}">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">${maintab.description}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<c:forEach var="subtab" items="${SubtabsList}">
<c:if test="${subtab.maintab.maiTabId == maintab.maiTabId}">
<li><a href="${subtab.ref}">${subtab.description}</a></li>
</c:if>
</c:forEach>
</ul>
</li>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</nav>
</body>
</html>
登录控制器：
if(userExists!=0){
/*model.addAttribute("Maintabs",new Maintab());
model.addAttribute("MaintabsList",loginService.listMaintabs(userExists));
model.addAttribute("Subtabs",new Subtab());
model.addAttribute("SubtabsList",loginService.listSubtab(userExists));
*/
HttpSession session1 = request.getSession();
session1.setAttribute("usertype", userExists);
session1.setAttribute("MaintabsList", loginService.listMaintabs(userExists));
session1.setAttribute("SubtabsList", loginService.listSubtab(userExists));
System.out.println("session attri :"+session1.getAttribute("MaintabsList"));
return "Loginsucess";
方块 xml :
<tiles-definitions>
<definition name="base.definition"
template="/WEB-INF/jsp/main.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
</definition>
<definition name="loginform" template="/WEB-INF/jsp/loginform.jsp"/>
<definition name="userRedirect" extends="base.definition">
<put-attribute name="title" value="User Management" />
<put-attribute name="body" value="/WEB-INF/jsp/UserManagement.jsp" />
</definition>
<definition name="usertype" extends="base.definition">
<put-attribute name="title" value="User Type Management" />
<put-attribute name="body" value="/WEB-INF/jsp/UserTypeManagement.jsp" />
</definition>
<definition name="AddUpdateCustomer" extends="base.definition">
<put-attribute name="title" value="Customer Management" />
<put-attribute name="body" value="/WEB-INF/jsp/CustomerManagement.jsp" />
</definition>
<definition name="Loginsucess" extends="base.definition">
<put-attribute name="title" value="Wel Come To Opticare Vision House"/>
<put-attribute name="body" value="/WEB-INF/jsp/Home.jsp" />
</definition>
</tiles-definitions>
客户管理jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style>
legend a {
color: inherit;
}
legend.legendStyle {
padding-left: 5px;
padding-right: 5px;
}
fieldset.fsStyle {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: normal;
border: 1px solid #999999;
padding: 4px;
margin: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
legend.legendStyle {
font-size: 90%;
color: #888888;
background-color: transparent;
font-weight: bold;
}
legend {
width: auto;
border-bottom: 0px;
}
.top-buffer {
margin-top: 10px;
}
.margin {
/* margin-left:30px;
margin-right:10px; */
margin-left: 1%;
margin-right: 0.5%;
}
</style>
<script type="text/javascript">
function LoadDataToThegrid() {
// get the form values
//var name = $('#name').val();
//var education = $('#education').val();
$.ajax({
type : "POST",
url : "ListCustomer",
// data: "name=" + name + "&education=" + education,
data : {},
success : function(response) {
// we have the response
alert(response);
},
error : function(jqXHR, textStatus, errorThrown) {
//alert('Error: ' +xhr.responseText);
alert('Error: ' + jqXHR.responseText);
}
});
}
function loaddata() {
$.ajax({
url : 'ListCustomer',
error : function(xhr, statusText, err) {
alert("error" + xhr.status);
},
success : function(data) {
alert(data);
},
type : 'GET'
});
}
</script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-12">
<div class="row top-buffer">
<fieldset class="fsStyle">
<div class="col-md-8">
<div class="row top-buffer">
<div class="col-md-4 margin">
<input type="text" value="First Name" id="txtfname" />
</div>
<div class="col-md-4 margin">
<input type="text" value="Contact No" id="txtContactNo" />
</div>
</div>
<div class="row top-buffer ">
<div class="col-md-8 margin">
<input type="text" value="Last Name" id="txtLname" />
</div>
</div>
<div class="row top-buffer">
<div class="col-md-8 margin">
<input type="text" value="Address" id="txtAddress" />
</div>
</div>
<div class="row top-buffer">
<div class="col-md-2 margin">
<input type="button" value=" Save " id="btnSave" />
</div>
<div class="col-md-2 margin">
<input type="button" value="View History" id="btnHistory" />
</div>
<div class="col-md-2 margin">
<input type="button" value="Prescription" id="btnPrescription" />
</div>
<div class="col-md-2 margin">
<input type="button" value=" Back " id="btnBack" />
</div>
</div>
</div>
<div class="col-md-4">
<img
src="<%=request.getContextPath()%>/resources/img/rsz_indexpage_image.jpg"
height="150" width="150" />
</div>
</div>
</fieldset>
<div class="row top-buffer">
<div class="col-md-12">
<div class="container" style="overflow: auto;">
<table id="tblcustoDetails" class="table table-hover">
<thead>
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Tel No</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我在菜单 jsp 和客户管理 jsp 中传授了 bootstrap.min.css、jquery.min.js 和 bootstrap.min.js。当对 custometmangement jsp import 发表评论时，它工作正常。
更改 CustomerManagement.jsp 如下：
<!-- <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
我使用数据库生成了导航栏。第一次导航栏工作时 fine.but 当单击子菜单然后第二次单击主菜单时，子菜单不显示。不知道是切换还是子菜单没有 there.i 通过会话变量传递子菜单和主菜单。
我使用 tile 和 spring mvc。
菜单jsp：
<%@page import="net.opticare.service.LoginServiceImpl"%>
<%@page import="net.opticare.service.LoginService"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="net.opticare.service.LoginService"%>
<%@ page import="net.opticare.service.LoginServiceImpl"%>
<%@ page import="java.util.List"%>
<%@ page import="net.opticare.form.Subtab"%>
<%@ page import="net.opticare.form.Maintab"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" />
<script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<%
LoginService loginService=new LoginServiceImpl();
int usertype=(Integer)session.getAttribute("usertype");
List<Maintab> MaintabsList=(List<Maintab>)session.getAttribute("MaintabsList");
List<Subtab> SubtabsList=(List<Subtab>)session.getAttribute("SubtabsList");
try{
request.setAttribute("MaintabsList", MaintabsList);
request.setAttribute("SubtabsList", SubtabsList);
}catch(Exception ex){
ex.printStackTrace();
}
%>
<nav id="bb" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="Loginsucess">home</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<c:if test="${not empty SubtabsList}">
<c:forEach var="maintab" items="${MaintabsList}">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">${maintab.description}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<c:forEach var="subtab" items="${SubtabsList}">
<c:if test="${subtab.maintab.maiTabId == maintab.maiTabId}">
<li><a href="${subtab.ref}">${subtab.description}</a></li>
</c:if>
</c:forEach>
</ul>
</li>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</nav>
</body>
</html>
登录控制器：
if(userExists!=0){
/*model.addAttribute("Maintabs",new Maintab());
model.addAttribute("MaintabsList",loginService.listMaintabs(userExists));
model.addAttribute("Subtabs",new Subtab());
model.addAttribute("SubtabsList",loginService.listSubtab(userExists));
*/
HttpSession session1 = request.getSession();
session1.setAttribute("usertype", userExists);
session1.setAttribute("MaintabsList", loginService.listMaintabs(userExists));
session1.setAttribute("SubtabsList", loginService.listSubtab(userExists));
System.out.println("session attri :"+session1.getAttribute("MaintabsList"));
return "Loginsucess";
方块 xml :
<tiles-definitions>
<definition name="base.definition"
template="/WEB-INF/jsp/main.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
</definition>
<definition name="loginform" template="/WEB-INF/jsp/loginform.jsp"/>
<definition name="userRedirect" extends="base.definition">
<put-attribute name="title" value="User Management" />
<put-attribute name="body" value="/WEB-INF/jsp/UserManagement.jsp" />
</definition>
<definition name="usertype" extends="base.definition">
<put-attribute name="title" value="User Type Management" />
<put-attribute name="body" value="/WEB-INF/jsp/UserTypeManagement.jsp" />
</definition>
<definition name="AddUpdateCustomer" extends="base.definition">
<put-attribute name="title" value="Customer Management" />
<put-attribute name="body" value="/WEB-INF/jsp/CustomerManagement.jsp" />
</definition>
<definition name="Loginsucess" extends="base.definition">
<put-attribute name="title" value="Wel Come To Opticare Vision House"/>
<put-attribute name="body" value="/WEB-INF/jsp/Home.jsp" />
</definition>
</tiles-definitions>
客户管理jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style>
legend a {
color: inherit;
}
legend.legendStyle {
padding-left: 5px;
padding-right: 5px;
}
fieldset.fsStyle {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: normal;
border: 1px solid #999999;
padding: 4px;
margin: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
legend.legendStyle {
font-size: 90%;
color: #888888;
background-color: transparent;
font-weight: bold;
}
legend {
width: auto;
border-bottom: 0px;
}
.top-buffer {
margin-top: 10px;
}
.margin {
/* margin-left:30px;
margin-right:10px; */
margin-left: 1%;
margin-right: 0.5%;
}
</style>
<script type="text/javascript">
function LoadDataToThegrid() {
// get the form values
//var name = $('#name').val();
//var education = $('#education').val();
$.ajax({
type : "POST",
url : "ListCustomer",
// data: "name=" + name + "&education=" + education,
data : {},
success : function(response) {
// we have the response
alert(response);
},
error : function(jqXHR, textStatus, errorThrown) {
//alert('Error: ' +xhr.responseText);
alert('Error: ' + jqXHR.responseText);
}
});
}
function loaddata() {
$.ajax({
url : 'ListCustomer',
error : function(xhr, statusText, err) {
alert("error" + xhr.status);
},
success : function(data) {
alert(data);
},
type : 'GET'
});
}
</script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-12">
<div class="row top-buffer">
<fieldset class="fsStyle">
<div class="col-md-8">
<div class="row top-buffer">
<div class="col-md-4 margin">
<input type="text" value="First Name" id="txtfname" />
</div>
<div class="col-md-4 margin">
<input type="text" value="Contact No" id="txtContactNo" />
</div>
</div>
<div class="row top-buffer ">
<div class="col-md-8 margin">
<input type="text" value="Last Name" id="txtLname" />
</div>
</div>
<div class="row top-buffer">
<div class="col-md-8 margin">
<input type="text" value="Address" id="txtAddress" />
</div>
</div>
<div class="row top-buffer">
<div class="col-md-2 margin">
<input type="button" value=" Save " id="btnSave" />
</div>
<div class="col-md-2 margin">
<input type="button" value="View History" id="btnHistory" />
</div>
<div class="col-md-2 margin">
<input type="button" value="Prescription" id="btnPrescription" />
</div>
<div class="col-md-2 margin">
<input type="button" value=" Back " id="btnBack" />
</div>
</div>
</div>
<div class="col-md-4">
<img
src="<%=request.getContextPath()%>/resources/img/rsz_indexpage_image.jpg"
height="150" width="150" />
</div>
</div>
</fieldset>
<div class="row top-buffer">
<div class="col-md-12">
<div class="container" style="overflow: auto;">
<table id="tblcustoDetails" class="table table-hover">
<thead>
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Tel No</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我在菜单 jsp 和客户管理 jsp 中传授了 bootstrap.min.css、jquery.min.js 和 bootstrap.min.js。当对 custometmangement jsp import 发表评论时，它工作正常。
更改 CustomerManagement.jsp 如下：
<!-- <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->