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]);
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
Hey I'm writing a java application which should be able to connect the user to their facebook accounts. The application than should be able to post on their Facebook pages.
For now my workflow works quite good. But my java app is hostet by my customers. So I have no specified redirect url available. Because everey customer use a different Domain name.
There is the posibility to redirect to https://www.facebook.com/connect/login_success.html as described here https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/.
For now my JSP File looks like:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
FBGraph fbConnection = new FBGraph();
%>
<!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">
<title>Java Facebook Login</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/30c4960fcc.js"
crossorigin="anonymous"></script>
</head>
<body style="text-align: center; margin: 0 auto;">
<div class="container">
<div class="row">
<div class="col-md-auto">
<div class="jumbotron">
<h1 class="display-4">Welcome to Hforms Social Login</h1>
<p class="lead">Use this page to login into Facebook to use
your Hforms Installtion with your Facebook Pages</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg"
href="<%=fbConnection.getFBAuthUrl()%>" role="button" onclick="<%= fbConnection.onLinkClick()%>"> <i
class="fab fa-facebook"></i> <span>Login into Facebook</span></a>
</div>
</div>
</div>
</div>
</body>
</html>
getFBAuthUrl() for now returns https://www.facebook.com/v6.0/dialog/oauth?client_id=[mySecretID]&redirect_uri=https%3A%2F%2Fwww.facebook.com%2Fconnect%2Flogin_success.html&state=wdadwadawdwad&scope=manage_pages,publish_pages,pages_show_list
When klicking the Link I'm redirected to facbook and have to allow access to my app. When klicking OK there I'm redirected to the facebook success page where the URL is containing the key. But I have no idea how to get the key.
Maybe someone could give me a hint on that.
Thanks in advance
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.
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.
In my website, I download a full webpage from another site, modify something and extract it as a string. Now, I want to display it as a part of my .jsp page, with scrolling bar.
How can I do that? It shows me error when I try to put another <html> tag.
Thanks for your help.
EDIT!!!
Here is my .jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<title>Create Your XSLT Here</title>
</head>
<body>
<form action="../AdminServlet">
URL <input type="text" name="txtUrl" value="" /><br/>
Start Promotion <input type="text" name="txtStart" value="" /><br/>
Produt Name <input type="text" name="txtProductName" value="" /><br/>
<input type="submit" value="View" name="action" />
</form>
<c:if test="${not empty requestScope.website}">
<div>
${requestScope.website}
</div>
</c:if>
</body>
</html>
requestScope.website is a full html page as a string, return from server. When I run, everything in the requestScope.website (such as background image) apply to all my page. I want to limit it to a part of my page, just like using iframe.
I think u can use the <jsp:include ...>tag.
Put the whole source code into a jsp and use the tag to include to your page.
Something like
<jsp:include page="mypagepath/page.jsp"></jsp:include>