Removing an Element from a repository with Spring and Html - html

I am trying to Remove a topic from CrudRepository, but the checkboxes I am trying to create don't show up.
I have an Add Method which works just fine, but the remove doesn't.
HTML: hello.html
for the navigation and head fragments
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org/"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="head">
<title> Lunch Planner Beta </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
<nav th:fragment="navigation">
List |
Add |
<a th:href="/removeTopic">Remove</a>
</nav>
<form th:action="#{/home}" method="get">
<input type="submit" value="Home"/>
</form>
<br/>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign OUT"/>
</form>
</body>
</html>
The part of TopicController.java
#RequestMapping(method = RequestMethod.POST, value = "/remove", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
#Transactional
public ModelAndView deleteTopic(Long id, HttpServletResponse response, Errors errors){
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
model.addObject("topic",topicService.getTopic(id));
topicService.deleteTopic(id);
return new ModelAndView("home");
}
HTML: removeTopic.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="hello :: head">
</head>
<body class="container">
<nav th:replace="hello :: navigation"></nav>
<form th:action="#{/api/remove}" th:object="${topic}" method="post">
<div th:each="topic: ${topic}" class="checkbox">
<input type="radio" name="id" th:value="${topics.id}" th:id="${topics.id}"/>
<label th:for="${topics.id}" th:text="${topics.category}"></label>
<br/>
</div>
<input type="submit" value="Remove Topic"/>
</form>
</body>
</html>
And here is what is happeneing:

Your problem is in the loop, you are using the same object to iterate itself
th:each="topic: ${topic}"
You should have something similar to this
<div th:each="item: ${topics}" class="checkbox">
<input type="radio" name="id" th:value="${item.id}" th:id="${item.id}"/>
<label th:for="${item.id}" th:text="${item.category}"></label>
<br/> <!-- Do not use this tag to add vertical space, use css classes-->
</div>

Thanks to https://stackoverflow.com/users/2757561/cralfaro we were able to fix the connection between the controller and the removeTopic.html
The problem was is the hello.html at the
<a th:href="/removeTopic">Remove</a>
and this is how it should be:
<a th:href="#{/api/removeTopic}">Remove</a>

Related

thymeleaf <div th:each....> disappears after refreshing page

This is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="EUC-KR">
<title>Taco cloud</title>
</head>
<body>
<h1>Designate your taco!</h1>
<img th:src="#{/images/TacoCloud.png}">
<form method="POST" th:object="${taco}">
<div class="grid">
<div class="ingredient-group" id="wraps">
<h3>Designate your taco!</h3>
<div th:each="ingredient:${wrap}">
<input type="checkbox" value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span>
</div>
</div>
</div>
<button>Submit your taco</button>
</form>
</body>
</html>
When I press the Submit your taco button, my controller returns this html file back with
return "design";
But the problem is after the controller runs return "design",
the following part disappears:
<div th:each="ingredient:${wrap}">
<input type="checkbox" value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span>
</div>
How can I fix it?

How to Display error message when record not found in database

How to search records in table . i want to search data using id. if that id is available in database then open edit.jsp if not exist then display any error message. i want to use jsp technology.
Search.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>
<link rel="stylesheet" type="text/css" href="hicourt.css"/>
<script language="javascript" type="text/javascript">
</script>
<body onLoad="randomString()">
<form name="f1" method="post" action="edit.jsp">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation" align="center">
Search Registration Number
</div>
<div id="content_area">
<p class="contact"><label for="name"><span style="font-weight:bold">EDIT</span></label>
<input id="id" name="id" placeholder="Advocate Reg Number" required="" type="text">
</p>
<div style="text-align:center">
<input name="submit" id="submit" tabindex="10" value="EDIT" align="middle"type="submit">
</div> </div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>

how to edit data in html form after retrieving it from database

i have created and added data into database through jsp.Now my problem is with edit/update the database which should be done through html form.In one for i select student rollno and form should display all other fields and then i can edit it and update the database.
editcourse.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<form name="f1" method="post" class="anu" action="Edit_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Edit Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" ></span></label>
</div><br>
<div class="buttons">
<button type="submit" class="primaryAction">Edit</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
</form>
</body>
</html>
edit_coursedetails.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<%
ccode=request.getParameter("txtCoursecode");
try {
Statement st = null;
st=conn.createStatement();
ResultSet rs = st.executeQuery("select * from courses where course='"+txtCoursecode+"'");
if(rs.next())
{
cname=rs.getString("cname");
Description=rs.getString("Description");
}
%>
Edit courses
<form name="f1" method="post" class="anu" action="Add_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Add Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" value="<%=rs.ccode%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Course Name:
<span><input type="text" id="txtCoursename" name="txtCoursename" value="<%=rs.cname%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Duration:
<span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" id="txtDuration" name="txtDuration" value="<%=rs.getString("3")%>"></span></label>
</div>
<div class="buttons">
<button type="submit" class="primaryAction">Update</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
<%
}
}
catch(Exception e){}
%>
</form>
</body>
</html>
in editcourse form by giving ccode it should display all other field from database with thier value and then i can modify it
You can use either ajax or give url of jsp in form action attribute.
then in that jsp get txtRollno from request, retrieve fields from database for this rollno, populate data into appropriate field and then you can edit it and then update into database.
As other friends said you need to use ajax call and you said that you don't know ajax.
So I think these tutorials help you:
1) What is AJAX?
2) AJAX Example
3) jQuery Ajax call tutorial
Good Luck ;)

html page with frameset tag not working

Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.

I am trying to validate this form page xhtml and it will not validate

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Magic Genie</title>
<link href="java-game.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="java-game.js"></script>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form>
Your question: <input type="text" name="question" size="40">
<input type="button" name="ask" value="Ask the Genie" onClick="if (this.form.question.value!='') this.form.answer.value = genie();">
<br />
<br />
Your magic genie says: <input type="text" name="answer" size="50">
</form></p>
</div>
</body>
</html>
Well your problem is you have no doctype, html, head or body tag.
Your page will not validate, simply because you are incorrectly nesting/closing tags, and some tags do not have correct attributes to them.
First of ALL things you are talking about xhtml and added xhtml-1.0-strict tag, but your heading states: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
I've never in my life seen <body class="oneColFixCtr"> class, being added to <body>. You can manipulate <body> in CSS by: body {background: red;}.
There were 1x <div> tags missing! There was 1x extra </p>. Lots of tags were not ended with /. <form> was missing method and action parameter!
Also, if you want 100% perfect validation, you cant use onclick="". I added jQuery to your script.
Live example: http://kopli.pri.ee/stackoverflow/5653786.php (click here to validate)
Full version of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I am trying to validate this form page xhtml and it will not validate - Kalle H. Väravas</title>
<link href="java-game.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="java-game.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form method="post" action="">
Your question: <input type="text" name="question" size="40" />
<input type="button" name="ask" value="Ask the Genie" /><br />
<br />
Your magic genie says: <input type="text" name="answer" size="50" />
</form>
</div>
</div>
<script type="text/javascript">
$('input[name=ask]').click(function () {
if ($(this).form.question.value!='') {
$(this).form.answer.value = genie();
}
});
</script>
</body>
</html>