Ajax not working when I am trying to save data - java

When I press the save button ajax does not work.The page reloads.Here is my indx page and my Controller function.
URL is --- http://localhost:8082/spring-test/index
Controller
#RequestMapping(value = "/saveUser", method = RequestMethod.POST)
public String saveUser(#Valid #ModelAttribute("User") User user, BindingResult bindingResult,
ModelMap model, HttpServletRequest request, RedirectAttributes redirectAttrs) {
System.out.println("user: " + user.getUserId());
String type = request.getParameter("update") != null ? request.getParameter("update") : "";
String delete = request.getParameter("delete") != null ? request.getParameter("delete") : "";
if (type.equalsIgnoreCase("update") || delete.equalsIgnoreCase("delete")) {
User userDb = userService.getUserById(user.getUserId());
user.setUserId(userDb.getUserId());
}
if (bindingResult.hasErrors()) {
System.out.println("=====================error======================" + bindingResult.getFieldErrors());
return "index";
}
if (delete.equalsIgnoreCase("delete")) {
userService.deleteUser(user.getUserId());
} else {
userService.saveUser(user);
}
//model.clear();
model.clear();
return "redirect:/index";
}
index.html
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" class="no-js">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
$('#btnSave').click(function(e) {
var dataUser = $("#name").val();
var dataPass = $("#pwd").val();
var userDdata = {
"name": dateUser,
"pass": dataPass
}
$.ajax({
type: "POST",
url: "/spring-test/saveUser",
data: userData,
success: function(response) {
alert(1)
},
error: function(e) {
alert('Error: ' + e);
}
});
}
});
</script>
</head>
<body>
<div class="container col-sm-12 col-md-12" style="height:20px;background:#85a3e0;">
</div>
<div class="container col-sm-12 col-md-12">
<h3 class="text-center">Super Admin</h3>
<div class="col-md-4 col-sm-4" style="margin-left: 6%;">
<form class="form-horizontal" role="form" th:action="#{/saveUser}" th:object="${user}" method="post">
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Username:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" placeholder="Enter Name" th:field="*{userName}" />
<input type="hidden" th:field="*{userId}" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" th:field="*{password}" />
</div>
</div>
<div class="form-group">
<div class=" col-sm-12 text-right">
<button type="submit" class="btn btn-default" name="cancel" value="cancel">Cancel</button>
<button id="btnSave" type="submit" class="btn btn-primary" name="save" value="save">Save</button>
<button type="submit" class="btn btn-primary" name="update" value="update">Update</button>
<button type="submit" class="btn btn-primary" name="delete" value="delete">Delete</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Whats the problem here.
After adding the ajax function my dataTable is not appearing also.


Since you already have an action( th:action="#{/saveUser}") for the form submit, it will send the data directly, not via AJAX. In order to make it worked, you need to prevent this default behavior as like below.
$('#btnSave').click(function(e) {
e.preventDefault()
//Then do your stuff
});


It is not working because you have submit button and it directly submits the form.
What you can do it simply remove type="submit" from button and then try.
Vinod


Just try the below
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" class="no-js">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
$('#btnSave').click(function(e) {
var userData = $("#form1").serializeArray();
$.ajax({
type: "POST",
url: "/spring-test/saveUser",
data: userData,
success: function(response) {
alert(1)
},
error: function(e) {
alert('Error: ' + e);
}
});
}
});
</script>
</head>
<body>
<div class="container col-sm-12 col-md-12" style="height:20px;background:#85a3e0;">
</div>
<div class="container col-sm-12 col-md-12">
<h3 class="text-center">Super Admin</h3>
<div class="col-md-4 col-sm-4" style="margin-left: 6%;">
<form class="form-horizontal" role="form" id="form1" th:action="#{/saveUser}" th:object="${user}" method="post">
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Username:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" placeholder="Enter Name" th:field="*{userName}" />
<input type="hidden" th:field="*{userId}" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" th:field="*{password}" />
</div>
</div>
</form>
<div class="form-group">
<div class=" col-sm-12 text-right">
<button type="submit" class="btn btn-default" name="cancel" value="cancel">Cancel</button>
<button id="btnSave" type="button" class="btn btn-primary" name="save" value="save">Save</button>
<button type="submit" class="btn btn-primary" name="update" value="update">Update</button>
<button type="submit" class="btn btn-primary" name="delete" value="delete">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How to set a object's field using another objects field in thymeleaf

