I am making this project which forwards values of Arraylist from servlet to a jsp. My problem is, whenever I'm directed to the jsp page, my jsp page does not display the correct layout. I'm using bootstrap for in my jsp page.
Here is my code:
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{
String goToPage = null;
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String searchedWord = request.getParameter("search").trim();
if(searchedWord!=null){
System.out.println(searchedWord.length());
//place here the code for searching the pages which contains the typed word
PageSearch ps =new PageSearch();
ArrayList<Result> pages=ps.searchPagesWith(searchedWord);
System.out.println(searchedWord+" pages found "+pages.size());
request.setAttribute("pages", pages);
goToPage="/TOA/output/searchOutput.jsp";
ServletContext context = getServletContext();
RequestDispatcher rd = context.getRequestDispatcher(goToPage);
rd.forward(request, response);
}
}
My searchOutput.jsp is written in with bootstrap. My main problem here is that, the layout does not show properly. It seems that it is not reading the bootstrap. Is there a compatibility problem with jsp and bootstrap? I,m using tomcat. Thank you in advance.
[Here are the list of files in my project.][1]
Where I placed my files are here.[1]: https://i.stack.imgur.com/Ta17J.png Here is sample code from my searchOutput.jsp. I only included sample code.
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@page import ="java.util.ArrayList" %>
<%@page import ="backEnd.Result" %>
<jsp:useBean id="pages" scope="request" type="java.util.ArrayList<Result>" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Sample</title>
<link rel="shortcut icon" href="../img/favicon.ico" />
<link rel="icon" type="image/png" href="../img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="../css/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style> <![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery-scrolltofixed.js"> </script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.isotope.js"></script>
<script type="text/javascript" src="../js/wow.js"></script>
<script type="text/javascript" src="../js/classie.js"></script>
</head>
<body id="top" class="bodyContent">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container containerMedia">
<div class="container-fluid navbar-border">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 href="../index.html"><img src="../img/toalogo.gif" alt="" style="float: left;"></a>
<form class="navbar-form collapse searchFormMedia" role="search" style="float: right;">
<div class="input-group">
<input type="text" class="form-control" placeholder="search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<% if(pages!=null) { //display retrieved values%>
<h1>検索結果 <%=pages.size()%> あります。 </h1>
<%for(Result res: pages){
String link=res.getLink();
%>
<table >
<tr>
<td><%=res.getTitle() %><br/>
<%=res.getSentences() %><br/>
<a href="<%=link %>"><%=res.getLink() %></td>
</tr>
<br/><br/>
</table>
<%} } else { %>
<P>何もありません。</P>
<% }%>
<ul class="nav navbar-nav navbar-right searchFormWeb">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</body>
</html>
