I have a jsp page that which is used to get data from a user and addthem into a database using a servlet. there is a null exception comes when i try to run the page. but it does not have any error. can somebody help me to figure out what the error is?
error -
type Exception report
messageInternal Server Error
descriptionThe server encountered an internal error that prevented it from fulfilling this request.
exception
org.apache.jasper.JasperException: java.lang.NullPointerException
root cause
java.lang.NullPointerException
my jsp -
<%#page import="java.sql.ResultSet"%>
<%#page import="java.sql.Statement"%>
<%#page import="java.sql.DriverManager"%>
<%#page import="java.util.ArrayList"%>
<%#page import="com.cert.classes.Incident"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sri Lanka CERT</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/local.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Sri Lanka CERT</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><i class="fa fa-bullseye"></i> Dashboard</li>
<li><i class="fa fa-tasks"></i> Search and Update</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown messages-dropdown">
<i class="fa fa-envelope"></i> Messages<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">2 New Messages</li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li>Go to Inbox <span class="badge"></span></li>
</ul>
</li>
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i><b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-gear"></i> Change Password</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
<li class="divider-vertical"></li>
<li>
<form class="navbar-search">
<input type="text" value=<%=request.getSession().getAttribute("user") %>><br>
</form>
</li>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-6">
<form role="form" action="/addticket" method="post">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone</label>
<input class="form-control" name="phone">
</div>
<div class="form-group">
<label>Mode</label><br>
<label class="radio-inline">
<input type="radio" name="mode" value="call">
Call
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="email">
Email
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="visit">
Visit
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="other">
Other
</label>
</div>
<div class="form-group">
<label>Status</label><br>
<label class="radio-inline">
<input type="radio" name="status" value="opened">
Opened
</label>
<label class="radio-inline">
<input type="radio" name="status" value="sent">
Document Sent
</label>
<label class="radio-inline">
<input type="radio" name="status" value="submitted">
Document Submitted
</label>
<label class="radio-inline">
<input type="radio" name="status" value="closed" disabled>
Closed
</label>
</div>
<div cla <label>Comment</label>
<textarea name="comment" class="form-control" rows="3"></textarea>
</div>
<input type="hidden" class="form-control" value=<%=request.getSession().getAttribute("user")%> name="handler">
<%
ArrayList<Incident> list1 = (ArrayList<Incident>) getServletContext().getAttribute("main_list");
ArrayList<Incident> list2 = (ArrayList<Incident>) getServletContext().getAttribute("sub_list");
ArrayList<Incident> list3 = (ArrayList<Incident>) getServletContext().getAttribute("incident_list");
%>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Main Category</label>
<select name="main_category" class="form-control">
<%
for(Incident item : list1){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group">
<label>Sub Category</label>
<select name="sub_category" class="form-control">
<%
for(Incident item : list2){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group">
<label>Incident Type</label>
<select name="incident_type" class="form-control">
<%
for(Incident item : list3){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group has-error">
<label>Target</label>
<input type="text" class="form-control" name="target">
</div>
<div class="form-group has-warning">
<label>Forwarded</label>
<input type="text" class="form-control" name="forwarded">
</div>
<button type="submit" class="btn btn-default">Add Ticket</button>
<button type="reset" class="btn btn-default">Clear</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The issue with this code is
ArrayList<Incident> list1 = (ArrayList<Incident>) getServletContext().getAttribute("main_list");
first checknull condition for this line if(getServletContext().getAttribute("main_list")!=null) and then type cast to ArrayList. if we are getting null value for this line getServletContext().getAttribute("main_list") and you are trying to typecast with ArrayList then you will get Null Pointer excetion only. Please use JSTL tags instead of direct java code placing in jsp...
Related
I am trying to get info from a input bar and use the value for a modal. Currently I am using Thymeleaf and I am getting everything mixed up. I tried setting the attribute for href using jQuery. Though I believe since the th:href gets rendered on page load, my code does not work.
The end goal is to send the info from the input field, process it in Thymeleaf, and then show the results in the modal. I can so far only accomplish it when I hard code everything. I am looking for a more dynamic way. Any help will be appreciated.
HTML:
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<title>Application</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/landing-page.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="create.html">Create</a> -->
<a class="nav-link" href="/addTyler">Create</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Taddm Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div class="list-group" id="myList">
<div th:each="plants : ${plants}">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<span class="input-group-btn">
<a class="btn btn-primary eBtn">View</a>
<!-- <a th:href="#{findOne/(appcode=01G)}" class="btn btn-primary eBtn">View</a> -->
</span>
</div>
<div class="myForm">
<form th:action="#{/save}" method="POST">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update or Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="appcode" class="col-form-label">AppCode:</label>
<input type="text" class="form-control" id="appcode" name="appcode" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="save"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
jQuery:
// Empty JS for your own code to be here
$(document).ready(function() {
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function() {
$("#myList").toggle();
}, 250);
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("#myList a").on("click", function() {
var texto = $(this).text();
$("#myInput").val(texto);
});
$(".eBtn").on("click", function(event){
$("a").attr("href","#{findOne/(appcode='01G')}"); //Test
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
$.get(href, function(appcode,status){
$("#appcode").val(appcode);
});
$("#exampleModal").modal();
});
});
Controller:
#RequestMapping("/findOne")
#ResponseBody
public String findOne(String appcode) {
System.out.println(mAppRepo.findById(appcode).get().getmAppName());
return mAppRepo.findById(appcode).get().getmAppName();
}
I'm having a problem with form. When I use button it's using post method to current address instead of one specified in form. I got no idea what's wrong in that form. I would really appreciate some help.
<form th:action:="#{/shoppingCart/addItem}" method="post">
<input hidden="hidden" th:value="*{book.id}"/><!--both name and value are taken care of by that syntax -->
<div class="row" style="margin-top: 120px">
<div class="col-xs-3">
<a th:href="#{/bookshelf}">Back to book list. </a><br/>
<img class="img-responsive shelf-book" th:src="#{adminPath}+#{/image/book/}+${book.id}+'.png'"/>
</div>
<div class="col-xs-9">
<h3 th:text="${book.title}">Book Title</h3>
<div class="row">
<div class="col-xs-5">
<h5><strong>Author: </strong><span th:text="${book.author}"></span></h5>
<p><strong>Publisher: </strong><span th:text="${book.publisher}"></span></p>
<p><strong>Publication Date: </strong><span th:text="${book.publicationDate}"></span></p>
<p><strong>Language: </strong><span th:text="${book.language}"></span></p>
<p><strong>Category: </strong><span th:text="${book.category}"></span></p>
<p><strong><span th:text="${book.format}"></span></strong> : <span th:text="${book.numberOfPages}"></span> pages</p>
<p><strong>ISBN: </strong><span th:text="${book.isbn}"></span></p>
<p><strong>Shipping weight: </strong><span th:text="${book.shippingWeight}"></span> kg</p>
</div>
<div class="col-xs-5">
<div class="panel panel-default" >
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<h4>Our price: <span>$ <span style="color: #db3208;" th:text="${book.ourPrice}"></span></span> </h4>
<p>List price: <span>$ <span style="text-decoration: line-through" th:text="${book.listPrice}"></span></span> </p>
<p>You save: <span th:text="${#numbers.formatDecimal((book.listPrice - book.ourPrice), 0, 'COMMA', 2, 'POINT')}"></span> </p>
<span>Qty: </span>
<select>
<option th:each="qty : ${qtyList}" th:value="${qty}" th:text="${qty}" ></option>
</select>
</div>
<div class="col-xs-6">
<h4 th:if="*{book.inStockNumber>9}" style="color: green">In Stock;</h4>
<h4 th:if="*{book.inStockNumber>0 and book.inStockNumber<10}" style="color: green">Only <span th:text="${book.inStockNumber}"></span> left.</h4>
<h4 th:if="*{book.inStockNumber==0}" style="color: darkred">SOLD OUT.</h4>
<button type="submit" class="btn btn-warning" style="color: black; border: solid 1px">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="color: black; height: 2px; width: 100%"/>
<p th:utext="${book.description}"></p>
</div>
</form>
Sites html code, after using the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="../../favicon.ico" />
<title>Bookstore</title>
<!--Font Awesome-->
<link rel="stylesheet" href="/lib/components-font-awesome/css/font-awesome.min.css" />
<!-- Bootstrap core CSS -->
<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />
</head>
<body>
<div>
<div class="page-top" style="width: 100%; height: 20px; background-color: #f46b42; margin-top: -15px"></div>
<!-- Static navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bookstore</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="/bookshelf">Books <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Browse the bookshelf</li>
<li>Opening hours & directions</li>
<li>FAQ</li>
</ul>
</li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li>MY ACCOUNT</li>
<li></li>
<li></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
<div class="container">
<hr style="position: absolute; background-color: #333; z-index: -1; height: 6px; width: 100%; margin-top: 100px" />
<div class="row">
<div class="col-xs-8"><h2 class="section-headline"><span>Welcome guest.</span></h2> </div>
<div class="col-xs-4"><img src="/image/logo.png" class="img-responsive" /></div>
</div>
<img src="/image/wood.png" class="img-responsive" style="margin-top: -75px" />
<form th:action:="#{/shoppingCart/addItem}" method="post">
<input hidden="hidden" value="1" /><!--both name and value are taken care of by that syntax -->
<div class="row" style="margin-top: 120px">
<div class="col-xs-3">
Back to book list. <br />
<img class="img-responsive shelf-book" src="http://localhost:8081/adminportal/image/book/1.png" />
</div>
<div class="col-xs-9">
<h3>tre</h3>
<div class="row">
<div class="col-xs-5">
<h5><strong>Author: </strong><span>wss</span></h5>
<p><strong>Publisher: </strong><span>wew</span></p>
<p><strong>Publication Date: </strong><span>5666</span></p>
<p><strong>Language: </strong><span>polish</span></p>
<p><strong>Category: </strong><span>Biography</span></p>
<p><strong><span>Hardcover</span></strong> : <span>66</span> pages</p>
<p><strong>ISBN: </strong><span>667</span></p>
<p><strong>Shipping weight: </strong><span>7.0</span> kg</p>
</div>
<div class="col-xs-5">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<h4>Our price: <span>$ <span style="color: #db3208;">10.0</span></span> </h4>
<p>List price: <span>$ <span style="text-decoration: line-through">12.0</span></span> </p>
<p>You save: <span>2.00</span> </p>
<span>Qty: </span>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="col-xs-6">
<h4 style="color: green">Only <span>8</span> left.</h4>
<button type="submit" class="btn btn-warning" style="color: black; border: solid 1px">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="color: black; height: 2px; width: 100%" />
<p><p>hhgvhhu</p></p>
</div>
</form>
</div>
<div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Looks like you've got a typo:
th:action:="#{/shoppingCart/addItem}"
:=
I have error in first line of following jsp page
<%#taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%#taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/boo
tstrap.min.css">
<title>Products</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1>Products</h1>
<p>Add products</p>
</div>
</div>
</section>
<section class="container">
<form:form modelAttribute="newProduct" class="form-horizontal">
<fieldset>
<legend>Add new product</legend>
<div class="form-group">
<label class="control-label col-lg-2 col-lg-2" for="productId">Product
Id</label>
<div class="col-lg-10">
<form:input id="productId" path="productId" type="text"
class="form:input-large" />
</div>
</div>
<!-- Similarly bind <form:input> tag for
name,unitPrice,manufacturer,category,unitsInStock and unitsInOrder
fields-->
<div class="form-group">
<label class="control-label col-lg-2" for="description">Description</label>
<div class="col-lg-10">form:textarea id="description"
path="description" rows = "2"/></div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="discontinued">Discontinued</label>
<div class="col-lg-10">
<form:checkbox id="discontinued" path="discontinued" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="condition">Condition</label>
<div class="col-lg-10">
<form:radiobutton path="condition" value="New" />
New
<form:radiobutton path="condition" value="Old" />
Old
<form:radiobutton path="condition" value="Refurbished" />
Refurbished
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<input type="submit" id="btnAdd" class="btn btn-primary"
value="Add" />
</div>
</div>
</fieldset>
</form:form>
</section>
</body>
</html>
while doing this jsp i got error, I am new to view part and have little to none knowledge of Jstl el but while learning spring I got stuck in this error which says
Multiple annotations found at this line:
> - Missing end tag for
> "form:input"
>- Missing end tag for
> "form:input"
Am I missing something, how to solve this? even a small hint is welcomed too
Thanks
el will also evaluate expressions in comments, so you have to make the tags in comments as it is in "normal" page
Change
<!-- Similarly bind <form:input> tag for
name,unitPrice,manufacturer,category,unitsInStock and unitsInOrder
fields-->
to
<!-- Similarly bind <form:input/> tag for
name,unitPrice,manufacturer,category,unitsInStock and unitsInOrder
fields-->
I've created a JSP file for creating a form.
I'm trying to auto update or print data automatically into a text field in a form by uploading a .csv file using input type=file tag and then calculate the total price of items from the .csv file using JSP. That is I've to print the total price calculated from the .csv file onto the text field of the form.
Below is the JSP file.
Say the .csv file contains only 1 column containing prices of different items.
<%# 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">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/bootstrap.css">
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="form-area">
<form role="form" method="post" action="../AddDistributorDetail"> <br style="clear:both">
<h3 style="margin-bottom: 25px; text-align: center;">Distributor Registration</h3>
<div class="form-group">
<label class="control-label">Distributor Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="control-label">Contact No #1:</label>
<input type="text" class="form-control" id="contact1" name="contact1" placeholder="Contact No1" required>
</div>
<div class="form-group">
<label class="control-label">Contact No #2:</label>
<input type="text" class="form-control" id="contact2" name="contact2" placeholder="Contact No2" required>
</div>
<div class="form-group">
<label class="control-label">Address #1:</label>
<textarea class="form-control" type="textarea" id="address1" placeholder="First Address" maxlength="200" rows="7"></textarea>
</div>
<div class="form-group">
<label class="control-label">Address #1:</label>
<textarea class="form-control" type="textarea" id="address2" placeholder="Second Address" maxlength="200" rows="7"></textarea>
</div>
<div class="form-group">
<label class="control-label">City:</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" required>
</div>
<div class="form-group">
<label class="control-label">Pincode:</label>
<input type="text" class="form-control" id="pin" name="pin" placeholder="Pincode" required>
</div>
<div class="form-group">
<label class="control-label">Zone:</label>
<div class="radio">
<label><input type="radio" name="zone">East</label>
</div>
<div class="radio">
<label><input type="radio" name="zone">South</label>
</div>
<div class="radio">
<label><input type="radio" name="zone">West</label>
</div>
<div class="radio">
<label><input type="radio" name="zone">North</label>
</div>
</div>
<div class="form-group">
<label class="control-label">STB Limit:</label>
<input type="text" class="form-control" id="stblimit" name="stblimit" placeholder="Set Top Box Limit" required>
</div>
<div class="form-group">
<label class="control-label">Credit Limit:</label>
<input type="text" class="form-control" id="climit" name="climit" placeholder="Max Credit Limit" required>
</div>
<div class="form-group">
<label class="control-label">Upload STB Inventory</label>
<input type="file" class=" file form-control" id="file_upload" name="file_upload" enctype="multipart/form-data" multiple required>
</div>
<div class="form-group">
<label class="control-label">Total Cost Of Inventory</label>
<input type="text" class="form-control" id="tcost" name="tcost" placeholder="Total Cost Of Inventory" required>
</div>
<button type="button" id="submit" name="submit" class="btn btn-primary">Submit Form</button>
</form>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/bootstrap.js"></script>
</body>
</html>
Even though I understood as how to read a csv file in JSP, I searched the internet but didn't find any logic as how to upload the file and calculate the total price in real time(i.e in the same JSP page and before clicking the submit button) and print it the text field in the form.
Any help regarding this will be much appreciated.
You can upload the file using ajax form submit. After uploading, in the server side just read the csv and writes the result back in the response. After receiving the result you can manipulate the dom element.
The easier way is to use the javascript "FileReader" api, which will be supported in most browser
<script type='text/javascript'>
var readFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
document.getElementById("myTextarea").value =reader.result;
};
reader.readAsText(input.files[0]);
};
</script>
<body>
<input type='file' onchange='readFile(event)'><br>
<textarea id='myTextarea'></textarea>
</body>
Js fiddle link : http://jsfiddle.net/gtxfye8m/
I've tested in chrome, edge.
You can create a Pojo class and declare all the fields which are present in the file and read the fields from your csv file and then set it into the respective objects that can be mapped to your jsp fields.
Hy I have a jsp with cv form with his fields:
<form:form commandName="cv" action="${pageContext.request.contextPath}/site/my-account/cv/save" id="cv-template-form" method="POST">
<h3><spring:message code="view.candidates.form.workExperience" /></h3>
<div id="workExperienceDiv">
<jsp:include page="/WEB-INF/views/site/commons/cv/workExperience.jsp"/>
</div>
<a href="javascript:void(0);" onclick="AjaxUtils.submitAttribute('${pageContext.request.contextPath}/site/my-account/cv/save/workExperience','workExperienceDiv');" class="btn btn-large btn-block btn-lightgray">
<spring:message code="button.labe.add.more"/>
</a>
<h3><spring:message code="view.candidates.form.education" /></h3>
<div id="educationDiv">
<jsp:include page="/WEB-INF/views/site/commons/cv/education.jsp"/>
</div>
<a href="javascript:void(0);" onclick="AjaxUtils.submitAttribute('${pageContext.request.contextPath}/site/my-account/cv/save/education','educationDiv');" class="btn btn-large btn-block btn-lightgray">
<spring:message code="button.labe.add.more"/>
</a>
Work experience jsp:
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:forEach var="workExperience" items="${cv.workExperiences}" >
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.employer" /></label>
<div class="col-md-8">
<input value="${workExperience.employer}" id="employer" class="text block"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.period" /></label>
<div class="col-md-4">
<div class="datepicker">
<i class="fa fa-calendar"></i>
<input value="${workExperience.dateFrom}" class="text block date"/>
</div>
</div>
<div class="col-md-4">
<div class="datepicker">
<i class="fa fa-calendar"></i>
<input value="${workExperience.dateTo}" class="text date block"/>
</div>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.position" /></label>
<div class="col-md-8">
<input value="${workExperience.position}" id="position" type="text" class="text block"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.activities" /></label>
<div class="col-md-8">
<textarea class="textarea block">${workExperience.position}</textarea>
</div>
</div>
<div class="row">
<a class="editor_remove" href="#" onclick="AjaxUtils.submitAttribute('${pageContext.request.contextPath}/site/my-account/cv/delete/workExperience/${workExperience.tempId}');">
<i class="fa fa-times"></i>Remove
</a>
</div>
</c:forEach>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.employer" /></label>
<div class="col-md-8">
<form:errors id="employerError" path="workExperience.employer" cssClass="error"/>
<form:input path="workExperience.employer" id="employer" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.period"/></label>
<div class="col-md-4">
<form:errors path="workExperience.dateFrom" cssClass="error"/>
<div class="datepicker">
<i class="fa fa-calendar"></i>
<form:input path="workExperience.dateFrom" cssClass="text block date" cssErrorClass="text block date error" placeholder="From"/>
</div>
</div>
<div class="col-md-4">
<div class="datepicker">
<form:errors path="workExperience.dateTo" cssClass="error"/>
<i class="fa fa-calendar"></i>
<form:input path="workExperience.dateTo" cssClass="text date block" cssErrorClass="text date block error" placeholder="To"/>
</div>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.position" /></label>
<div class="col-md-8">
<form:errors path="workExperience.position" cssClass="error"/>
<form:input path="workExperience.position" id="position" type="text" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.activities" /></label>
<div class="col-md-8">
<form:errors path="workExperience.activities" cssClass="error"/>
<form:textarea path="workExperience.activities" cssClass="textarea block" cssErrorClass="textarea block error"/>
</div>
</div>
ajax function:
submitAttribute: function (url1,div){
$.ajax({
type: "POST",
url: url1,
data: $('#cv-template-form').serialize(),
cache: false,
success: function(data) {
$('#'+div).html(data);
Utils.Pikaday.init("input.date");
}
});
},
And education look like the workExperience jsp. Theoreticly I want to fill workExperience fields send it with ajax and put it in a workExperienceList and send back the list and a new workExperience. The problem is in ajax callback gives me an error cause he did not recognize the workExperience in workExperience.jsp.
This is the error:
SEVERE: Servlet.service() for servlet [spring-mvc-dispatcher] in context with path [/] threw exception [Request processing failed; nested exception is org.apache.tiles.request.render.CannotRenderException: ServletException including path '/WEB-INF/views/site/commons/cv/workExperience.jsp'.] with root cause
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'workExperience' available as request attribute
If i put a new form with commandName="cv" in workExperience.jsp it works fine but if I put in education that form to then he did not recognize first time, in java it comes null. I don`t want to put commandName="workExperience" in workExperience.jsp because if I want to save the big cv then he will not put the workExperience.jsp fields in cv object. Any solution?
I resolved it, its not so good but it is working fine I add a c:if if it is loaded first time with the big form then show it without workExperience form if it is returned from java the jsp page then show with workExperience form. Variable ajax is true just when the workExperience jsp page is returned from java. Now this is my workExperience form:
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="index" value="0"/>
<c:if test="${ajax == true}">
<form:form commandName="cv">
<c:forEach var="workExperience" items="${cv.workExperiences}" >
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.employer" /></label>
<div class="col-md-8">
<form:errors id="employerError" path="workExperiences[${index}].employer" cssClass="error"/>
<form:input path="workExperiences[${index}].employer" id="employer" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.period"/></label>
<div class="col-md-4">
<form:errors path="workExperiences[${index}].dateFrom" cssClass="error"/>
<div class="datepicker">
<i class="fa fa-calendar"></i>
<form:input path="workExperiences[${index}].dateFrom" cssClass="text block date" cssErrorClass="text block date error" placeholder="From"/>
</div>
</div>
<div class="col-md-4">
<div class="datepicker">
<form:errors path="workExperiences[${index}].dateTo" cssClass="error"/>
<i class="fa fa-calendar"></i>
<form:input path="workExperiences[${index}].dateTo" cssClass="text date block" cssErrorClass="text date block error" placeholder="To"/>
</div>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.position" /></label>
<div class="col-md-8">
<form:errors path="workExperiences[${index}].position" cssClass="error"/>
<form:input path="workExperiences[${index}].position" id="position" type="text" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.activities" /></label>
<div class="col-md-8">
<form:errors path="workExperiences[${index}].activities" cssClass="error"/>
<form:textarea path="workExperiences[${index}].activities" cssClass="textarea block" cssErrorClass="textarea block error"/>
</div>
</div>
<c:if test="${index < cv.workExperiences.size()-1 || cv.workExperiences[index].id != null}">
<a class="editor_remove" href="javascript:void(0);" onclick="AjaxUtils.submitAttribute('${pageContext.request.contextPath}/site/my-account/cv/delete/workExperience/${index}','workExperienceDiv');">
<i class="fa fa-times"></i><spring:message code="button.label.remove"/>
</a>
</c:if>
<c:set var="index" value="${index+1}"/>
</c:forEach>
</form:form>
</c:if>
<c:if test="${ajax != true}">
<c:forEach var="workExperience" items="${cv.workExperiences}" >
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.employer" /></label>
<div class="col-md-8">
<form:errors id="employerError" path="workExperiences[${index}].employer" cssClass="error"/>
<form:input path="workExperiences[${index}].employer" id="employer" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.period"/></label>
<div class="col-md-4">
<form:errors path="workExperiences[${index}].dateFrom" cssClass="error"/>
<div class="datepicker">
<i class="fa fa-calendar"></i>
<form:input path="workExperiences[${index}].dateFrom" cssClass="text block date" cssErrorClass="text block date error" placeholder="From"/>
</div>
</div>
<div class="col-md-4">
<div class="datepicker">
<form:errors path="workExperiences[${index}].dateTo" cssClass="error"/>
<i class="fa fa-calendar"></i>
<form:input path="workExperiences[${index}].dateTo" cssClass="text date block" cssErrorClass="text date block error" placeholder="To"/>
</div>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.position" /></label>
<div class="col-md-8">
<form:errors path="workExperiences[${index}].position" cssClass="error"/>
<form:input path="workExperiences[${index}].position" id="position" type="text" class="text block" cssErrorClass="text block error"/>
</div>
</div>
<div class="row">
<label class="col-md-4"><spring:message code="view.candidates.form.workExperience.activities" /></label>
<div class="col-md-8">
<form:errors path="workExperiences[${index}].activities" cssClass="error"/>
<form:textarea path="workExperiences[${index}].activities" cssClass="textarea block" cssErrorClass="textarea block error"/>
</div>
</div>
<c:if test="${index < cv.workExperiences.size()-1 || cv.workExperiences[index].id != null}">
<a class="editor_remove" href="javascript:void(0);" onclick="AjaxUtils.submitAttribute('${pageContext.request.contextPath}/site/my-account/cv/delete/workExperience/${index}','workExperienceDiv');">
<i class="fa fa-times"></i><spring:message code="button.label.remove"/>
</a>
</c:if>
<c:set var="index" value="${index+1}"/>
</c:forEach>
</c:if>