I am using jsp . And I just want to show a value (maxHolidays which is 15) in my form. But I always get exception Neither BindingResult nor plain target object for bean name 'command' available as request attribute
This is my code
Controller
int maxHolidays = 15;
model.addAttribute("maxHolidays", maxHolidays);
jsp File
<form:form method="POST" >
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<div class="col-sm-10">
<label class="control-label">Max holiday length</label>
<form:input type="text" path="maxHolidays" id="maxHolidays"
class="form-control"
required="required" />
<div class="has-error">
<form:errors path="maxHolidays" class="help-inline" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form:form>
try below code in jsp page
value="${maxHolidays}"
Try this
<div class="has-error">
<span class="help-inline">${maxHolidays}</span>
</div>
Related
I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
I have created 2 partial views called _ftpsetupDetails.cshtml and _ftpsetupedit.cshtml
On load of the index page i am loading details partial view onto the below div.
now the problem is on post to the controller after save i am returning the ready only mode detail partial view. But instead of loading the partial view or hit done method of ajax it is redirecing the page to /FT/Edit url with detail partial view html on it. How to make sure the page is not redirected? what am i doing wrong?
//Once user clicks on Save button the below code will post the form data to controller
$(document).on("click", "#updateFTP", function () {
$.post("/Ftp/Edit", $('form').serialize())
.done(function (response) {
alert(response.responseText);
});
});
//On page load i am loading the partialview container witih read only view
LoadAjaxPage("/Ftp/DetailsByOrgId", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
//On edit button click i am loading the same div container with edit partial view
$(document).on("click", "#editFTP", function () {
// $("#createUserPartialViewContainer").load("/Users/Create?organizationId=" + orgId + "&organizationType=" + orgTypeId);
LoadAjaxPage("/Ftp/Edit", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
});
<div id="ftpPartialViewContainer">
</div>
<!--Details HTML partial view code-->
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<label for="Name" class="control-label">Name</label>
<input asp-for="Name" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label for="Password" class="control-label">Password</label>
<input asp-for="Password" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Edit" class="btn btn-primary" id="editFTP" />
</div>
</div>
</div>
</div>
<!--Edit HTML partial view code-->
#model MyProject.Models.Ftp
#if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
#using (Html.BeginForm("Edit", "ftp", FormMethod.Post,))
{
#Html.ValidationSummary(true, "Please fix the errors")
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Pkid" />
<input type="hidden" asp-for="ConnectedTo" />
<input type="hidden" asp-for="ConnectedToType" />
<div class="row">
<div class="col">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary " id="updateFTP" />
</div>
</form>
</div>
</div>
}
I have the following object.
public class Anonymization {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private long id;
#OneToMany(mappedBy = "anonymization")
private List<Host> hosts;
#OneToMany(mappedBy = "anonymization")
private List<Item> items;
The objects Host and Item have several boolean Fields. I want to display a form, where all Host and Item objects are displayed as checkboxes, so that the boolean fields can be edited. I wrote a controller to display the form
#RequestMapping("monitoringsystem/{mId}/anonymization")
public String editAnonymisatzion(Model model, #PathVariable Long mId){
model.addAttribute("mId", mId);
model.addAttribute("anonymization", monitoringSystemRepository.findOne(mId).getAnonymization());
return "monitoringsystem/anonymizationForm";
}
The anonymizationForm should display the checkboxes in a for-each-loop
<!-- more code --->
<form class="form-horizontal" th:modelAttribute="anonymization" th:object="${anonymization}" th:action="#{'monitoringsystem/' + ${mId} + '/anonymisatzion/save'}" method="post">
<input type="hidden" th:field="*{id}"/>
<fieldset>
<legend>Set Anonymization</legend>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Hostnames</div>
<div class="panel-body">
<div class="form-group" th:each="host : ${anonymization.hosts}">
<label class="col-md-4 control-label" for="checkboxes" th:text="${host.name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${host.anonymizeName}" type="checkbox" />
anonymizie
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Items</div>
<div class="panel-body">
<div class="form-group" th:each="item : ${anonymization.items}">
<label class="col-md-4 control-label" for="checkboxes" th:text="${item.name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${item.anonymizeName}" type="checkbox" />
anonymizie name
</label>
</div>
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${item.anonymizeData}" type="checkbox" />
anonymizie data
</label>
</div>
</div>
</div>
</div>
</div>
<!-- more code --->
Unfortunatly when i call the View I'm getting the following error
Caused by: java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'host' available as request attribute
I checkt my Database all Relationsships are set correctly. The List<Host> should contain 1 and the List<Item> 2 entries.
I can't find my mistake.
UPDATE 1:
I debuged the anonymization object which is passed to the form. It's is complete. Which means all listentries are present. So I guess the error has something to to do with my view - how I call the object.
I found the solution by myselfe. Fist of all i changes the way the list-objects are called in my form
<form class="form-horizontal" th:modelAttribute="anonymization" th:object="${anonymization}" th:action="#{'monitoringsystem/' + ${mId} + '/anonymisatzion/save'}" method="post">
<input type="hidden" th:field="*{id}"/>
<fieldset>
<legend>Set Anonymization</legend>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Hostnames</div>
<div class="panel-body">
<div class="form-group" th:each="host, statHost : *{hosts}">
<label class="col-md-4 control-label" for="checkboxes" th:text="*{hosts[__${statHost.index}__].name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{hosts[__${statHost.index}__].anonymizeName}" type="checkbox" />
anonymizie
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Items</div>
<div class="panel-body">
<div class="form-group" th:each="item, statItem : *{items}">
<label class="col-md-4 control-label" for="checkboxes" th:text="*{items[__${statItem.index}__].name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{items[__${statItem.index}__].anonymizeName}" type="checkbox" />
anonymizie name
</label>
</div>
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{items[__${statItem.index}__].anonymizeData}" type="checkbox" />
anonymizie data
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<a th:href="#{/monitoringsystem}" class="btn btn-default btn-small">Cancel</a> <button id="singlebutton" name="singlebutton" class="btn btn-primary btn-small">Submit</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Futhermore there seems to be a problem with the naming of the getter and setter. Mine were like:
setBoolean(boolean b){
this.b = b;
}
isBoolean(){
return b;
}
Spring or thymeleaf (i don't know which component is responsible) seems to need the getter starting with get. After changing this it's working now.
setBoolean(boolean b){
this.b = b;
}
getBoolean(){
return b;
}
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});