HTML page not displaying when called from backend using springboot and thymeleaf - java

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.

Related

static content doesn't load in spring boot application

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

taking a passcode value from user, i want to use this passcode in url path, i am using thymeleaf as template engine

I have an problem about that taking a passcode value from user, i want to use this passcode in url path, i am using thymeleaf as template engine.
This is my controller
#RequestMapping(value = "/findEvent/{passcode}", method = RequestMethod.POST)
public String findEvent(#PathVariable("passcode") String passcode,
final RedirectAttributes redirectAttributes, Model model) {
Event event=eventService.findByPassCode(passcode);
List<Question> questions=questionService.findQuestionsByPasscode(passcode);
model.addAttribute("questions",questions);
return "questions";
}
and these is my html pages
addEvent.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Hello World!</title>
</head>
<body>
<form method="post" th:action="#{/eventSave}" th:object="${eventRegister}">
Name:<br>
<input type="text" th:field="*{eventName}"><br>
Passcode:<br>
<input type="text" th:field="*{eventPasscode}"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
passcode.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" th:action="#{/findEvent/{passcode}}">
Passcode:<br>
<input type="text" th:text="*{passcode}" ><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
questions.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="col-12">
<table class="table table-bordered">
<tr>
<th>Question </th>
<th>Votes </th>
</tr>
<tr th:each="questions : ${questions}" th:object="${question}">
<td th:text="*{text} "></td>
<td th:text="*{voteValue} "></td>
<a th:href="#{/voteQuestion/{id} (id=${question.questionId})}">Vote the question</a>
</tr>
</table>
</div>
and this is my result http://localhost:8080/findEvent/%7Bpasscode%7D
If you want the form action URL to contain a value from the form itself, then you need an onSubmit handler to update the URL from the form field.
Form values are only included automatically in the body of a POST request, or as query parameters of a GET request.
Anything else you have to do with JavaScript code.

Controller of Spring MVC working but model is empty in JSP

