Spring WebFlow2 Javascript only working on first radio button
I am trying to use Spring JavaScript that comes with WebFlow2 to submitted my page with a transition value if the user clicks on one of the radio buttons.
I inserted my javascript on the page using onclick and onchange and it only works if the first radio button is selected. I dont know why but I think I tried everything... can someone please tell me if this is a issue with Spring JavaScript.
JSP:
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<title>Spring 3.0 MVC - Web Flow Example</title>
<script type="text/javascript"
src="<c:url value="/resources/dojo/dojo.js" />">
</script>
<script type="text/javascript"
src="<c:url value="/resources/spring/Spring.js" />">
</script>
<script type="text/javascript"
src="<c:url value="/resources/spring/Spring-Dojo.js" />">
</script>
<link type="text/css" rel="stylesheet"
href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />
</head>
<body>
<h2>Customer Registration</h2>
<form:form commandName="customer" id="customer">
<input type="hidden" name="_flowExecutionKey"
value="${flowExecutionKey}" />
<table>
<tr>
<td><font color=red><form:errors path="name" /></font><b>Name:
</b></td>
<td><form:input path="name" id="name" /> <script
type="text/javascript">
Spring
.addDecoration(new Spring.ElementDecoration(
{
elementId : "name",
widgetType : "dijit.form.ValidationTextBox",
widgetAttrs : {
promptMessage : "This is the name you would like entered into the system."
}
}));
</script> <br />
<p></td>
</tr>
<tr>
<td><font color=red><form:errors path="phoneNumber" /></font>
<b>Phone number: </b></td>
<td><form:input path="phoneNumber" id="phoneNumber" /><br />
<script type="text/javascript">
Spring
.addDecoration(new Spring.ElementDecoration(
{
elementId : "phoneNumber",
widgetType : "dijit.form.ValidationTextBox",
widgetAttrs : {
promptMessage : "This is the phone number for the above name"
}
}));
</script></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><b>Row:</b></td>
<td><form:radiobutton value="B" path="row" id="rowBtn" />Row: B<BR>
<form:radiobutton value="A" path="row" id="rowBtn" />Row: A<BR>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "rowBtn",
event: "onchange",
formId:"customer",
params: {fragments:"body", _eventId: "proceed"}
}));
</script>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "rowBtn",
event: "onclick",
formId:"customer",
params: {fragments:"body", _eventId: "proceed"}
}));
</script>
</td>
</tr>
<tr>
<td>Year of Birth:</td>
<td>
<form:select path="byear">
<form:option value="2012" label="2012" />
<form:option value="2011" label="2011" />
<form:option value="2010" label="2010" />
</form:select>
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "byear",
event: "onchange",
formId:"customer",
params: {fragments:"body", _eventId: "proceed"}
}));
</script>
</td></tr>
</table>
<input type="submit" name="_eventId_proceed" value="proceed"
id="proceed" />
<input type="submit" name="_eventId_cancel" value="Cancel" />
</form:form>
</body>
</html>
You have:
<form:radiobutton value="B" path="row" id="rowBtn" />Row: B<BR>
<form:radiobutton value="A" path="row" id="rowBtn" />Row: A<BR>
Your two radiobuttons have the same element id.
The AjaxEventDecoration does a lookup based on that elementId. It assumes it is unique on the page and it does not expect multiple elements with the same id. You should give the second radiobutton another id.
You should probably just reenter the AjaxEventDecoration for that id as well.
If Spring.AjaxEventDecoration allows you to do something similar based on element class(instead of elementId) maybe you can do that, instead of duplicating the current Spring.AjaxEventDecoration snippet.
Related
I have this controller file code. This accepts data from the frontend in the form of #RequestParams. Once I have received the values, I am trying to call another html file called cart .html by adding an attribute using the addAttribute function in models.
#GetMapping("/cart")
#ResponseBody
public String getIfBorrowedBook(Model model, #RequestParam List<Integer> bookIds) {
System.out.println(bookIds);
// if(ifBorrowed.equals("on")) {
// Books book = booksService.findById(bookId);
// book.setIfBorrowed(true);
// booksService.save(book);
List<Books> booksInCart = new ArrayList<>();
for(Integer id:bookIds) {
booksInCart.add(booksService.findById(id));
}
System.out.println(booksInCart);
model.addAttribute("booksInCart", booksInCart);
return "cart";
}
This is my cart.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<h1>
Cart
</h1>
<div>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${booksInCart}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
</td>
</tr>
</tbody>
<div>
</div>
</table>
</div>
</div>
</body>
</html>
This is the show_filtered books file that has a form which is submitted to the controller get request once a buttom is clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<div>
<h1>
<div th:text="'Books on '+${filteredBooks[0].genre}"></div>
</h1>
</div>
<div>
<form th:action="#{/cart}">
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
<th>Borrow Book</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${filteredBooks}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
<input type="checkbox" name="bookIds" th:value="${book.bookId}" th:checked="${book.ifBorrowed}"/>
</td>
</tr>
</tbody>
<div>
<a href="cart">
<button type="submit" class="btn btn-primary">Add to Cart</button>
</a>
</div>
</table>
</form>
</div>
</div>
</body>
</html>
But when I try to return the cart string at the end of getIfBorrowed() method, I am not getting the cart.html file. I am just getting a string that says cart on the webpage. This cart.html file is location in src/main/resources/templates. Therefore spring mvc should automatically be able to recognize the file but it does not do so.
I'm using spring boot and mustache. I try to load page with static css, but styles doesn't load with page. Previous time when I had same problem I just put all static content in a static directory, but now it doesn't help me. Previous time I used Spring Security, but now don't. Don't think that this has any connection.
Here is my html:
<html>
<head>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="/js/script.js"></script>
</head>
<body>
<div>
<div class="table">
<form method="get" action="filter" class="table">
<input type="text" name="caller" placeholder="Caller"/>
<input type="text" name="destination" placeholder="Call recpient"/>
<input type="date" id="dateFrom" name="dateFrom">
<input type="date" id="dateTo" name="dateTo">
<input type="time" id="timeFrom" name="timeFrom">
<input type="time" id="timeTo" name="timeTo">
<button type="submit">Find</button>
</form>
</div>
</div>
<div>
<table class="table">
<thead>
{{#listOfCalls}}
<tr>
<th>{{name}}</th>
<th>{{caller}}</th>
<th>{{destination}}</th>
<th>{{date}}</th>
<th>{{timeFrom}}</th>
<th>{{timeTill}}</th>
<th>{{lengthOfCall}}</th>
</tr>
{{/listOfCalls}}
</thead>
</table>
</div>
</body>
</html>
here is my resource folder hierarchy:
https://i.stack.imgur.com/dwOcu.png
I have one question about spring tag form and radiobuttons. I have a task something like testing. User logged in and can choose some test. On the test page i'm using spring tag form and radiobuttons for answering questions. For one question 4 answers. But on the test page when i'm trying to select one answer for question one is selected for all question. I mean i can select only one radio button. I know that in html for create group of radio buttons they should have same names. How i can create a group of radio buttons with spring tag form?
Here test_page.jsp
<%# page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="/resources/js/timer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/resources/styles/style.css"/>
<title>Test page</title>
</head>
<body onload="startTimer()">
<div id="info">
<h3>
Subject: <c:out value="${test.subject}"/>
</h3>
<h3>
Number of questions:
<c:out value="${test.questionNumber}"/>
</h3>
<h3>
Difficulty:
<c:out value="${test.difficulty}"/>
</h3>
<div id="clock">
<p>
<label for="timer">Time for test</label>
<span id="timer" style="color: #4af; font-size: 150%; font-weight: bold;">
<c:out value="${test.timer}"/></span>
</p>
</div>
</div>
<div id="test">
<form:form action="result" commandName="result" method="post">
<form:input type="hidden" path="testSubject" value="${test.subject}"/>
<form:input type="hidden" path="difficulty" value="${test.difficulty}"/>
<c:forEach items="${test.questionAnswersMap}" var="entry">
<h4><c:out value="${entry.key}"/></h4>
<div class="form-check">
<ul style="list-style: none">
<form:radiobuttons path="answers" items="${entry.value.existingAnswers}" element="li" class="form-check-input"/>
</ul>
</div>
</c:forEach>
<button id="finish" type="submit" class="btn btn-primary btn-block">Finish</button>
</form:form>
</div>
</body>
</html>
I'm using spring 4.
If someone knows how to solve that i will be grateful.
we need to authenticate users when they access certain group of web services. For that we use auth-method FORM.
When user enters info inside text area and clicks the button, application will try to call a web service. This web service is secured and user needs to authenticate first. The auth form will be displayed as a popup (jquery effect).
Here is the code:
<!DOCTYPE html>
...
<meta http-equiv="Cache-Control" content="no-store,no-cache,must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.bpopup.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $form = $('form');
;(function($) {
$(function() {
$('#update').bind('click', function(e) {
e.preventDefault();
$('#popupLogin').bPopup();
});
});
})(jQuery);
});
</script>
</head>
<body>
<div style="padding-left: 30px;">
<h1 style="padding-left: -20px;">Create a new <i>Clinic</i></h1>
<div id="popupLogin" style="display:none;">
<form action="j_security_check" method="post">
<div>
<table>
<tr>
<td><span>Username</span></td>
<td><input type="text" style="width: 50px;" name="j_username" /></td>
</tr>
<tr>
<td><span>Password</span></td>
<td><input type="password" style="width: 50px;" name="j_password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Login" /></td>
</tr>
</table>
</div>
</form>
</div>
<form id="form">
Clinic Name: <input type="text" name="name" /><br /><br />
<input type="button" id="update" value="Add Clinic" />
</form>
</div>
The problem is that whenever i submit the right info for login, it redirects to this 408 error:
Etat HTTP 408 - The time allowed for the login process has been exceeded. If you wish to continue you must either click back twice and re-click the link you requested or close and re-open your browser
Any idea for a solution?
I'm starting from here :
With that code :
<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<table class="title">
<tr><th>Web Bank application</th></tr>
</table>
<br/>
<fieldset>
<legend>Login Page - please enter your Username and Password</legend>
<form action="loginPage">
Username: <input type="text" name="username"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Login">
</form>
</fieldset>
<br/>
<br/>
<br/>
<fieldset>
<legend>Registration</legend>
<form action="register">
First name: <input type="text" name="firstName"><br>
Last name : <input type="text" name="lastName"><br>
Address : <input type="text" name="address"><br>
ID-number : <input type="text" name="idnumber"><br>
User-Name : <input type="text" name="userName"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Register">
</form>
</fieldset>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>
And while I move from one page to another , I reach here :
With that code :
<!DOCTYPE html>
<html>
<head><title>Authentication failed - a problem has occurred!</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<h1>Sorry , but you are not registered to our bank!</h1>
<fieldset>
<legend>Please press here to continue</legend>
<form action="goingBack">
<input type="submit" value="Press here">
</form>
</fieldset>
</body></html>
And I want to go back to index.html - the first page that I see when the program starts (the first picture above) .
How can I do that ? how can I forward back to index.html ?
Regards
Just add a link to the previous page in the last HTML:
<!DOCTYPE html>
<html>
<head><title>Authentication failed - a problem has occurred!</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<h1>Sorry , but you are not registered to our bank!</h1>
<fieldset>
<legend>Please press here to continue</legend>
<form action="goingBack">
<input type="submit" value="Press here">
</form>
</fieldset>
Go Back <!-- add this -->
</body></html>
You just need javascript. To redirect to /index.html after 5 seconds :
setTimeout('window.location='index.html';', 5000);
setTimeout() is a javascript function that sets a timer to trigger somehting after a given period of time. window.location is a variable that allows you to change the URL of the current page (thus redireting).