I'm trying to set boxes' elements copied from medicineBox's values like below. Can anyone help me in this. I need to post medicineOrder model to the controller
<tr th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
<input type="text" th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" th:value="${medicineBox.box.number}" />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
I'm using two object here -
medicine and medicineOrder
------------------> Controller method to get the page
#GetMapping("/{medicineId}")
public String loadMedicineDetailPage(#PathVariable("medicineId") long medicineId, Model model) {
model.addAttribute("medicine", service.getMedicineById(medicineId));
model.addAttribute("medicineOrder", new MedicineOrder());
return WebPages.MEDICINE_DETAIL.toString();
}
------------------> thymeleaf html page
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Spring Boot Application</title>
</head>
<body>
<div class="container">
<br/>
<a class="btn btn-primary" th:href="#{/mvc/medicine/list}">Back</a>
<br/>
<br/>
<h3 class="text-center alert alert-success">Medicine Details</h3>
<form class="row g-3" action="#" th:action="#{/mvc/medicine/sell}" method="post" th:object="${medicineOrder}">
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="name" class="form-label">Name</label>
<input type="text" style="background-color:#95edea" disabled class="form-control" id="name" th:field="${medicine.name}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="company" class="form-label">Company</label>
<input type="text" disabled class="form-control" id="company" th:field="${medicine.companyStringName}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="price" class="form-label">Price</label>
<input type="text" disabled class="form-control" id="price" th:field="${medicine.price}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="count" class="form-label">Count</label>
<input type="text" class="form-control" id="count" th:field="${medicine.count}"/>
</div>-->
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="volume" class="form-label">ML</label>
<input type="text" disabled class="form-control" id="volume" th:field="${medicine.volume}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="purchaseDate" class="form-label">Date Purchased</label>
<input type="text" disabled class="form-control" id="purchaseDate" th:field="${medicine.purchaseDate}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="boxNo" class="form-label">Box Number</label>
<input type="text" class="form-control" id="boxNo" th:field="${medicine.boxNumber}"/>
</div>-->
**<input type="hidden" th:field="*{medicineId}" th:value="${medicine.medicineId}"/>**
<table class="table table-bordered">
<tr class="table-primary">
<td>Box Number</td>
<td>Medicine Count</td>
<td>Sell Count</td>
</tr>
<tr th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
**<input type="text" th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" th:value="${medicineBox.box.number}"** />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
</table>
<button class="btn btn-primary" type="submit">Sell</button>
</form>
</div>
</body>
</html>
---------------> Controller method to handle the post request
#PostMapping("/sell")
public String sellMedicine(#ModelAttribute MedicineOrder medicineOrder, BindingResult bindingResult) {
if(bindingResult.hasErrors()){
// error handling
}
service.sellMedicine(medicineOrder);
return "redirect:/mvc/medicine/list";
}
----------------> Class MedicineOrder
package com.example.demo.dto;
import com.example.demo.model.Box;
import java.util.ArrayList;
import java.util.List;
public class MedicineOrder {
private long medicineId;
private List<OrderedBox> boxes = new ArrayList<>();
public long getMedicineId() {
return medicineId;
}
public void setMedicineId(long medicineId) {
this.medicineId = medicineId;
}
public List<OrderedBox> getBoxes() {
return boxes;
}
public void setBoxes(List<OrderedBox> boxes) {
this.boxes = boxes;
}
#Override
public String toString() {
return "MedicineOrder{" +
"medicineId=" + medicineId +
", boxes=" + boxes +
'}';
}
}
package com.example.demo.dto;
public class OrderedBox {
private String boxNumber;
private int medicineCount;
public String getBoxNumber() {
return boxNumber;
}
public void setBoxNumber(String boxNumber) {
this.boxNumber = boxNumber;
}
public int getMedicineCount() {
return medicineCount;
}
public void setMedicineCount(int medicineCount) {
this.medicineCount = medicineCount;
}
#Override
public String toString() {
return "OrderedBox{" +
"boxNumber='" + boxNumber + '\'' +
", medicineCount=" + medicineCount +
'}';
}
}
Not able to get the MedicineOrder.medicineId and medicineBorder.boxes[*].boxNumber from template to model object.