Visit my previous question to see my configurations of spring mvc Spring MVC Controller working but not creating the specified response URL ,It is creating the url from request mapping string
Now am facing one strange error in jsp page
The Controller class method is
#RequestMapping(value="/branchshow.travel", method=RequestMethod.GET)
public String getBranchShow(){
List<BranchModel> branches = branchService.getBranches();
System.out.println(branches.size());
new ModelMap().addAttribute("branches", branches);
return "/branch/branchshow";
}
I got the requested jsp page but the model named 'branches' is empty in jsp. I got the size of list as 140 in console. So it means that returned model is empty in 'branchshow.jsp'
I checked many links, all are saying its because of jsp version but am using 3.0
my web.xml starting is
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID"
version="3.0">
so the version is 3.0
I would like to show my branchshow.jsp code here
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page isELIgnored="false" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Service-Home</title>
<!-- resources linking -->
<spring:url value="/resources/js/login_forms.js" var="login_forms"/>
<spring:url value="/resources/js/jquery.js" var="jqueryjs"/>
<spring:url value="/resources/js/bootstrap.min.js" var="bootstrapminjs"/>
<spring:url value="/resources/css/bootstrap.min.css"
var="bootstrapmincss"></spring:url>
<spring:url value="/resources/css/custom.css" var="customcss">
</spring:url>
<spring:url value="/resources/css/simple-sidebar.css" var="sidebarcss">
</spring:url>
<spring:url value="/resources/images/toggle.png" var="hide"/>
<spring:url value="/resources/images/insert.png" var="insert"/>
<spring:url value="/resources/images/edit.png" var="update"/>
<spring:url value="/resources/images/delete.png" var="delete"/>
<spring:url value="/resources/images/search.png" var="search"/>
<!-- Custom CSS -->
<link rel="stylesheet" href="${bootstrapmincss}">
<link rel="stylesheet" href="${sidebarcss}">
<link rel="stylesheet" href="${customcss}">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<font color="WHITE" style="font-style:bold">CALICUT TRAVELS-SERVICES</font>
</li>
<li>
Master
<ul>
<li>Branch</li>
<li>Hotel</li>
<li>Air line</li>
<li>Customers</li>
<li>Staff</li>
<li>Suppliers</li>
</ul>
</li>
<li>
Packages
<ul>
<li>Airline</li>
<li>Hotel</li>
<li>Transportation</li>
</ul>
</li>
<li>
Sales Invoices
<ul>
<li>Book rooms</li>
<li>Book tickets</li>
<li>Book visa</li>
<li>Book package</li>
</ul>
</li>
<li>
Sales Returns
<ul>
<li>Cancel rooms</li>
<li>Cancel tickets</li>
<li>Cancel visa</li>
<li>Cancel Package</li>
</ul>
</li>
<li>
Miscellaneous
<ul>
<li>Taxi</li>
<li>Food</li>
</ul>
</li>
<li>
Purchase
<ul>
<li>Airline</li>
<li>Hotel</li>
<li>Visa</li>
<li>Transportation</li>
<li>Packages</li>
</ul>
</li>
<li>
Purchase Returns
<ul>
<li>Airline</li>
<li>Hotel</li>
<li>Visa</li>
<li>Transportation</li>
<li>Package</li>
</ul>
</li>
<li>
Reports
<ul>
<li>Sales invoices</li>
<li>sales returns</li>
<li>purchase invoices</li>
<li>purchase returns</li>
<li>packages</li>
<li>Customer summery report</li>
</ul>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="service-home-conetent">
<div class="container-fluid">
<div class="row">
<table>
<tr>
<th align="center" width='20'><img alt="HIDE" src="${hide}" width='20'></th>
<th align="center" width="400" colspan="4"><h2>BRANCH</h2></th>
</tr>
<tr align="center">
<th align="center" width='200'></th>
<th align="center" width='20'><img src="${insert}" width='20'></th>
<th align="center" width='20'><img src="${update}" width='20'></th>
<th align="center" width='20'><img src="${delete}" width='20'></th>
<th align="center" width='20'><img src="${search}" width='20'></th>
</tr>
<tr>
<th align="center" width='200'></th>
<th align="center" width='20'>Insert</th>
<th align="center" width='20'>update</th>
<th align="center" width='20'>Delete</th>
<th align="center" width='20'>Search</th>
</tr>
</table>
<input type="hidden" id='form_use' value='view'/>
<fieldset class="well the-fieldset">
<legend class="the-legend"> BRANCHES </legend>
<table>
<tr>
<th> Branch Name</th>
</tr>
<c:forEach var="branch" items="${branches}">
<tr>
<td>${branch.branchName}</td>
</tr>
</c:forEach>
</table>
</fieldset>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="${jqueryjs}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${bootstrapminjs}"></script>
<script src="${login_forms}"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
I enabled EL in jsp then also this issue persists. If anybody faced this issue before let me know the solution
On the line you create a new ModelMap but you don't return it
new ModelMap().addAttribute("branches", branches);
You method could return a ModelAndView object to store your model attribute 'branches' and view '/branch/branchshow'
#RequestMapping(value="/branchshow.travel", method=RequestMethod.GET)
public ModelAndView getBranchShow() {
ModelAndView mav = new ModelAndView();
List<BranchModel> branches = branchService.getBranches();
System.out.println(branches.size());
mav.getModelMap().put("branches", branches);
mav.setViewName("/branch/branchshow");
return mav;
}

<c:forEach> tag not work properly

