In my other question, I described a little my form: wicket 1.5 not found error message
Not I'm trying to do little thing: highlighting an input on error in AjaxSubmit. The code looks like this:
add( new AjaxSubmitLink( "save", this )
{
private static final long serialVersionUID = 1L;
#Override
protected void onSubmit( AjaxRequestTarget target, Form<?> form )
{
user.setCryptedPassword( CypherUtil.encodeMd5( getNewPassword() ) );
userManager.saveOrUpdate( user );
// close popup
modalWindow.close( target );
}
#Override
protected void onError( AjaxRequestTarget target, Form<?> form )
{
/**
* Do podswietlania formow
*/
String jQueryString = "";
if( oldPassFeedbackPanel.anyErrorMessage() )
{
jQueryString += "jQuery('mp-oldpass').css({ 'background' : '#E41D1D' });";
}
if( newPassFeedbackPanel.anyErrorMessage() )
{
jQueryString += "jQuery('mp-newpass').css({ 'background' : '#E41D1D' });";
}
if( newPassRepeatFeedbackPanel.anyErrorMessage() )
{
jQueryString += "jQuery('mp-newpassrepeat').css({ 'background' : '#E41D1D' });";
}
target.appendJavaScript( jQueryString );
target.add( oldPassFeedbackPanel );
target.add( newPassFeedbackPanel );
target.add( newPassRepeatFeedbackPanel );
}
} );
It returns error message for the form, but even though the javascript is appended (Wicket Ajax Debug console shows it it appended) the background of inputs is not changed, any idea why? The HTML part of the code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body class="stats-popup-body">
<div class="stats-popup" id="car-info-edit-popup">
<p class="popup_title"> Edytuj Profilu </p>
<form wicket:id="profileModifyForm" class="stats-popup-form">
<div>
<label class="popup_field_label">Stare hasło:</label>
<input id="mp-oldpass" type="password" wicket:id="mp-oldpass" />
<span class="old_pass_error" wicket:id="mp-oldpass-error" />
</div>
<div class="clear9"></div>
<div>
<label class="popup_field_label">Nowe hasło:</label>
<input id="mp-newpass" type="password" wicket:id="mp-newpass" />
<span class="new_pass_error" wicket:id="mp-newpass-error" />
</div>
<div class="clear9"></div>
<div>
<label class="popup_field_label">Powtórz nowe hasło:</label>
<input id="mp-newpassrepeat" type="password" wicket:id="mp-newpassrepeat" />
<span class="new_pass_repeat_error" wicket:id="mp-newpassrepeat-error" />
</div>
<div class="clear9"></div>
<div class="clear1"></div>
<div class="button-box-bottom">
<input class="btn btn_save" style="margin-right: 9px;"
wicket:id="save" type="button" value="Zatwierdź"
onmousemove="this.className='btn btn_save btn_hover'"
onmouseout="this.className='btn btn_save'" />
<input
class="btn btn_cancel" wicket:id="cancel"
value="Anuluj" type="button"
onmousemove="this.className='btn btn_cancel btn_hover'"
onmouseout="this.className='btn btn_cancel'" />
</div>
<div class="stats-popup-close-x" wicket:id="close-x"></div>
</form>
</div>
</body>
</html>
Related
I want to edit exist data from database via html-form with field. But I can not create a right controller for it, because this code just created a new book. Old data was not changed.
Controller
#GetMapping("/bookUpdate/{id}")
public String bookListUpdate(#PathVariable (value = "id") Integer id, Model model, #Valid
BookDto book) {
model.addAttribute("book", service.findById(id));
return "views/bookUpdate";
}
#PostMapping("/edit")
public String editBook(#Valid Book book, #PathVariable (value = "id") Integer id) {
Book newBook = service.findById(id);
newBook.setDescription(book.getDescription());
newBook.setTopic(book.getTopic());
newBook.setLink(book.getLink());
service.saveBook(newBook);
return "views/index";
}
BookUpdate
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<head>
<title>Book Form</title>
</head>
<body>
<div layout:fragment="content" class="container mySpace">
<form th:action="#{/edit}" th:object="${book}" method="post">
<div class="form-group">
<label for="topic" class="form-control-label">Topic</label> <input
type="text" class="form-control" th:field="*{topic}" id="topic" />
</div>
<div class="form-group">
<label for="description" class="form-control-label">Description</label>
<textarea class="form-control" th:field="*{description}"
id="description" style="height: 95px"></textarea>
</div>
<div class="form-group">
<label for="link" class="form-control-label">Link</label><a href=""> <input
type="text" class="form-control" th:field="*{link}" id="link" />
</div>
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div>
</body>
</html>
Your #PostMapping is missing the path variable:
#PostMapping("/edit")
Do something like:
#PostMapping("/edit/{id}")
On a side note, you can make your URLs a bit nicer, by using something like #GetMapping("/books/{id}") and #PostMapping("/books/{id}").
I want to edit data from database via form "bookUpdate.html", that I can open from page "bookList.html" with the list of all rows from the table. I created a controller and form, that redirect me to the page with filled fields, that contain right data according the value "id", where object = "book". Button "Edit" redirect me to the page "/bookUpdate/1?", it is right. But when I try to confirm a new information via button on this page, this action redirect me to "bookUpdate.html" with an error 404, and new data were not saved in database. I can not find a mistake in this case.
bookUpdate.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<head>
<title>Book Form</title>
</head>
<body>
<div layout:fragment="content" class="container mySpace">
<form th:action="#{/bookUpdate}" th:object="${book}" method="post">
<div class="form-group">
<label for="topic" class="form-control-label">Topic</label> <input
type="text" class="form-control" th:value="${book.topic}"
id="topic" />
</div>
<div class="form-group">
<label for="description" class="form-control-label">Description</label>
<textarea class="form-control" th:value="${book.description}"
id="description" style="height: 95px"></textarea>
</div>
<div class="form-group">
<label for="link" class="form-control-label">Link</label> <input
type="text" class="form-control" th:value="${book.link}" id="link" />
</div>
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div>
</body>
</html>
Contoller
#Controller
public class BookUpdateController {
#Autowired
private BookService service;
#PostMapping("/bookUpdate/{id}")
public String editBook(#Valid BookDto book, #PathVariable (value = "id") Integer id, Model
model) {
Book oldBook = service.findById(id);
oldBook.setDescription(book.getDescription());
oldBook.setTopic(book.getTopic());
oldBook.setLink(book.getLink());
service.saveBook(oldBook);
model.addAttribute("book", new BookDto());
return "redirect:/bookList";
}
}
#GetMapping("/bookUpdate/{id}")
public String bookListUpdate(#PathVariable (value = "id") Integer id, Model model) {
model.addAttribute("book", service.findById(id));
return "views/bookUpdate";
}
bookList.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<head>
<title>Books</title>
</head>
<body>
<div layout:fragment="content" class="container mySpace">
<form action="/bookList" class="form-inline">
<div class="form-group mb-2" >
<input type="text" class="form-control" name="name"
placeholder="Search book" /> <input type="submit" value="Search"
class="btn btn-primary" />
</div>
</form>
<div class="card">
<div class="card card-body">
<ul th:each="books:${book}" style="list-style: none; padding-left: 10px;">
<li><b>Topic:</b> <span th:text="${books.topic}"></span></li>
<li><b>Description:</b><p th:text="${books.description}"></p></li>
<li><b>Link:</b> <span th:text="${books.link}"></span></li>
<br>
<form class="form-inline my-2 my-lg-0"
th:action="#{'/bookUpdate/'+${books.id}}" th:object="${books}" method="get">
<input class="form-control mr-sm-2" type="hidden" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit"
>Edit</button>
</form>
<hr>
</ul>
</div>
</div>
</div>
</body>
</html>
In your bookUpdate.html file, the action property is not set correctly. Your form after posting send information to #{/bookUpdate} but in related controller, defined PostMapping required #PostMapping("/bookUpdate/{id}") and they are mismach.
Change your form action property to :
<form th:action="#{'/bookUpdate/'+${book.id}}" th:object="${book}" method="post">
I am working on a Spring web project , I have many JSP files and many controllers , but I am not able to grab how this
<form:form action="updateCustomer" autocomplete="true" commandName="customer">
form is automatically mapped to the respective controller in which the updateCustomer is defined. There are other controllers also but how exactly the url updateCustomer goes to respective controller.
The Customer.jsp file is as follows :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="${pageContext.request.contextPath}/static/css/bootstrap-nav-wizard.css"
rel="stylesheet">
<link
href="${pageContext.request.contextPath}/static/css/intlTelInput.css"
rel="stylesheet">
<style>
ul.nav-wizard li a i {
margin-right: 15px;
}
</style>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/static/js/flickity.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.fancybox.pack.js"></script>
<script src="${pageContext.request.contextPath}/static/js/waypoints.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/custom/customer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jqueryform-validator.js"></script>
<script src="${pageContext.request.contextPath}/static/js/custom/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/intlTelInput.min.js"></script>
</head>
<body>
<form:form action="updateCustomer" autocomplete="true" commandName="customer">
<form:hidden path="buyerId"/>
<form:hidden path="user.userId" />
<section>
<div class="container" style="margin-top: 10px;">
<div class="row">
<h3 class="main-title">My Profile</h3>
</div>
<div class="row">
<div>
<!-- Main Content Start -->
<div id="myTabContent" class="tab-content">
<!-- Step 1 Content Start -->
<div class="tab-pane fade active in" id="step1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Personal Details</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-4 form-group">
<label>First Name</label><span class="req">*</span>
<form:input class="form-control" path="user.firstName"
type="text" maxlength="75"
/>
</div>
<div class="col-xs-12 col-sm-4 form-group">
<label>Middle Name</label>
<form:input class="form-control" path="user.middleName" maxlength="75"
type="text" />
</div>
<div class="col-xs-12 col-sm-4 form-group">
<label>Last Name</label><span class="req">*</span>
<form:input class="form-control" path="user.lastName"
type="text" maxlength="75"
/>
</div>
</div>
</div><!--//panel body over -->
</div><!--//panel panel default over -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Company Details</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-6 form-group">
<label>Company Name</label><span class="req">*</span>
<form:input path="companyName" class="form-control"
type="text"
maxlength="45"
/>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="display: none;" id="mainBtn">
<div class="col-xs-6 col-sm-2 pull-right" style="min-width: 170px;">
<button class="btn" type="submit" name="action" value="2" style= "min-width: 170px;">Save & Continue</button>
</div>
<div class="col-xs-6 col-sm-2 pull-right" style="text-align: right; padding-right:0px;"> <!-- added property padding-right:0px; to style on 17/7 -->
<button class="btn" type="submit" name="action" value="1" style= "min-width: 170px;">Save</button>
</div>
</div>
<div class="row" id="editBtn">
<div class="col-xs-6 col-sm-2 pull-right">
<a class="btn pull-right" id="edit"
href="#" onclick="makeEditable()" style="min-width: 170px;">Edit</a>
</div>
</div>
<br> <br>
</div>
<!-- Step 1 Content End -->
</div>
<!-- Main Content End -->
</div>
</div>
</div>
<!-- /container -->
</section>
</form:form>
</body>
</html>
The controller File is as follows :
package com.htss.web.controller;
//assume all imports
#Controller
#RequestMapping("/buyer")
public class BuyerController {
#Autowired
private BuyerService customerService;
#Autowired
private UserService userService;
#Autowired
private CommonService commonService;
#Autowired
private MessageSource messageSource;
#RequestMapping(value = "/open/customer")
public String customerInfo() {
return "customer";
}
#RequestMapping(value = "/edit_profile")
public String editCustomerProfile(HttpSession session, Model model) {
Integer buyerId = (Integer) session.getAttribute("entityId");
BuyerFormBean bean = customerService.retrieveCustomer(buyerId);
Long userId = (Long) session.getAttribute("userId");
try {
UserFormBean user = userService.getUser(userId);
bean.setUser(user);
} catch (IllegalAccessException | InvocationTargetException e) {
}
model.addAttribute("customer", bean);
model.addAttribute("countries", commonService.getCountryDropdown());
model.addAttribute("action", "updateCustomer");
return "buyerProfile";
}
#RequestMapping(value = "/updateCustomer")
public String updateCustomerProfile(Model model, HttpSession session, BuyerFormBean customer) {
try {
if (action == 1 || action == 2) {
customer = customerService.modifyCustomer(customer);
}
}
catch (Exception e) {
e.printStackTrace();
model.addAttribute("error",messageSource.getMessage("msg.Error",null,Locale.US));
}
Integer buyerId = (Integer) session.getAttribute("entityId");
BuyerFormBean bean = customerService.retrieveCustomer(buyerId);
Long userId = (Long) session.getAttribute("userId");
try {
UserFormBean user = userService.getUser(userId);
bean.setUser(user);
} catch (IllegalAccessException | InvocationTargetException e) {
}
model.addAttribute("customer", bean);
model.addAttribute("message",messageSource.getMessage("msg.Success",null,Locale.US));
return "Customer";
}
}
Now the question is when I click save button the url formed is :
http://localhost:8080/82ism/buyer/updateCustomer
How this happened ? and now when I need a button to some other controller I need to give the whole URL as follows :
${pageContext.request.contextPath}/seller/edit_profile
The project is working all fine I am just trying to understand this concept.
The whole point of spring is so you don't have to worry about that stuff.
jsp's get found cause of the propperty's in application.propperties:
like:
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
For the forms and methods... It's not like it magicly happens.
A form you have to cal by name and methods are eighter mapped to a url or action
like:
#RequestMapping("/")
or
#RequestMapping(method=RequestMethod.POST)
To call the values of a form from the controller you first have to bind them to a entity model with the fields of the form as variables.
The method would look like:
#RequestMapping(method = RequestMethod.POST)
public String processRegister(#ModelAttribute("userForm") User user,
Map<String, Object> model) {
...
return "view";
}
While generating a simplistic form page using Wicket (version 7.5.0), I'm getting extra markup which seems unnecessary (a hidden field placed into a <div> with inline CSS):
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>Apache Wicket Quickstart</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" title="Stylesheet"/>
</head>
<body>
<form method="post" wicket:id="ItemForm" id="ItemForm1" action="./tf?1-1.IFormSubmitListener-ItemForm">
<div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden">
<input type="hidden" name="ItemForm1_hf_0" id="ItemForm1_hf_0" />
</div>
<p>
<label for="name">
<span>Item name:</span>
</label>
<input type="text" name="p::name" wicket:id="name" value="">
</p>
<p>
<label for="price">
<span>Item price:</span>
</label>
<input type="text" name="price" wicket:id="price" value="0">
</p>
<section>
<input type="submit" value="Submit">
</section>
</form>
</body>
</html>
The relevant Java class is:
// Package name and imports omitted
public final class ItemFormPage extends WebPage {
#EJB(name = "ejb/item")
Item it;
public ItemFormPage() {
Form f = new Form("ItemForm") {
#Override
public void onSubmit() {
setResponsePage(new ItemDisplay());
}
};
f.setDefaultModel(new CompoundPropertyModel(it));
f.add(new TextField("name"));
f.add(new TextField("price"));
add(f);
}
}
I'm new to Wicket, as is probably evident from the code. Is there a way to avoid generating the aforementioned seemingly unnecessary markup? In other words, am I missing something or should I report a bug?
This hidden input is used to submit the form with anchor-based components like SubmitLink.
For example, you have a Form and you want to have two ways to submit it (with different 2 buttons):
Form<Void> form = new Form<Void>("form") {
#Override
protected void onSubmit() {
// central form onSubmit
}
};
SubmitLink submitter1 = new SubmitLink("submitter1") {
#Override
public void onSubmit() {
System.out.println("submitter 1 called");
}
};
form.add(submitter1);
SubmitLink submitter2 = new SubmitLink("submitter2") {
#Override
public void onSubmit() {
System.out.println("submitter 2 called");
}
};
form.add(submitter2);
When you click any of the two submitters, its name will be put to that input, and Wicket will find the correct SubmitLink component and call its onSubmit().
I want to add payments to my clients database but when I add the payments I got this error "GET NOT SUPPORTED" I don't know what's the problem. Can you guys help me?
#Controller
public class PaymentsController {
#Autowired
private UsersService usersService;
#Autowired
private PaymentsService paymentsService;
#RequestMapping(value = "/addPayments", method = RequestMethod.POST)
public String addPayments(HttpServletRequest request, ModelMap map) {
String user = request.getParameter("userId"); // this is the identifier for the user of this payment
String transactName = request.getParameter("transactName");
String paid = request.getParameter("paid");
String unpaid = request.getParameter("unpaid");
String balance = request.getParameter("balance");
String total = request.getParameter("total");
//.... get all other attributes you've passed from the form through request.getParameter("");
//next, check whether or not a user with the userId from the screen exists in the db
Users userObject = usersService.getUsers(user);
//.getUsersByUserId(user);
if (userObject != null) {
// this means that we have a valid user to insert the payment to
UsersPayments payment = new UsersPayments();
payment.setUsers(userObject);
payment.setTransactName(transactName);
payment.setPaid(paid);
payment.setUnpaid(unpaid);
payment.setBalance(balance);
payment.setTotal(total);
//.... set the other properties of UsersPayment object
paymentsService.addPayments(payment);
}
else {
// you have an error right here
}
map.put("paymentsList", paymentsService.getAllPayments());
return "payments";
}
}
payments.jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# include file="/WEB-INF/jsp/includes.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="<c:url value="/resources/css/design.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/customized.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/bootstrap.css" />" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Canadian Immigration Consultancy</title>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="<c:url value="/resources/images/logo4.png" />" height="200px" width="230px"/>
<img src="<c:url value="/resources/images/header06.jpg" />" height="200px" width="765px"/>
</div>
<div class="red">
<div align="center" id="slatenav">
<ul>
<li>Home</li>
<li>View All</li>
<li>Reports</li>
<li>Add Leads</li>
<li><spring:message code="user.logout"/></li>
</ul>
</div>
</div>
<div id="balance" >
<form action="addPayments" method="POST">
<div class="well well-sm box16">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Payments</h3>
</div>
<div class="panel-body">
<div class="form-group">
<br><div class="col-sm-2 control-label">Transaction Name</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="transactName" autofocus />
</div>
</div>
<div class="form-group">
<br><div class="col-sm-2 control-label">Amount Paid</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="paid" />
</div>
</div>
<div class="form-group">
<br><div class="col-sm-2 control-label">Unpaid</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="unpaid" />
</div>
</div>
<div class="form-group">
<br><div class="col-sm-2 control-label">Total Balance</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="balance" />
</div>
</div>
<div class="form-group">
<br><div class="col-sm-2 control-label">Total Amount</div>
<div class="col-sm-10">
<input type="text" class="form-control" name="total" />
</div>
</div>
<div class="save">
<input type="submit" class="btn btn-success" value="Save" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You only seem to have one handler mapping, and it's POST. Add another handler mapping for the same url path with GET. Consider the "POST Redirect GET" pattern as well.