I have a problem with a modal. My login is through a modal and it is in a navbar in a thymeleaf layout template as a component for all the pages, except the login. It works ok but if the login is wrong, it returns you to a full size page not to the modal , why is't that?
EDIT 1 int the back i use SpringBoot, Spring Security and UserDetailsService
https://e-commerce-springboot.herokuapp.com/
this is layout.hmtl
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Buy-A-Thing</title>
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport" />
<link rel="stylesheet" type="text/css"
th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1 /js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head>
<style>
#import url(https://fonts.googleapis.com/css?family=Lobster);
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
height: 20px;
text-align: center;
}
.glyphicon {
font-size: 17px;
}
h6 {
margin: 5px;
}
#homeButton{
font-family:Lobster;
font-size:20px;
}
#userNameDisplay {
color: rgba(250, 250, 250, 0.4);
margin: 15px;
}
</style>
</head>
<body>
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" id="homeButton" th:href="#{/}">Buy-A-Thing</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!-- <li id="userNameDisplay" sec:authorize="isAuthenticated()"
th:text="${#authentication.principal.username}">
</li>-->
<li sec:authorize="isAuthenticated()"><a
class="dropdown-toggle" data-toggle="dropdown" href="#" th:text="${#authentication.principal.username}">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li sec:authorize="hasRole('ROLE_ADMIN')">
<a th:href="#{/admin}">Administrator</a>
</li>
<li>
<a th:href="${'/user/' + #authentication.principal.username}">User</a>
</li>
</ul>
</li>
<li sec:authorize="!isAuthenticated()">
<a th:href="#{/registration}" data-target="#theModalRegistration"
data-toggle="modal"><span class="glyphicon glyphicon-user"></span>
Sign Up</a>
</li>
<li sec:authorize="!isAuthenticated()">
<a th:href="#{/login}"
data-target="#theModalLogin" data-toggle="modal"> <span
class="glyphicon glyphicon-log-in"></span>Login
</a>
</li>
<li sec:authorize="isAuthenticated()">
<a th:href="#{/cartOfUser/}" role="dialog"
data-target="#theModalCart" data-toggle="modal"> <span
class="glyphicon glyphicon-shopping-cart"></span>
</a>
</li>
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}"><span
class="glyphicon glyphicon-log-out"></span> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade text-center" id="theModalLogin">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="modal fade text-center" id="theModalRegistration">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="modal fade text-center" id="theModalCart">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="container">
<div layout:fragment="custom-content">
<!-- Your Page Content Here -->
</div>
</div>
<div class="footer">
<h6>#2019 Buy-A-Thing</h6>
</div>
</body>
</html>
this is login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css"
th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<title>Login</title>
</head>
<body>
<!-- Modal content-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h5 class="modal-title">Login</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Login</h1>
<form th:action="#{/login}" method="post">
<div th:if="${param.error}">
<div class="alert alert-danger">Invalid username or
password.</div>
</div>
<div th:if="${param.logout}">
<div class="alert alert-info">You have been logged out.</div>
</div>
<div class="form-group">
<label for="username">Email</label>: <input type="text"
id="username" name="username" class="form-control"
autofocus="autofocus" placeholder="Username" />
</div>
<div class="form-group">
<label for="password">Password</label>: <input type="password"
id="password" name="password" class="form-control"
placeholder="Password" />
</div>
<div class="form-group">
<label>
<input type="checkbox" name="remember-me">
Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit"
class="form-control btn btn-primary" value="Log In" />
</div>
</div>
</div>
<div class="form-group">
<span>New user? <a href="/" th:href="#{/registration}">Register
here</a></span>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script type="text/javascript"
th:src="#{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript"
th:src="#{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>
antMatchers
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.anonymous()
.and()
.authorizeRequests()
.antMatchers("/login")
.permitAll()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers(
"/**",
"/products**",
"/registration**",
"/js/**",
"/css/**",
"/fonts.googleapis.com/css**",
"/img/**",
"/webjars/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.defaultSuccessUrl("/products", true)
.permitAll()
.and()
.logout()
.invalidateHttpSession(true)
.clearAuthentication(true)
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.logoutSuccessUrl("/products")
.deleteCookies("my-remember-me-cokie")
.permitAll()
.and()
.rememberMe()
//.key("my-secure-key")
.rememberMeCookieName("my-remember-me-cookie")
.tokenRepository(persistentTokenRepository())
.tokenValiditySeconds(24 * 60 * 60)
.and()
.exceptionHandling();
}
Controller
#GetMapping("/login")
public String login(Model model) {
return "login";
}
thanks!
Related
I have a Spring MVC controller and bootstrap page.
When I submit the form and send some payload to this endpoint if some condition is not met I would like to display confirmation window:
API:
#PostMapping(value = "/pairs")
public String addPair(#ModelAttribute StepForm addPairStepForm,
Model model) {
....... // do some check
}
Bootstrap page:
<!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">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
<!-- Modal -->
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Pair already exists for the same exchange.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-10">
<form id="add_pair_form" class="form-inline" action="#" th:action="#{/pairs}"
th:object="${stepForm}"
autocomplete="off"
method="post">
<div class="row g-3 align-items-center mb-1 mt-1">
<div class="col-auto">
<label for="pair" class="form-label">New</label>
</div>
<div class="col-auto">
<input id="pair" class="form-control" name="pair" type="text"
placeholder="Pair to be added."
th:field="*{pair}"
required
autofocus>
......................................
</div>
</div>
<div class="form-group mb-1 mt-1">
<button type="submit" class="btn btn-primary submit_btn">Submit</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
Validate
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</main>
</body>
</html>
How I can open the modal dialog window when I submit the form and Post some payload to Spring BE?
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 create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');
hello i checked http://fineuploader.com/demos.html
and in 'Manually Trigger Uploads & Edit File Names'
i tried the code and recreate it on my pc
but i don't see anything in browser, just blank
here's the code(all the code in one html file only, github just cut the code here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery
====================================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Fine Uploader New/Modern CSS file
====================================================================== -->
<link href="css/fine-uploader-new.min.css" rel="stylesheet">
<!-- Fine Uploader jQuery JS file
====================================================================== -->
<script src="js/jquery.fine-uploader.min.js"></script>
<!-- Fine Uploader Thumbnails template w/ customization
====================================================================== -->
<script type="text/template" id="qq-template-manual-trigger">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<button type="button" id="trigger-upload" class="btn btn-primary">
<i class="icon-upload icon-white"></i> Upload
</button>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<style>
#trigger-upload {
color: white;
background-color: #00ABC7;
font-size: 14px;
padding: 7px 20px;
background-image: none;
}
#fine-uploader-manual-trigger .qq-upload-button {
margin-right: 15px;
}
#fine-uploader-manual-trigger .buttons {
width: 36%;
}
#fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
width: 60%;
}
</style>
<title>Fine Uploader Manual Upload Trigger Demo</title>
<!-- Fine Uploader DOM Element
====================================================================== -->
<!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
====================================================================== -->
<script>
$('#fine-uploader-manual-trigger').fineUploader({
template: 'qq-template-manual-trigger',
request: {
endpoint: '/server/uploads'
},
thumbnails: {
placeholders: {
waitingPath: '/source/placeholders/waiting-generic.png',
notAvailablePath: '/source/placeholders/not_available-generic.png'
}
},
autoUpload: false
});
$('#trigger-upload').click(function() {
$('#fine-uploader-manual-trigger).fineUploader('uploadStoredFiles');
});
</script>
</body>
</html>
i also have the js and css in the folders
how to make this work??? thanks
We have to do validation on the page, in the case of empty fields to display a message.
It's my class, the method of the controller and settings of messages.
I can't to get on the page Freemarker display error messages.
public class CreateCourseDTO {
#NotEmpty
private String name;
#NotEmpty
private String category;
#NotEmpty
private String description;
#NotEmpty
private String links;
public CreateCourseDTO() {
}
NotEmpty.createCourseDTO.name = Name is required!
NotEmpty.createCourseDTO.category = Category is required!
NotEmpty.createCourseDTO.description = Description is required!
NotEmpty.createCourseDTO.links = Links is required!
<bean class="org.springframework.context.support.ResourceBundleMessageSource"
id="messageSource">
<property name="basename" value="messages" />
</bean>
#RequestMapping(value = "/create", method = RequestMethod.POST, params = {
"name", "category", "description", "links" })
public String createCoursePost(Model model, HttpSession session,
HttpServletRequest request, #Valid CreateCourseDTO createCourseDTO,
BindingResult result) {
model.addAttribute("eMail", session.getAttribute("eMail"));
String title = request.getParameter("name");
String description = request.getParameter("description");
String links = request.getParameter("links");
String category = request.getParameter("category");
if (result.hasErrors() ) {
How do I fix freemarker page?
<#import "/spring.ftl" as spring />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<style>
.error {
color: #ff0000;
}
.errorblock {
color: #000;
background-color: #ffEEEE;
border: 3px solid #ff0000;
padding: 8px;
margin: 16px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
Create Course
<div class="logout">
<span id="currentUserLogin">
${eMail}
</span>
<a href="logout.html">
<i class="icon-off"></i>
</a>
</div>
</h1>
</header>
<form class="form-horizontal" commandName="createCourseDTO" method=POST>
<fieldset>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input id="name" name="name" class="span5" type="text"/>
<#spring.showErrors "<br>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Category</label>
<div class="controls">
<select id="category" name="category" class="span5">
<option></option>
<#list listCategories as category>
<option>${category.category}</option>
</#list>
</select>
<#spring.showErrors "<br>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<textarea id="description" name="description" class="span5" rows="3"></textarea>
<#spring.showErrors "<br>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Links</label>
<div class="controls">
<textarea id="links" name="links" class="span5" rows="3"></textarea>
<#spring.showErrors "<br>" />
</div>
</div>
<div class="form-actions">
<button id="createButton" name="createButton" class="btn btn-primary" type="submit">Create</button>
</div>
</fieldset>
</form>
<a class="btn" href="courses.html">Cancel</a>
</div>
Until that's happened.
<#import "/spring.ftl" as spring />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div class="container">
<header>
<h1>
Create Course
<div class="logout">
<span id="currentUserLogin">
${eMail}
</span>
<a href="logout.html">
<i class="icon-off"></i>
</a>
</div>
</h1>
</header>
<form action="create" method="POST"/>
<fieldset>
<#spring.bind "сreateCourseDTO" />
<#spring.showErrors '*', 'errors' />
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<#spring.formInput "createCourseDTO.name" ""/>
<#spring.showErrors '<br>',"error" />
</div>
</div>
<div class="control-group">
<label class="control-label">Category</label>
<div class="controls">
<#spring.formSingleSelect "createCourseDTO.category" categoryList "" />
<option></option>
<#list listCategories as category>
<option>${category.category}</option>
</#list>
</select>
<#spring.showErrors "createCourseDTO.category","error" />
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<#spring.formInput "createCourseDTO.description"/>
<#spring.showErrors "createCourseDTO.description","error" />
</div>
</div>
<div class="control-group">
<label class="control-label">Links</label>
<div class="controls">
<#spring.formInput "createCourseDTO.links"/>
<#spring.showErrors "createCourseDTO.links","error" />
</div>
</div>
<div class="form-actions">
<button id="createButton" name="createButton" class="btn btn-primary" type="submit">Create</button>
</div>
</fieldset>
</form>
<a class="btn" href="courses.html">Cancel</a>
</div>
</body>
</html>
Throws an error
==> assignment: status=springMacroRequestContext.getBindStatus(path) [on line 120, column 9 in spring.ftl]
in user-directive bind [on line 159, column 5 in spring.ftl]
in user-directive spring.formInput [on line 33, column 15 in pages/create.ftl]
on line <#spring.formInput "createCourseDTO.name" ""/>
and I have fixed bin
<bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver"
p:cache="true" p:prefix="/pages/" p:suffix=".ftl" p:exposeSpringMacroHelpers="true"/>