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
Related
I'm working on an E-commerce project, using Java Servlets and JSPs. However, I got stuck when it came to retrieving product's images from the database to the web page. my data access layer returns product object that contains an array of buffered images. the problem is that I cannot display these images in img tag.
NOTE: I've tested the data access layer and it works properly.
Here is the code of product.jsp, where product information should by displayed:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page import= "java.util.ArrayList, com.ecommerce.models.*, com.ecommerce.dao.*, org.apache.taglibs.standard.*, java.awt.image.BufferedImage"%>
<!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=UTF-8">
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/product.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic'
rel='stylesheet' type='text/css'>
<title>Product-name</title>
</head>
<body>
<%
Product product = (Product) session.getAttribute("product");
ImageDAO imagedao = new ImageDAO();
ArrayList<BufferedImage> images = imagedao.getImages(product.getId());
%>
<div class="topnav">
<img class="cart-icon" src="images/shopping-cart.png">
<img class="logo" src="images/logo.png" alt="Fashion Station Logo">
</div>
<div class="product-box">
<div class="img-view">
<img class="product-img" src="#">
<img class="product-img" src="#">
</div>
<h3>Product Name</h3>
<div class="quantity buttons_added">
<label>Quantity</label>
<input type="button" value="-" class="minus"><input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="" inputmode=""><input type="button" value="+" class="plus">
</div>
<h4>Price: $99</h4>
<button class="btn">Add to cart</button>
<div class="description-box">
<h3>Description</h3>
<p>Introducing our Blood Sugar Palette from the Love Sick Collection!
Featuring 18 striking eyeshadows and pressed-pigments. This palette is serving three luxurious formulas: matte, metallic and pressed glitter. This palette is not for the faint of heart! A luxurious red faux leather finish with a metal clasp.
SHADE NAMES
Row 1: Glucose, Sugarcane, Cake Mix, Ouch, Donor, Intravenous
Row 2: Candy Floss, Tongue Pop, Sweetener, Cavity, O Positive, Root Canal
Row 3: Prick, Cherry Soda, Fresh Meat, Blood Sugar, Extraction, Coma
One of a kind. Extreme payoff.
*VEGAN. CRUELTY-FREE.
</p>
</div>
</body>
</html>
You could use JQuery when the page loaded to try and get the images rendered.
I would assign ids to the image tags (say img1 and img2) i.e.
<img id="img1" class="product-img" src="">
<img id="img2" class="product-img" src="">
and then do something like :
$("#img1").attr("src",images[0]);
$("#img2").attr("src",images[1]);
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.
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.
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.