After lot of searching I didn't find any answer which is solving the issue only using thymeleaf.
To solve this issue I had to add two hidden input field for medicineId and boxNumber on medicineOrder object and populate those input field using javascript as below. Anyway if anyone find the solution by only using thymeleaf, please let me know.
Populated those fields using javascript
<script>
function function__02__number__assignment(_element){
var __element = _element.children[0];
var __tElement1 = __element.children[0];
var __tElement2 = __element.children[1];
// Copy value from 2 to 1
__tElement1.value = __tElement2.value;
}
function function__01__box_traverse(){
var rootElement = document.getElementsByClassName('box-stock-details');
for(var __i=0 ; __i < rootElement.length ; __i++) {
function__02__number__assignment(rootElement[__i]);
}
function_01_01_medicineId();
return true;
}
function function_01_01_medicineId(){
var _00_1_id_src = document.getElementById('00-1-id-src');
var _00_1_id_dest = document.getElementById('00-1-id-dest');
_00_1_id_dest.value = _00_1_id_src.value;
}
</script>
updated template file
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Spring Boot Application</title>
</head>
<body>
<div class="container">
<br/>
<a class="btn btn-primary" th:href="#{/mvc/medicine/list}">Back</a>
<br/>
<br/>
<h3 class="text-center alert alert-success">Medicine Details</h3>
<form class="row g-3" action="#" th:action="#{/mvc/medicine/sell}" method="post" th:object="${medicineOrder}">
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="name" class="form-label">Name</label>
<input type="text" style="background-color:#95edea" disabled class="form-control" id="name" th:field="${medicine.name}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="company" class="form-label">Company</label>
<input type="text" disabled class="form-control" id="company" th:field="${medicine.companyStringName}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="price" class="form-label">Price</label>
<input type="text" disabled class="form-control" id="price" th:field="${medicine.price}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="count" class="form-label">Count</label>
<input type="text" class="form-control" id="count" th:field="${medicine.count}"/>
</div>-->
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="volume" class="form-label">ML</label>
<input type="text" disabled class="form-control" id="volume" th:field="${medicine.volume}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="purchaseDate" class="form-label">Date Purchased</label>
<input type="text" disabled class="form-control" id="purchaseDate" th:field="${medicine.purchaseDate}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="boxNo" class="form-label">Box Number</label>
<input type="text" class="form-control" id="boxNo" th:field="${medicine.boxNumber}"/>
</div>-->
<!-- Hidden input to get the value of medicineId from Medicine object -->
<input id="00-1-id-src" type="hidden" th:value="${medicine.medicineId}"/>
<!-- Hidden input to set the medicineId on MedicineOrder object -->
<input id="00-1-id-dest" type="hidden" th:field="*{medicineId}" />
<table class="table table-bordered">
<tr class="table-primary">
<td>Box Number</td>
<td>Medicine Count</td>
<td>Sell Count</td>
</tr>
<tr class="box-stock-details" th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
<input hidden th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" />
<input disabled class="form-control" type="text" th:value="${medicineBox.box.number}" />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
</table>
<button class="btn btn-primary" type="submit" onclick="return function__01__box_traverse()">Sell</button>
</form>
</div>
</body>
<script>
function function__02__number__assignment(_element){
var __element = _element.children[0];
var __tElement1 = __element.children[0];
var __tElement2 = __element.children[1];
// Copy value from 2 to 1
__tElement1.value = __tElement2.value;
}
function function__01__box_traverse(){
var rootElement = document.getElementsByClassName('box-stock-details');
for(var __i=0 ; __i < rootElement.length ; __i++) {
function__02__number__assignment(rootElement[__i]);
}
function_01_01_medicineId();
return true;
}
function function_01_01_medicineId(){
var _00_1_id_src = document.getElementById('00-1-id-src');
var _00_1_id_dest = document.getElementById('00-1-id-dest');
_00_1_id_dest.value = _00_1_id_src.value;
}
</script>
</html>

Add dynamically radio button to JSP Form

