So, I've been driving myself crazy over this, so I'm going for an extra set of eyes.
I'm going to paste two separate JSP files here. Both try to use a tabbed pane from Bootstrap. One of them works, and the other doesn't. What's driving me crazy is I can't figure out why. I literally can't find that one little difference that's breaking one and not the other. I don't like this, I don't like not knowing why something doesn't work.
So, the two files are login.jsp & login2.jsp. login2.jsp I wrote by hand, and it doesn't work. login.jsp I copied and pasted from an example, and just changed the values (eg, the names on the tabs). It works.
I'm sure there's probably some tiny typo in there that's the source of the issue, but I can't find it and it's driving me crazy. Anyway, any help would be appreciated.
login.jsp (the one that was copied/pasted, works perfectly)
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page session="false" %>
<%# include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>
</head>
<body>
<div id="welcome_title">
<h1><fmt:message key="welcome-title"/></h1>
</div>
<h3><fmt:message key="welcome-login-header"/></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Administrator</li>
<li>Student
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="admin">
<h3>Admin</h3>
</div>
<div class="tab-pane" id="student">
<h3>Student</h3>
</div>
</div>
</div>
</div>
</body>
</html>
login2.jsp (the one I wrote by hand, that's not working)
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page session="false" %>
<%# include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>
</head>
<body>
<div id="welcome_title">
<h1><fmt:message key="welcome-title"/></h1>
</div>
<h3><fmt:message key="welcome-login-header"/></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Administrator</li>
<li>Student</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="admin">
<h3>Admin</h3>
</div>
<div class="tab-pane" id="student">
<h3>Student</h3>
</div>
</div>
</div>
</div>
</body>
</html>
The only difference I found is at this line:
<li>Student</li>
The tag is not closed in the first file.
Related
This question already has answers here:
Calling a servlet from JSP file on page load
(4 answers)
Generate an HTML Response in a Java Servlet
(3 answers)
Closed 2 months ago.
I have this problem where I am trying to get items from an ArrayList from a servlet and display it to a JSP file but when I try to get the variables from the item in the ArrayList, they don't show up.
Here is my JSP file
<?xml version="1.0" encoding="UTF-8" ?>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page import="java.util.*"%>
<%# page import="com.product.Product"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="https://kit.fontawesome.com/256fd9e75f.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<title>Home</title>
<link rel="icon" href="src/ShopLogo.png" type="image/x-icon" />
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-light"
style="background-color: #f15c55"> <span
class="navbar-brand mb-0 h1">Store</span>
<button type="button" data-toggle="collapse" data-target="#navbarNav"
class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle Nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a href="ProductLoaderServlet"
class="nav-link">Home</a></li>
<li class="nav-item active"><a href="product.html"
class="nav-link">Top Products</a></li>
<li class="nav-item active"><a href="cart.html" class="nav-link"><i
class="fa-regular fa-cart-shopping"></i></a></li>
</ul>
</div>
</nav>
<div class="image-overlay">
<img src="scr/main/resources/Shop.jpg" alt="" />
<h1 class="centered">Shop</h1>
</div>
<%
ArrayList<Product> products = (ArrayList) request.getAttribute("products");
for (Product product : products) {
%>
<div class="cards">
<div class="card" style="width: 18rem">
<img class="card-img-top" src="<%product.getImgUrl();%>" alt="Image" />
<div class="card-body">
<h5 class="card-title">
<%
product.getName();
%>
</h5>
Details
</div>
</div>
</div>
<%
}
%>
</body>
</html>
and this is what I see My View
I assume that I am able to get the items because I can see 5 cards
But I want to know why my variables such as (name, or the image) aren't showing up
Many Thanks for your help
I don't mean taglibs, I'm using a JSP tag to do something like this:
ChildPage.jsp:
<%# page contentType="text/html" pageEncoding="UTF-8" %>
<%# taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:layout>
<jsp:attribute name="head">
<link href="css/custom.css" type="text/css" rel="stylesheet"/>
</jsp:attribute>
<jsp:attribute name="scripts">
<script src="js/custom.js"></script>
</jsp:attribute>
<jsp:body>
<p>This is from the child page</p>
</jsp:body>
</t:layout>
layout.tag:
<%# tag description="Layout template" pageEncoding="UTF-8" %>
<%# attribute name="head" fragment="true" %>
<%# attribute name="scripts" fragment="true" %>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/main.css" type="text/css" rel="stylesheet"/>
<jsp:invoke fragment="head"/>
</head>
<body>
<div id="body">
<p>This is from the parent or "layout"</p>
<jsp:doBody/>
</div>
<div id="footer">
<script src="js/main.js"></script>
<jsp:invoke fragment="scripts"/>
</div>
</body>
</html>
When rendered:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/main.css" type="text/css" rel="stylesheet"/>
<link href="css/custom.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="body">
<p>This is from the parent or "layout"</p>
<p>This is from the child page</p>
</div>
<div id="footer">
<script src="js/main.js"></script>
<script src="js/custom.js"></script>
</div>
</body>
</html>
This allows me to include scripts in the header section of the JSP from both the layout and child pages. Same for the body and footer.
I've read through Thymeleaf docs/examples but maybe I'm not understanding correctly as it doesn't look like I can do what I am trying to achieve.
The reason why I have "inverted" what seems like a simple include is every page that I have includes certain scripts and a header section, but my child pages also have scripts to be imported and stylesheets to be included.
Can I achive this somehow? Am I doing this wrong?
By default Thymeleaf uses so called Include-style layouts. Disadvantages of this approach explained on official site. I would advise you to use Thymeleaf Layout Dialect. This is much more convenient dialect to create Hierarchical-style layouts.
By the way, in Layout Dialect all content of <head> tag will be merged automatically. Just take a look on example.
Okay, I'm new to JSP and I'm trying to create a simple form with button in a JSP file index.jsp and link it to bootstrap. I just can't figure out how to call the bootstrap files from JSP. Here is my JSP code:
<%# 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 href=”Bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”Bootstrap/js/bootstrap.min.js”></script>
<title>Bootstrap Project</title>
</head>
<body>
<div class=”container”>
<form role=”form”>
<div class=”form-group”>
<label for=”exampleInputEmail1″>Email address</label>
<input type=”email” class=”form-control” id=”exampleInputEmail1″ placeholder=”Enter email”>
</div>
<div class=”form-group”>
<label for=”exampleInputPassword1″>Password</label>
<input type=”password” class=”form-control” id=”exampleInputPassword1″ placeholder=”Password”>
</div>
<div class=”form-group”>
<label for=”exampleInputFile”>File input</label>
<input type=”file” id=”exampleInputFile”>
<p class=”help-block”>Example block-level help text here.</p>
</div>
<div class=”checkbox”>
<label>
<input type=”checkbox”> Check me out
</label>
</div>
<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
</div>
</body>
</html>
And here is my folder arrangement:
I'm using Eclipse IDE and Tomcat as the server. Where am I going wrong?
Thanks.
I am trying to make a basic template system for my Spring MVC project. I am struggling to have a dynamic navigation bar and dynamic content on the same page. When I do not have the #RequestMapping(value = "/generic/navbar"), I get the expected output of "loading navbar". However, all the Bootstrap CSS and JQuery is broken. Inspecting the resources in chromes shows that the Bootstrap and JQuery scripts have been replaced with the HTML code in navbar.jsp. If I keep the #RequestMapping(value = "/generic/navbar"), the page loads the javascript correctly, but the navbar is not loaded.
I suspect that I have messed up something pertaining to the Request, but I do not know how to fix it. Can anyone help me please?
This is my code that will load the navigation bar.
#Controller
#RequestMapping(value = "/generic/navbar") //causes problems
public class NavbarController {
#RequestMapping(method = {RequestMethod.GET})
public String renderNavbar(Map<String, Object> model) {
System.out.println("loading navbar");
System.out.println(model);
return "generic/navbar";
}
}
This is the associated navbar.jsp file:
<%# page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">IPIMS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Home </li>
</ul>
</div>
</div>
this is a page where I try to use two jsp files:
<%# page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%#taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="input" uri="http://www.springframework.org/tags/form" %>
<t:userpage>
<jsp:attribute name="nav">
<jsp:include page="generic/navbar.jsp"/>
</jsp:attribute>
<jsp:attribute name="footer">
<jsp:include page="generic/footer.jsp"/>
</jsp:attribute>
<jsp:body>
HTML in here...
</jsp:body>
</t:userpage>
and this is my custom tag:
<%#tag description="Overall Page template" pageEncoding="UTF-8"%>
<%#attribute name="nav" fragment="true" %>
<%#attribute name="footer" fragment="true" %>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='/webjars/bootstrap/3.3.5/css/bootstrap.min.css'>
<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<jsp:invoke fragment="nav"/>
</div>
<div id="body">
<jsp:doBody/>
</div>
<div id="pagefooter">
<jsp:invoke fragment="footer"/>
</div>
</body>
</html>
I want to make a webpage based on Spring MVC, Semantic-UI framework and Gradle build tool. The problem is that, the JSP pages can't access the Semantic files while I trying to import them from WebJars. When I'm using import from cdnjs it working really nice.
Ok, my code below:
#Configuration
#EnableWebMvc
#ComponentScan("com.web)
public class WebConfiguration extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
index.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%# taglib prefix="c" uri="http://www.springframework.org/tags" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<!--
<link rel='stylesheet' href='webjars/semantic-ui/2.0.7/semantic.min.css'>
<script src='webjars/semantic-ui/2.0.7/semantic.min.js'></script> -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js'></script>
<title>Index Page</title>
</head>
<body>
<spring:message code="Index.WelcomeText"></spring:message>
<div class="ui animated button" tabindex="0">
<div class="visible content">Next</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="hidden content">Shop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">
$12.99 a month
</div>
</div>
</body>
</html>
As expect you have to add contextpath in url to browser identify the resource
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/semantic-ui/2.0.7/semantic.min.css">
<script src="${pageContext.request.contextPath}/webjars/semantic-ui/2.0.7/semantic.min.js"></script>
<title>Index Page</title>
</head>
like this
May be you are not using relative path to do this. Try injecting them in index file. I had the same issue.