How to edit a database entry in a modal window? I am doing the following but getting an error. Please help me to edit in modal window.
Controller
#Controller
#RequestMapping("/classifier")
public class ClassifierController {
private final LuServices luServices;
private final ModelMapper modelMapper;
#Autowired
public ClassifierController(LuServices luServices, ModelMapper modelMapper) {
this.luServices = luServices;
this.modelMapper = modelMapper;
}
#GetMapping()
public String showClassifierPage(Model model) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
PersonDetails personDetails = (PersonDetails) authentication.getPrincipal();
model.addAttribute("personDetails", personDetails);
model.addAttribute("luDTO", luServices.findByTagWith0());
model.addAttribute("newLuDTO", new LuDTO());
return "lu/index";
}
#PostMapping()
public String createLuWith0(#ModelAttribute("newLuDTO") #Valid LuDTO luDTO, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
StringBuilder errorMessage = new StringBuilder();
List<FieldError> errors = bindingResult.getFieldErrors();
for (FieldError error : errors) {
errorMessage.append(error.getField()).append(error.getDefaultMessage()).append(";");
}
return "lu/index";
} else {
luServices.addNewLu(convertToLu(luDTO));
return "redirect:/classifier";
}
}
#GetMapping("/chageLuWith0")
public String test(#RequestParam("id") int id, Model model) {
model.addAttribute("editedLuDTO", luServices.findById(id));
return "lu/index";
}
#PostMapping("/chageLuWith0")
public String changeLuWith0(#RequestParam("id") int id, #ModelAttribute("editedLuDTO") #Valid LuDTO luDTO) {
luServices.update(id, convertToLu(luDTO));
return "redirect:/classifier";
}
private Lu convertToLu(LuDTO luDTO) {
return modelMapper.map(luDTO, Lu.class);
}
private LuDTO convertToLuDTO(Lu lu) {
return modelMapper.map(lu, LuDTO.class);
}
}
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:form="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" th:href="#{/styles/css/style.css}"/>
<link rel="stylesheet" th:href="#{/styles/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="#{/styles/css/awesome/all.css}"/>
<script th:src="#{/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="#{/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{/js/bootstrap.bundle.min.js}" type="text/javascript"></script>
<title>Main page</title>
</head>
<body>
<div class="page_wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<div class="row">
<div class="item_configure_menu">
<button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addNewLuWith0">
<i class="fa-solid fa-file-medical"></i>
</button>
</div>
<div class="lu_block">
<table>
<tr th:each="luDTO : ${luDTO}">
<td>[[*{luDTO.text}]]
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal" th:attr="data-bs-target='#editNewLuWith0' + *{luDTO.id}">
<i class="fa-solid fa-pen"></i>
</button>
<div class="modal fade" th:id="*{'editNewLuWith0' + {luDTO.id}}" tabindex="-1" aria-labelledby="editNewLuWith0Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editNewLuWith0Label">Add item</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" action="#{/chageLuWith0}" th:object="${editedLuDTO}">
<input type="text" th:field="*{tag}" id="tag" value="" placeholder="tag"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('tag')}"
th:errors="*{tag}">tag errors
</div>
<input type="text" th:field="*{shorttext}" id="shorttext" placeholder="shorttext"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('shorttext')}"
th:errors="*{shorttext}">shorttext errors
</div>
<input type="text" th:field="*{text}" id="text" placeholder="text"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('text')}"
th:errors="*{text}">text errors
</div>
<input type="text" th:field="*{lcode}" id="lcode" placeholder="lcode"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('lcode')}"
th:errors="*{lcode}">lcode errors
</div>
<input type="text" th:field="*{code}" id="code" value="" placeholder="code"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('code')}"
th:errors="*{code}">code errors
</div>
<input type="text" th:field="*{bgndat}" id="bgndat" placeholder="bgndat"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('bgndat')}"
th:errors="*{bgndat}">bgndat errors
</div>
<input type="text" th:field="*{enddate}" id="enddate" placeholder="enddate"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('enddate')}"
th:errors="*{enddate}">enddate errors
</div>
<input type="submit" value="Add"/>
</form>
</div>
</div>
</div>
</div>
</td>
<td>[[*{luDTO.getTag()}]]</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-9">
test info
</div>
</div>
</div>
<div class="modal fade" id="addNewLuWith0" tabindex="-1" aria-labelledby="addNewLuWith0Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addNewLuWith0Label">Add item</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form th:method="POST" th:action="#{/classifier}" th:object="${newLuDTO}">
<input type="text" th:field="*{tag}" id="tag" value="" placeholder="tag"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('tag')}"
th:errors="*{tag}">tag errors
</div>
<input type="text" th:field="*{shorttext}" id="shorttext" placeholder="shorttext"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('shorttext')}"
th:errors="*{shorttext}">shorttext errors
</div>
<input type="text" th:field="*{text}" id="text" placeholder="text"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('text')}"
th:errors="*{text}">text errors
</div>
<input type="text" th:field="*{lcode}" id="lcode" placeholder="lcode"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('lcode')}"
th:errors="*{lcode}">lcode errors
</div>
<input type="text" th:field="*{code}" id="code" value="" placeholder="code"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('code')}"
th:errors="*{code}">code errors
</div>
<input type="text" th:field="*{bgndat}" id="bgndat" placeholder="bgndat"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('bgndat')}"
th:errors="*{bgndat}">bgndat errors
</div>
<input type="text" th:field="*{enddate}" id="enddate" placeholder="enddate"/>
<div class="error_block" style="color: red" th:if="${#fields.hasErrors('enddate')}"
th:errors="*{enddate}">enddate errors
</div>
<input type="submit" value="Add"/>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I get an error:
java.lang.IllegalStateException: Neither BindingResult nor plain
target object for bean name 'editedLuDTO' available as request
attribute
Related
so.. I have a registration page and there are a lot of validations in there but my binding result is always false. After a few tries I found the problem but I don't know the solution. When I pass a parameter in the /processRegistrationForm method it doesn't work but when I delete the #RequestParam it works. Why the passed parameter is influencing the binding result and how can I resolve this?
registration-form.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Register New User Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.error {color:red}
</style>
</head>
<body>
<div>
<div id="loginbox" style="margin-top: 50px;"
class="mainbox col-md-3 col-md-offset-2 col-sm-6 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Register New User</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Registration Form -->
<form th:action="#{/processRegistrationForm(flag=${flag})}"
th:object="${crmUser}" method="POST"
class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for registration error -->
<div th:if="${registrationError}" class="alert alert-danger col-xs-offset-1 col-xs-10">
<span th:text="${registrationError}"></span>
</div>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{userName}" placeholder="username (*)" class="form-control" />
</div>
<div th:if="${#fields.hasErrors('userName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('userName')}" th:text="'User name ' + ${err}" />
</ul>
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" th:field="*{password}" placeholder="password (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('password')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('password')}" th:text="'Password ' + ${err}" />
</ul>
</div>
<!-- Confirm Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" th:field="*{matchingPassword}" placeholder="confirm password (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('matchingPassword')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('matchingPassword')}" th:text="'Password ' + ${err}" />
</ul>
</div>
<!-- First name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{firstName}" placeholder="first name (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('firstName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('firstName')}" th:text="'First name ' + ${err}" />
</ul>
</div>
<!-- Last name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{lastName}" placeholder="last name (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('lastName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('lastName')}" th:text="'Last name ' + ${err}" />
</ul>
</div>
<!-- Email -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{email}" placeholder="email (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('email')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('email')}" th:text="'Email ' + ${err}" />
</ul>
</div>
<!-- Register Button -->
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
controller:
#PostMapping("/processRegistrationForm")
public String processRegistrationForm(
#Valid #ModelAttribute("crmUser") CrmUser theCrmUser,#RequestParam(name="flag") Integer flag,
Model theModel,BindingResult theBindingResult) {
String userName = theCrmUser.getUserName();
// form validation
if (theBindingResult.hasErrors()){
return "registration-form";
}
// check the database if user already exists
User existing = userService.findByUserName(userName);
if (existing != null){
theModel.addAttribute("crmUser", new CrmUser());
theModel.addAttribute("registrationError", "User name already exists.");
return "registration-form";
}
// create user account
userService.save(theCrmUser);
if(flag==0)
return "redirect:/user";
else return "redirect:/list";
}
The problems are here:
/register-form:
<!-- Registration Form -->
<form th:action="#{/processRegistrationForm(flag=${flag})}"
th:object="${crmUser}" method="POST"
class="form-horizontal">
/processRegisterForm:
PostMapping("/processRegistrationForm")
public String processRegistrationForm(
#Valid #ModelAttribute("crmUser") CrmUser theCrmUser,#RequestParam(value = "flag",required = false) Integer flag,
BindingResult theBindingResult,
Model theModel) {...
I installed Laravel 8 and set up a blade file.
I moved resources folders css, js, and bootstrap files to public folder and loaded from blade file.
This is master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script src="{{asset('js/app.js')}}"><script/>
<script src="{{asset('js/bootstrap.js')}}"><script/>
</head>
<body>
#yield('content')
</body>
</html>
This is welcome.blade.php
#extends('layouts.master')
#section('content')
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
</div>
<div class="panel-body" >
<form id="signupform" class="form-horizontal" role="form">
<div id="signupalert" style="display:none" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="passwd" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="icode" class="col-md-3 control-label">Invitation Code</label>
<div class="col-md-9">
<input type="text" class="form-control" name="icode" placeholder="">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i>   Sign Up</button>
<span style="margin-left:8px;">or</span>
</div>
</div>
<div style="border-top: 1px solid #999; padding-top:20px" class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i> Sign Up with Facebook</button>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
route is default
Route::get('/', function () {
return view('welcome');
});
Console is not showing any errors and view is not showing anything.
Although the blade files are coded correctly, it is not working
when I remove asset files from , it show view .
So what wrong in asset file
Can someone explain this to me?
I need a help please
My question is : How can I display image after uploaded it in the same Page
I'm trying a lot of code , but nothing is worked for me
Here is blade code
<form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
enctype="multipart/form-data" id ="upload_form">
#csrf
<div class="row justify-content-center">
<div class="col-xl-9">
<!--begin::Wizard Step 1-->
<div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
<h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
<!--begin::Group-->
<div class="form-group row">
<label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
<div class="col-lg-9 col-xl-9">
<div class="image-input image-input-outline" id="kt_user_add_avatar">
<div class="image-input-wrapper" >
<img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
</div>
<!--end::Group-->
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
Cancel
</div>
</div>
</div>
</div>
</div>
</form>
Try this: (For Preview)
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
I'm trying to fill a table in a jsp with a List I put in the model from a Spring controller but the table is not being filled. This is the page:
<%# page import="cl.onvision.dte.be.utils.*" %>
<%
String order = request.getParameter("o");
String search = request.getParameter("s");
String strTitulo = "Gestor usuarios";
%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Administrador / Inicio</title>
</head>
<body>
<!-- Header layer -->
<div class="container">
<div class="row" style="background-color: rgb(255,130,0); padding: 10px">
<div class="col-sm-3"><img src="/img/index/slogan150.png" /></div>
<div class="col-sm-4"></div>
<div class="col-sm-5 text-right text-white">
<!--a href="/login/salir">Salir</a-->
<%#include file="/views/include/bannerSesion.jsp"%>
</div>
</div>
</div>
<!-- Menu layer -->
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a class="nav-link" href="/admin/inicio">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/usuarios">Gestion Usuarios</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/contrib">Gestion Contribuyentes</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/alertas">Alertas</a></li>
<li class="nav-item"><a class="nav-link active" href="/admin/ciudades">Ciudades</a></li>
</ul>
</div>
<br />
<!-- Search & button upper-layer -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<b>Búsqueda:</b>
<input type="text" class="input-sm" style="height:25px" id="s" value="<%= (search==null)? "": search %>"
maxlength="20" size="20" autofocus />
<input type="hidden" id="o" value="<%= (order==null)? "": order %>" />
</div>
<div class="col-sm-6 text-right">
<button data-toggle="modal" data-target="#modaladd" class="btn btn-sm btn-success">
<i class="material-icons" style="font-size:22px">person_add</i>
</button>
</div>
</div>
</div>
<div style="height:10px"></div>
<!-- Data list -->
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered table-condensed table-sm">
<thead>
<tr>
<th style="text-align:center">#</th>
<th style="text-align:center">Nombre usuario</th>
<th style="text-align:center">Region</th>
<th style="text-align:center">Acciones</th>
</tr>
</thead>
<tbody>
<c:forEach var="ciudad" items="${ciudades}">
<tr>
<td style="text-align:center"><c:out value="${ciudad.id}"/></td>
<td style="text-align:center"><c:out value="${ciudad.nombre}"/></td>
<td style="text-align:center"><c:out value="${ciudad.region}"/></td>
<td class="pl-5">
<a href="/admin/usuario/eliminar/${ciudad.id}/">
<button class="btn btn-sm btn-primary"><i class="material-icons"
style="font-size:16px">remove_circle</i></button>
</a>
<a href="javascript:leerDatos(${ciudad.id});">
<button class="btn btn-sm btn-warning"><i class="material-icons"
style="font-size:16px">border_color</i></button>
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<a href="#" id="axls" style="display:none;" donwload>a</a>
<!-- Modal 'add user' form-->
<div class="modal" id="modaladd">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h2 class="modal-title">Agregar nuevo usuario</h2>
</div>
<!-- Modal body -->
<form method="post" action="/admin/usuario/agregar">
<div class="modal-body">
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="nom">Nombre de usuario:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="nomusu" id="nom" maxlength="40"
required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="run">RUN:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="runusu" id="run" maxlength="40"
required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="cla">Nueva clave:</label></div>
<div class="col-sm-8">
<input type="password" class="form-control input-sm" name="cla1usu" id="cla"
maxlength="20" required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="cla2">Repita la clave:</label></div>
<div class="col-sm-8">
<input type="password" class="form-control input-sm" name="cla2usu" id="cla2"
maxlength="20" required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="com">Comentarios:</label></div>
<div class="col-sm-8">
<textarea class="form-control input-sm" name="comentusu" id="com" rows="3"
cols="80"></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Agregar nuevo usuario" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal 'update user' form-->
<div class="modal" id="modalupdate">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h2 class="modal-title">Modificar usuario</h2>
</div>
<!-- Modal body -->
<form method="post" action="/admin/usuario/modificar">
<div class="modal-body">
<input type="hidden" name="uid" id="uid" value="" />
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="unom">Nombre de usuario:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="unomusu" id="unom" maxlength="40"
readonly />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="urun">RUN:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="urunusu" id="urun" maxlength="40"
readonly />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="ucom">Comentarios:</label></div>
<div class="col-sm-8">
<textarea class="form-control input-sm" name="ucomentusu" id="ucom" rows="3"
cols="80"></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Modificar datos" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function ordenarDatos(campo) {
url = 'gestionUsuarios.jsp?o=' + campo + '&s=' + $('#s').val();
document.location.href = url;
return null;
}
/*function descargarXls()
{
url1 = '${pageContext.request.contextPath}/ExtraerXlsUsuarios.do';
$.ajax( {url: url1,
success: function(result)
{
//$('#axls').attr('href', "../" + result);
location.href = "../" + result; //$('#axls').attr('href');
} });
}*/
$('#s').keypress(function (event) {
if (event.which == 13) {
document.location.href = 'gestionUsuarios.jsp?o=' + $('#o').val() + '&s=' + $('#s').val();
return null;
}
}
);
function leerDatos(id) {
$.post("/admin/usuario/ver/" + id + "/", function (obj) {
obj = JSON.parse(obj);
$('#uid').val(obj.id);
$('#unom').val(obj.nom);
$('#urun').val(obj.run);
$('#ucom').val(obj.com);
$('#modalupdate').modal('show');
obj = null;
});
}
/*$().ready( function()
{
v = $('#s').val();
$('#s').val('');
$('#s').val(v);
});*/
</script>
</html>
I'm putting the list into the model right, as you can see in the chrome developer tools:
I can't see the problem here, I need help trying to figure out why the table is not being filled.
Try including the <%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> athe top of your code. Also, make sure your object name ciudades is spelled as it is in your controller.
Well my problem was thwo things:
I'm using tomcat as webapp which doesn't bring JSTL embeddeb. So I had to add the dependency in the pom.xml.The version is important if you want to use EL's.
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
I had to add the taglib on top of the JSP to access the <c:> tags. Thanks to #Morteza Bandi for the heads up.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
I'm trying to submit a POST request to a controller but controller does not respond to my request and no error has been thrown as well, however GET request works fine.
I'm using
<button type="submit" class="btn btn-primary">Submit</button>
to send my request at the controller and this the controller that will handle my request>>
#GetMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="~{layout}">
<body>
<div layout:fragment="content">
<br /> <br /> <br />
<div class="col-md-6 col-md-offset-3">
<h3 class="sub-title theme-font"></h3>
<div class="panel panel-primary theme-font">
<div class="panel-heading">
<h3 class="panel-title">Accounting Flexfield Key Segment</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form th:action="#{/flexfieldkeysegment/{keyFlexFieldSegmentId}(keyFlexFieldSegmentId=${keySegment.keyFlexFieldSegmentId})}"
th:object="${keySegment}" method="post"
enctype="multipart/form-data">
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}"
th:class="text-red">Incorrect data</p>
<!-- text input -->
<div class="form-group"
th:classappend="${#fields.hasErrors('keyFlexFieldSegmentCode')}? 'has-error'">
<label>Flexfield Segment Code <span style="color: red;">*</span></label>
<input type="text" class="form-control"
name="keyFlexFieldSegmentCode"
th:field="*{keyFlexFieldSegmentCode}"
placeholder="Enter Flexfield Key Segment Code" />
<p th:if="${#fields.hasErrors('keyFlexFieldSegmentCode')}"
th:errors="*{keyFlexFieldSegmentCode}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('name')}? 'has-error'">
<label>Flexfield Key Segment Name<span
style="color: red;">*</span></label> <input type="text"
class="form-control" name="name" th:field="*{name}"
placeholder="Enter Flexfield Key Segment Name" />
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="text-red">Incorrect data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('description')}? 'has-error'">
<label>Description<span style="color: red;">*</span></label> <input
type="text" class="form-control" name="description"
th:field="*{description}"
placeholder="Enter Flexfield Key Segment Description" />
<p th:if="${#fields.hasErrors('description')}"
th:errors="*{description}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('separatorId')}? 'has-error'">
<label for="segment_separator">Segment Separator <span
style="color: red;">*</span></label> <select name="name"
id="separator" th:field="*{separatorId}"
th:data-validation-message="#{msg.flexfieldkeysegment.separator.mandatory}"
class="form-control dropdown">
<option th:value="''" th:text="'Select'"></option>
<option th:each="separator : ${segment_separator}"
th:text="${separator.separatorName}"
th:value="${separator.separatorId}"></option>
</select>
<p th:if="${#fields.hasErrors('separatorId')}"
th:errors="*{separatorId}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group">
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeFlexfieldDefinition}"
th:value="${freezeFlexfieldDefinition}" /> <label>Freeze
Flexfield Definition</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{crossValidateSegment}"
th:value="${crossValidateSegment}" /> <label>Cross
Validate Segment</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeRollUpGroup}"
th:value="${freezeRollUpGroup}" /> <label>Freeze
Rollup Group</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{allowDynamicInsert}"
th:value="${allowDynamicInsert}" /> <label>Allow
Dynamic Insert</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{active}"
th:value="${active}" /> <label>Active</label>
</div>
</div>
</form>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-warning"
onclick="window.history.go(-1); return false;">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of #GetMapping, use #PostMapping. Also, annotate the 'Model' POJO with #RequestBody
#PostMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, #RequestBody Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}