I was trying to add dynamically extra fields to a Form. However only text/number fields are getting created as expected. The radio buttons got created but the choose list is being shared with all the objects. Also notice Im closing the FORM after the script close otherwise path FORM input will throw and error. rAny idea what Im missing? Thank you in advance.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-5 p-1">
<form:form method="POST" modelAttribute="investmentForm" class="p-4">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="form-group">
<label><h5><b>Invoice ID</b></h5></label>
<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />
</div>
<div class="form-group">
<label><h5><b>Amount</b></h5></label>
<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>
</div>
<label><h5><b>Currency</b></h5></label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>
</label>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
<button type="submit" class="btn mt-4 btn-block p-2 btn-success shadowed">Invest!</button>
<script type="text/javascript">
// add row
var counter = 1;
$("#addRow").click(function () {
counter += 1;
var html ='<div id="inputFormRow">'
+'<div class="form-group">'
+'<label><h5><b>Invoice ID</b></h5></label>'
+'<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />'
+'</div>'
+'<div class="form-group">'
+'<label><h5><b>Amount</b></h5></label>'
+'<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>'
+'</div>'
+ '<div class="form-group">'
+'<label><h5><b>Currency</b></h5></label>'
+'<div class="form-check form-check-inline">'
+'<label class="form-check-label">'
+'<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>'
+'</label>'
+'</div>'
+'<div class="input-group-append">'
+'<button id="removeRow" type="button" class="btn btn-danger">Remove</button>'
+'</div>'
+'</div>'
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
</form:form>

Sending data(Objects) from Servlet to BootStrap Modal in the same page of JSP

In my application built on Java, JSP with BootStrap, and Servlet, there is the issue to send the data from Servlet to BootStrap Modal.
Based on my project, a user clicks the 'check button' in each table container and that table_id is caught in javascript and send it to Servlet with that value. Then Servlet operates on grabbing the data from the database based on its table_id. The result(orders in the code and results are displayed properly when printing out them) of the operation needed to send to the BootStrap modal section.
TableMonitor.jsp
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Migarock Table Monitoring System</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/pricing/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="pricing.css" rel="stylesheet">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="./css/tableMonitor.css" rel="stylesheet">
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
</head>
<body>
<!--
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h3 class="my-0 mr-md-auto font-weight-normal">Migarock Table Monitoring System</h3>
<a class="btn btn-outline-primary" href="#">Lock</a>
</div> -->
<div class="row">
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center ">
<div class="card mb-4 box-shadow ">
<div class="card-header status1">
<h3 class="my-0 font-weight-normal ">
<strong>Table_01</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="1">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_02</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="2">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header status2">
<h3 class="my-0 font-weight-normal">
<strong>Table_03</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="3">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_04</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="4">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_05</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="5">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow ">
<div class="card-header status3">
<h3 class="my-0 font-weight-normal">
<strong>Table_06</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="6">Check</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tableModal" tabindex="1" role="dialog"
aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal">Table Status</h2>
<button type="button" class="close" data-dismiss="modal"
aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="controlBar">
<div class="row">
<div class="col-8" style="text-align: left;">
<button type="button" class="btn btn-outline-success btn-lg"
data-dismiss="modal">Add item</button>
<button type="button" class="btn btn-outline-secondary btn-lg"
data-dismiss="modal">Change Status</button>
</div>
<div class="col-4" style="text-align: right; padding-right: 10%;">
<button type="button" class="btn btn-outline-warning btn-lg"
data-dismiss="modal">Help</button>
<button type="button" class="btn btn-outline-info btn-lg"
data-dismiss="modal">Bill</button>
</div>
</div>
<div>
<div class="modal-body">
<h3>My name is ${test}</h3>
<!-- <form action="./evaluationRegisterAction.jsp" method="post"> -->
<div class="scrollbar scrollbar-primary">
<!-- <div> -->
<table class="table">
<thead>
<tr style="text-align: center;">
<th scope="col"><input type="checkbox"
class="select-all checkbox" name="select-all" /></th>
<th scope="col">OrderTime</th>
<th scope="col">Item</th>
<th scope="col">QTY</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<c:out value="${requestScope.orders}">
<c:forEach items="${orders}" var="order">
<tr style="text-align: center;">
<td style="text-align: center;">
<div class="form-check">
<input type="checkbox" class="select-item checkbox"
name="select-item">
</div>
</td>
<td><span id="orders"></span> ${order.getTimeStamp()}</td>
<td>{order.getOrderItem()}</td>
<td>{order.getOrderQty()}</td>
<td>{order.getOrderPrice()}</td>
<td>{order.getOrderStatus()}</td>
<td><a class="btn btn-light btn-sm mx-1 mt-2"
data-toggle="modal" href="#changeStatus">Ordered</a> <!-- <a class="btn btn-dark btn-sm mx-1 mt-2" data-toggle="modal"
href="#changeStatus">Delivered</a> -->
</td>
</tr>
</c:forEach>
</c:out>
</tbody>
</table>
</div>
</div>
<div>
<table class="table">
<tr style="text-align: center;">
<td colspan="3">
<h4>Total</h4>
</td>
<td colspan="3">
<h4>(total)</h4>
</td>
</tr>
</table>
</div>
<div class="controlBar">
<div class="row">
<div class="col-6" style="text-align: left;">
<button type="button" class="btn btn-danger btn-lg"
data-dismiss="modal">Close Session</button>
</div>
<div class="col-6"
style="text-align: right; padding-right: 10%;">
<button type="button" class="btn btn-outline-danger btn-lg"
data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top"> </footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script>
window.jQuery
|| document
.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
Holder.addTheme('thumb', {
bg : '#55595c',
fg : '#eceeef',
text : 'Thumbnail'
});
</script>
<script>
$(function() {
//button select all or cancel
$("#select-all").click(function() {
var all = $("input.select-all")[0];
all.checked = !all.checked
var checked = all.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//button select invert
$("#select-invert").click(function() {
$("input.select-item").each(function(index, item) {
item.checked = !item.checked;
});
checkSelected();
});
//button get selected info
$("#selected").click(
function() {
var items = [];
$("input.select-item:checked:checked").each(
function(index, item) {
items[index] = item.value;
});
if (items.length < 1) {
alert("no selected items!!!");
} else {
var values = items.join(',');
console.log(values);
var html = $("<div></div>");
html.html("selected:" + values);
html.appendTo("body");
}
});
//column checkbox select all or cancel
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//check selected items
$("input.select-item").click(function() {
var checked = this.checked;
console.log(checked);
checkSelected();
});
//check is all selected
function checkSelected() {
var all = $("input.select-all")[0];
var total = $("input.select-item").length;
var len = $("input.select-item:checked:checked").length;
console.log("total:" + total);
console.log("len:" + len);
all.checked = len === total;
}
});
$('#tableModal')
.on(
'show.bs.modal',
function(e) {
var tableID = $(e.relatedTarget).data('table-id');
console.log("test: ", tableID)
$(e.currentTarget).find('input[name="tableID"]')
.val(tableID);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("response").value = xhttp.responseText;
}
};
xhttp.open("POST", "TableMonitor", true);
xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhttp.send("tableId=" + tableID);
var orders = $(this).data('orders');
$('#orders').html(orders);
});
</script>
</body>
</html>
TableMonitor.java(Servlet)
package servlets;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import brokers.TableBrokder;
import model.Order;
/**
* Servlet implementation class TableMonitor
*/
#WebServlet("/TableMonitor")
public class TableMonitor extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* #see HttpServlet#HttpServlet()
*/
public TableMonitor() {
super();
// TODO Auto-generated constructor stub
}
/**
* #see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
getServletContext().getRequestDispatcher("/TableMonitor.jsp").forward(request, response);
}
/**
* #see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String table_id = request.getParameter("tableId");
String action = request.getParameter("action");
System.out.println("servlet: " + table_id);
List<Order> orders = null;
TableBrokder tb = new TableBrokder();
try {
orders = tb.getOrderAll(Integer.parseInt(table_id));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
}
for (int i = 0; i < orders.size(); i++) {
orders.get(i).toString();
}
// response.sendRedirect("TableMonitor");
RequestDispatcher dispatcher = request.getRequestDispatcher("/TableMonitor.jsp");
request.setAttribute("orders", orders);
request.setAttribute("test", "test");
dispatcher.forward(request, response);
}
}
Even though I google it but didn't get clear answers. Could you help me with this issue?

Looks like you are making an ajax call in your js but in your servlet you are not returning the response. I highly recommend checking out this answer on how to make ajax calls with servlets.
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String table_id = request.getParameter("tableId");
String action = request.getParameter("action");
System.out.println("servlet: " + table_id);
List<Order> orders = null;
TableBrokder tb = new TableBrokder();
try {
orders = tb.getOrderAll(Integer.parseInt(table_id));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
}
for (int i = 0; i < orders.size(); i++) {
orders.get(i).toString();
}
//convert your list of orders to json
String json = new Gson().toJson(orders);
//add json to response
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
When you make ajax calls you won't be able to do things like this:
request.setAttribute("orders", orders);
request.setAttribute("test", "test");
Because when you call this servlet url through ajax, you are not loading the jsp page again so the HttpServletRequest won't be passed to the jsp page. Hope this helps understand it some more.

Spring Web Mvc jQuery AJAX call with post not bidinding from with #ModelAttribute

I am trying to send an AJAX call with jquery to a spring web mvc application. I have a modal which contains a form:
<div id="editTileModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<form id="frmEditTileModal" modelAttribute="editTile" class="floating-labels " action="/DESSOApplicationPortalAdmin/rest/tile/002" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Edit Tile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6" >
<div class="form-group m-b-40 margin-top-20">
<input type="text" class="form-control" id="editTileId" name="id" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileId">Id</label>
</div>
<div class="form-group m-b-40">
<input type="text" class="form-control" id="editTileDescription" name="description" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileDescription">Description</label>
</div>
<div class="form-group m-b-40">
<input type="text" class="form-control" id="editTileRole" name="role" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileRole">Role</label>
</div>
</div>
<div class="col-md-6" >
<div class="form-group m-b-40 margin-top-20">
<input type="text" class="form-control" id="editTileTarget" name="target" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileTarget">Target</label>
</div>
<div class="form-group m-b-40">
<input type="text" class="form-control" id="editTileIndex" name="index" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileIndex">Index</label>
</div>
<div class="form-group m-b-40">
<input type="text" class="form-control" id="editTileTileimagename" name="tileImageName" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileTileimagename">Tile Image Name</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-b-40">
<input type="text" class="form-control" id="editTileUrl" name="url" required><span class="highlight"></span> <span class="bar"></span>
<label for="editTileUrl">Url</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-b-40 form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Disable Tile</span>
</label>
</div>
</div>
<div class="row>">
<div class="col-sm-6 col-md-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">Tile Image Normal</h3>
<label for="img-tile-normal">You can add a default value</label>
<input type="file" id="img-tile-normal" class="dropify" data-default-file="resources/vendor/plugins/bower_components/dropify/src/images/test-image-1.jpg" />
</div>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">Tile Image on Hover</h3>
<label for="img-tile-on-hover">You can add a default value</label>
<input type="file" id="img-tile-on-hover" class="dropify" data-default-file="resources/vendor/plugins/bower_components/dropify/src/images/test-image-1.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button id="btnSaveEditTile" type="submit" class="btn btn-danger waves-effect waves-light">Save changes</button>
</div>
</div>
</form>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
This is the jQuery
$('#frmEditTileModal').submit(function (e) {
e.preventDefault();
alert("save edit start!");
var editSuccesFunc = function () {
alert('Success Edit!');
};
var editErrorFunc = function () {
alert('Error Edit!');
};
var tileId = $('#editTileId').val();
alert("data to send: " + $('#editTileId').val());
var formData = new FormData();
formData.append("id", $('#editTileId').val());
formData.append("description", $('#editTileDescription').val());
formData.append("role", $('#editTileRole').val());
$.ajax({
type: "POST",
url: "/DESSOApplicationPortalAdmin/rest/tile/" + tileId,
data: $('#frmEditTileModal').serialize(),
contentType: "application/json",
dataType: "json",
success: editSuccesFunc,
error: editErrorFunc
});
});
and this is the java controller:
#RestController
#RequestMapping(value = "rest/tile")
public class TileRestController {
#Autowired
TileService tileService;
#RequestMapping(value = "/{tileId}", method = RequestMethod.GET)
public Tile getProductById(#PathVariable(value = "tileId") String tileId) {
System.out.println("------------->" + this.getClass().getSimpleName() + ": getProductById called. Searching for Tile Id " + tileId);
return tileService.getTileById(tileId);
}
#RequestMapping(value = "/{tileId}", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE })
#ResponseBody
public Tile update( #ModelAttribute("editTile") Tile tile, #PathVariable(value = "tileId") String tileId) {
Tile updatedTile = new Tile();
//updatedTile.setId("099");
//updatedTile.setDescription("ExampleTile");
System.out.println("------------->" + this.getClass().getSimpleName() + " update method: print object fields: "+tile.toString());
return updatedTile;
//return tileService.updateTile(tile);
}
}
When I try a doing a normal submit (no ajax or jquery) the controller correctly reads the field to the object.
However when, I try doing the same as an ajax call, it correctly sends the data but the controllers does not map it to an object via modelAttribute("editTile"). Here is a print of the class:
------------->TileRestController update method: print object fields: Tile{ tileImageName=null, description=null, role=null, url=null, target=null, index=0, id=null, disabled=false}
Am I missing something?
EDIT:
I tried a suggestion made in the answers, but it did not seem to work. Here is what I did:
I change the code of the update method in order to use the #RequestBody annotation
#RequestMapping(value = "/{tileId}", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE })
#ResponseBody
public Tile update( #RequestBody Tile tile, #PathVariable(value = "tileId") String tileId) {
Tile updatedTile = new Tile();
//updatedTile.setId("099");
//updatedTile.setDescription("ExampleTile");
System.out.println("------------->" + this.getClass().getSimpleName() + " update method: print object fields: "+tile.toString());
return updatedTile;
//return tileService.updateTile(tile);
}
plus, I changed my content type as well for the ajax call:
$.ajax({
type: "POST",
url: "/DESSOApplicationPortalAdmin/rest/tile/" + tileId,
data: $('#frmEditTileModal').serialize(),
contentType: "application/www-form-url-encoded",
dataType: "json",
success: editSuccesFunc,
error: editErrorFunc
});
however, now I get an ajax error, it it does not even make the call:

You seem to be Posting a JSON (content-type: application/json) from ajax.
Try using #RequestBody instead of #ModelAttribute for the Tile.
A FORM post normally gets post'ed as content-type: application/www-form-url-encoded.

Freemarker wrong page view

I meet a problem.
I download Bootstrap design for my project. When I unzip design to package and run a page everything is displayed correctly.
Then I copy html's pages and resources(css, js, images) to my project. Then I refactor index.html to index.ftl and run my project, the index page displayed a wrong view.
I haven't got any errors and warnings in Console and Network(in Chrome).
Freemarker can't displayed page correctly?
MainController.java
#Controller
public class MainController {
#Autowired
CategoryService categoryService;
#RequestMapping("/")
public String home() {
return "redirect:/index";
}
#RequestMapping("/index")
public String showIndex(Model model) {
model.addAttribute("categories", categoryService.getAllMainCategories());
return "index";
}
}
index.html (and .ftl)
<!DOCTYPE html>
<html>
<head>
<title>Grocery Store | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="agileits_header">
<div class="w3l_offers">
Today's special Offers !
</div>
<div class="w3l_search">
<form action="#" method="post">
<input type="text" name="Product" value="Search a product..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search a product...';}" required="">
<input type="submit" value=" ">
</form>
</div>
<div class="product_list_header">
<form action="#" method="post" class="last">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="display" value="1" />
<input type="submit" name="submit" value="View your cart" class="button" />
</fieldset>
</form>
</div>
<div class="w3l_header_right">
<ul>
<li class="dropdown profile_details_drop">
<i class="fa fa-user" aria-hidden="true"></i><span class="caret"></span>
<div class="mega-dropdown-menu">
<div class="w3ls_vegetables">
<ul class="dropdown-menu drp-mnu">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="w3l_header_right1">
<h2>Contact Us</h2>
</div>
<div class="clearfix"> </div>
</div>
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".agileits_header").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".agileits_header").addClass("fixed");
}else{
$(".agileits_header").removeClass("fixed");
}
});
});
</script>
<!-- //script-for sticky-nav -->
<div class="logo_products">
<div class="container">
<div class="w3ls_logo_products_left">
<h1><span>Grocery</span> Store</h1>
</div>
<div class="w3ls_logo_products_left1">
<ul class="special_items">
<li>Events<i>/</i></li>
<li>About Us<i>/</i></li>
<li>Best Deals<i>/</i></li>
<li>Services</li>
</ul>
</div>
<div class="w3ls_logo_products_left1">
<ul class="phone_email">
<li><i class="fa fa-phone" aria-hidden="true"></i>(+0123) 234 567</li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i>store#grocery.com</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner">
<div class="w3l_banner_nav_left">
<nav class="navbar nav_bottom">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header nav_2">
<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul class="nav navbar-nav nav_1">
<li>Branded Foods</li>
<li>Households</li>
<li class="dropdown mega-dropdown active">
Veggies & Fruits<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</div>
</div>
</li>
<li>Kitchen</li>
<li>Short Codes</li>
<li class="dropdown">
Beverages<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Soft Drinks</li>
<li>Juices</li>
</ul>
</div>
</div>
</li>
<li>Pet Food</li>
<li class="dropdown">
Frozen Foods<span class="caret"></span>
<div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
<div class="w3ls_vegetables">
<ul>
<li>Frozen Snacks</li>
<li>Frozen Nonveg</li>
</ul>
</div>
</div>
</li>
<li>Bread & Bakery</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="w3l_banner_nav_right">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="w3l_banner_nav_right_banner">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
<li>
<div class="w3l_banner_nav_right_banner1">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
<li>
<div class="w3l_banner_nav_right_banner2">
<h3>upto <i>50%</i> off.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- flexSlider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- //flexSlider -->
</div>
<div class="clearfix"></div>
</div>
<!-- banner -->
<div class="banner_bottom">
<div class="wthree_banner_bottom_left_grid_sub">
</div>
<div class="wthree_banner_bottom_left_grid_sub1">
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/4.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_bottom_left_grid_pos">
<h4>Discount Offer <span>25%</span></h4>
</div>
</div>
</div>
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/5.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_btm_pos">
<h3>introducing <span>best store</span> for <i>groceries</i></h3>
</div>
</div>
</div>
<div class="col-md-4 wthree_banner_bottom_left">
<div class="wthree_banner_bottom_left_grid">
<img src="images/6.jpg" alt=" " class="img-responsive" />
<div class="wthree_banner_btm_pos1">
<h3>Save <span>Upto</span> $10</h3>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- top-brands -->
<div class="top-brands">
<div class="container">
<h3>Hot Offers</h3>
<div class="agile_top_brands_grids">
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="tag"><img src="images/tag.png" alt=" " class="img-responsive" /></div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block" >
<div class="snipcart-thumb">
<img title=" " alt=" " src="images/1.png" />
<p>fortune sunflower oil</p>
<h4>$7.99 <span>$10.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="checkout.html" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Fortune Sunflower Oil" />
<input type="hidden" name="amount" value="7.99" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block" >
<div class="snipcart-thumb">
<img title=" " alt=" " src="images/3.png" />
<p>basmati rise (5 Kg)</p>
<h4>$11.99 <span>$15.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="basmati rise" />
<input type="hidden" name="amount" value="11.99" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="images/2.png" alt=" " class="img-responsive" />
<p>Pepsi soft drink (2 Ltr)</p>
<h4>$8.00 <span>$10.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Pepsi soft drink" />
<input type="hidden" name="amount" value="8.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="images/4.png" alt=" " class="img-responsive" />
<p>dogs food (4 Kg)</p>
<h4>$9.00 <span>$11.00</span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="dogs food" />
<input type="hidden" name="amount" value="9.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //top-brands -->
<!-- fresh-vegetables -->
<div class="fresh-vegetables">
<div class="container">
<h3>Top Products</h3>
<div class="w3l_fresh_vegetables_grids">
<div class="col-md-3 w3l_fresh_vegetables_grid w3l_fresh_vegetables_grid_left">
<div class="w3l_fresh_vegetables_grid2">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i>All Brands</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Vegetables</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Fruits</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Juices</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Pet Food</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Bread & Bakery</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Cleaning</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Spices</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Dry Fruits</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Dairy Products</li>
</ul>
</div>
</div>
<div class="col-md-9 w3l_fresh_vegetables_grid_right">
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<img src="images/8.jpg" alt=" " class="img-responsive" />
</div>
</div>
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<div class="w3l_fresh_vegetables_grid1_rel">
<img src="images/7.jpg" alt=" " class="img-responsive" />
<div class="w3l_fresh_vegetables_grid1_rel_pos">
<div class="more m1">
Shop now
</div>
</div>
</div>
</div>
<div class="w3l_fresh_vegetables_grid1_bottom">
<img src="images/10.jpg" alt=" " class="img-responsive" />
<div class="w3l_fresh_vegetables_grid1_bottom_pos">
<h5>Special Offers</h5>
</div>
</div>
</div>
<div class="col-md-4 w3l_fresh_vegetables_grid">
<div class="w3l_fresh_vegetables_grid1">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="w3l_fresh_vegetables_grid1_bottom">
<img src="images/11.jpg" alt=" " class="img-responsive" />
</div>
</div>
<div class="clearfix"> </div>
<div class="agileinfo_move_text">
<div class="agileinfo_marquee">
<h4>get <span class="blink_me">25% off</span> on first order and also get gift voucher</h4>
</div>
<div class="agileinfo_breaking_news">
<span> </span>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //fresh-vegetables -->
<!-- newsletter -->
<div class="newsletter">
<div class="container">
<div class="w3agile_newsletter_left">
<h3>sign up for our newsletter</h3>
</div>
<div class="w3agile_newsletter_right">
<form action="#" method="post">
<input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
<input type="submit" value="subscribe now">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //newsletter -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-3 w3_footer_grid">
<h3>information</h3>
<ul class="w3_footer_grid_list">
<li>Events</li>
<li>About Us</li>
<li>Best Deals</li>
<li>Services</li>
<li>Short Codes</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>policy info</h3>
<ul class="w3_footer_grid_list">
<li>FAQ</li>
<li>privacy policy</li>
<li>terms of use</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>what in stores</h3>
<ul class="w3_footer_grid_list">
<li>Pet Food</li>
<li>Frozen Snacks</li>
<li>Kitchen</li>
<li>Branded Foods</li>
<li>Households</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>twitter posts</h3>
<ul class="w3_footer_grid_list1">
<li><label class="fa fa-twitter" aria-hidden="true"></label><i>01 day ago</i><span>Non numquam http://sd.ds/13jklf#
eius modi tempora incidunt ut labore et
http://sd.ds/1389kjklf#quo nulla.</span></li>
<li><label class="fa fa-twitter" aria-hidden="true"></label><i>02 day ago</i><span>Con numquam http://fd.uf/56hfg#
eius modi tempora incidunt ut labore et
http://fd.uf/56hfg#quo nulla.</span></li>
</ul>
</div>
<div class="clearfix"> </div>
<div class="agile_footer_grids">
<div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
<div class="w3_footer_grid_bottom">
<h4>100% secure payments</h4>
<img src="images/card.png" alt=" " class="img-responsive" />
</div>
</div>
<div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
<div class="w3_footer_grid_bottom">
<h5>connect with us</h5>
<ul class="agileits_social_icons">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="wthree_footer_copy">
<p>© 2016 Grocery Store. All rights reserved | Design by W3layouts</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
</script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<script src="js/minicart.js"></script>
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var items = this.items(),
len = items.length,
total = 0,
i;
// Count the number of each item in the cart
for (i = 0; i < len; i++) {
total += items[i].get('quantity');
}
if (total < 3) {
alert('The minimum order quantity is 3. Please add more to your shopping cart before checking out');
evt.preventDefault();
}
});
</script>
</body>
</html>
Images hosting:
link html page view (correct)
https://ibb.co/frTcaw
ling ftl page view (wrong)
https://ibb.co/fLUpoG
project structure:
-web app
-css
-js
-fonts
-images
-WEB-INF
-view
-ftl
index.ftl
Paths to css, fonts and js in ftl page is true.
How can I make a correct view?

Categories