My java code is
#RequestMapping(value = "/common_views/view-lecturer-Projects")
public String viewLecturerProjects(HttpServletRequest request, ModelMap map) {
String userId=request.getParameter("userId");
map.put("viewUserProjects", projectService.findProjectByUserId(Long.valueOf(userId)));
System.out.println("=================>Project type= "+projectService.findProjectByUserId(Long.valueOf(userId)).getTypeOfProject());
System.out.println("=================>Project title= "+projectService.findProjectByUserId(Long.valueOf(userId)).getTitleOfProject());
// System.out.println("===============>Project= "+(projectService.findProjectByUserId(Long.valueOf(userId))).get(0).getTitleOfProject());
return "common_views/viewLecturerProjects";
}
the page /common_views/view-lecturer-Projects is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index - SIL-Bridge</title>
</head>
<body>
<jsp:include page="/WEB-INF/includes/header.jsp" flush="true" />
<jsp:include page="/WEB-INF/includes/menubar.jsp" flush="false" />
<div class="main main-inner">
<div class="container">
<div class="row">
<div class="span12">
<div class="widget widget-nopad">
<div class="widget-header"><i class="icon-list-alt"></i>
<h3>Home</h3>
</div>
<!-- /widget-header -->
<div class="widget-content">
<form id="view-all-lecturer-project" class="form-horizontal">
<fieldset>
<table id="viewAllLecturersProject" class="table table-striped table-bordered">
<thead>
<tr>
<th>Title of the project</th>
<th>Type of the project</th>
</tr>
</thead>
<tbody>
<c:forEach items="${viewUserProjects}" var="viewUserProject">
<tr>
<td><c:out value="${viewUserProject.titleOfProject}"/></td>
<td><c:out value="${viewUserProject.typeOfProject}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
<br/><br/>
</fieldset>
</form>
</div>
</div>
<!-- /widget -->
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /main-inner -->
</body>
</html>
In this page values ${viewUserProject.titleOfProject},${viewUserProject.typeOfProject}` not disply in this page but java code print values
Write the following taglib import statement on top of your jsp.
<%# taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
and if you dont have JARSS for JSTL, then download from below URL and put that JAR into your Build Path of project.
http://www.oracle.com/technetwork/java/index-jsp-135995.html

How would I interact with this input box in Selenium Webdriver using Java?

I can't get it to select the input name uxCompanyName. I've tried using an xpath, selenium IDE, and a by.id, name, etc. None of that worked for me. Any help would be appreciated. Thanks
My script:
WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("document.getElementById('uxCompanyName').focus();");
element.findElement(By.id("uxCompanyName")).clear();
element.findElement(By.id("uxCompanyName")).sendKeys("password");
HTML:
<frameset rows="100%" frameborder="0" border="0" framespacing="0">
<frame scrolling="auto" allowtransparency="" src="CompList.aspx" noresize="noresize" name="bottom">
<html>
<head>
<body onload="document.getElementById('uxBranchID').focus();">
<form id="fm" action="CompList.aspx" method="post" name="fm">
<div>
<script type="text/javascript">
<script language="JavaScript">
<script type="text/javascript">
<link href="menu.css" type="text/css" rel="stylesheet">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadMenu_Utils_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadHelper_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadBrowser_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadMenu_Globals_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadMenu_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadMenu_Keyboard_3_5_1.js" type="text/javascript">
<script src="/secure/admin/RadControls/Menu/Scripts/3_5_1/RadImageCache_3_5_1.js" type="text/javascript">
<table id="hroMenu_tbHeader" cellspacing="0" cellpadding="0" border="0" align="Center" style="width:95%;border-collapse:collapse;">
<br>
<table width="95%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table width="800" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table id="tblSearch" cellspacing="1" cellpadding="2" border="0" style="background- color:Silver;width:300px;">
<tbody>
<tr class="StandardRow">
<tr class="StandardRow">
<tr class="StandardRow">
<td>
<b>Company Name:</b>
</td>
<td>
<input id="uxCompanyName" type="text" style="font-size:11px;width:150px;" maxlength="40" name="uxCompanyName">
</td>
</tr>
<tr class="StandardRow">
<tr style="background-color:WhiteSmoke;">
</tbody>
</table>
</td>
<td valign="bottom" align="right">
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<tr>
</tbody>
</table>
</form>
<div id="i1110_g" style="position: absolute; left: -500px; top: -2000px; width: 140px; height: 0px; visibility: hidden; z-index: 901;">
</body>
</html>
</frame>
</frameset>
</html>
</frame>
</frameset>
</html>
</frame>
</frameset>
Below code should work for you:
WebDriverWait wait = new WebDriverWait(driver,10);
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt("bottom"));
element.findElement(By.id("uxCompanyName")).clear();
element.findElement(By.id("uxCompanyName")).sendKeys("password");
It will wait for frame, switch to it and then interacts with the element in it.
Selenium has trouble with frames.
Try
getWebDriver().switchTo().frame( getElementById( "frameId" ) );
Then grab the element
#Pradish.. The reason why you couldn't detect the WebElement with id 'uxCompanyName' was the element was not in your current frame. If you face the same problem again then just include below line before you perform any action on the WebElement. "assertTrue(driver.getPageSource().contains("uxCompanyName"));" uxCompanyName can be replaced by any unique identity of the WebElement. If its true it will progress if not the your script will Stop at the same line. Which indicates that the required WebElement is not in the frame and then you can look for the frames available on that page.
Hope this helps you to figure out the reason and the solution.

Categories