I have an HTML table with rows fetched from a database displayed in that table. I want the user to be able to delete a row by clicking on a delete hyperlink or button besides each row.
How do I invoke a JSP function on the page, when the user clicks on each of those delete hyperlinks or button, so that I can delete that row's entry from the database? What exactly should the <a>
or <button>
tag have to call the JSP function?
Note that I need to call a JSP function, not a JavaScript function.
Simplest way: just let the link point to a JSP page and pass row ID as parameter:
<a href="delete.jsp?id=1">delete</a>
And in delete.jsp
(I'm leaving obvious request parameter checking/validating aside):
<% dao.delete(Long.valueOf(request.getParameter("id"))); %>
This is however a pretty poor practice (that was still an understatement) and due to two reasons:
HTTP requests which modifies the data on the server side should not be done by GET, but by POST. Links are implicit GET. Imagine what would happen when a web crawler like googlebot tries to follow all delete links. You should use a <form method="post">
and a <button type="submit">
for the delete action. You can however use CSS to style the button to look like a link. Edit links which just preload the item to prefill the edit form can safely be GET.
Putting business logic (functions as you call it) in a JSP using scriptlets (those <% %>
things) is discouraged. You should use a Servlet to control, preprocess and postprocess HTTP requests.
Since you didn't tell any word about a servlet in your question, I suspect that you're already using scriptlets to load data from DB and display it in a table. That should also be done by a servlet.
Here's a basic kickoff example how to do it all. I have no idea what the table data represents, so let take Product
as an example.
public class Product {
private Long id;
private String name;
private String description;
private BigDecimal price;
// Add/generate public getters and setters.
}
And then the JSP file which uses JSTL (just drop jstl-1.2.jar in /WEB-INF/lib
to install it) to display the products in a table with an edit link and a delete button in each row:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
...
<form action="products" method="post">
<table>
<c:forEach items="${products}" var="product">
<tr>
<td><c:out value="${fn:escapeXml(product.name)}" /></td>
<td><c:out value="${product.description}" /></td>
<td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
<td><a href="${pageContext.request.contextPath}/product?edit=${product.id}">edit</a></td>
<td><button type="submit" name="delete" value="${product.id}">delete</button></td>
</tr>
</c:forEach>
</table>
<a href="${pageContext.request.contextPath}/product">add</a>
</form>
Note the difference of approach: the edit link fires a GET request with an unique identifier of the item as request parameter. The delete button however fires a POST request instead whereby the unique identifier of the item is passed as value of the button itself.
Save it as products.jsp
and put it in /WEB-INF
folder so that it's not directly accessible by URL (so that the enduser is forced to call the servlet for that).
Here's how the servlet roughly look like (validation omitted for brevity):
@WebServlet("/products")
public class ProductsServlet extends HttpServlet {
private ProductDAO productDAO; // EJB, plain DAO, etc.
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = productDAO.list();
request.setAttribute("products", products); // Will be available as ${products} in JSP.
request.getRequestDispatcher("/WEB-INF/products.jsp").forward(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String delete = request.getParameter("delete");
if (delete != null) { // Is the delete button pressed?
productDAO.delete(Long.valueOf(delete));
}
response.sendRedirect(request.getContextPath() + "/products"); // Refresh page with table.
}
}
Here's how the add/edit form at /WEB-INF/product.jsp
can look like:
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<form action="product" method="post">
<label for="name">Name</label>
<input id="name" name="name" value="${fn:escapeXml(product.name)}" />
<br/>
<label for="description">Description</label>
<input id="description" name="description" value="${fn:escapeXml(product.description)}" />
<br/>
<label for="price">Price</label>
<input id="price" name="price" value="${fn:escapeXml(product.price)}" />
<br/>
<button type="submit" name="save" value="${product.id}">save</button>
</form>
The fn:escapeXml()
is just there to prevent XSS attacks when edit data is redisplayed, it does exactly the same as <c:out>
, only better suitable for usage in attribtues.
Here's how the product
servlet can look like (again, conversion/validation omitted for brevity):
@WebServlet("/product")
public class ProductServlet extends HttpServlet {
private ProductDAO productDAO; // EJB, plain DAO, etc.
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String edit = request.getParameter("edit");
if (edit != null) { // Is the edit link clicked?
Product product = productDAO.find(Long.valueOf(delete));
request.setAttribute("product", product); // Will be available as ${product} in JSP.
}
request.getRequestDispatcher("/WEB-INF/product.jsp").forward(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String save = request.getParameter("save");
if (save != null) { // Is the save button pressed? (note: if empty then no product ID was supplied, which means that it's "add product".
Product product = (save.isEmpty()) ? new Product() : productDAO.find(Long.valueOf(save));
product.setName(request.getParameter("name"));
product.setDescription(request.getParameter("description"));
product.setPrice(new BigDecimal(request.getParameter("price")));
productDAO.save(product);
}
response.sendRedirect(request.getContextPath() + "/products"); // Go to page with table.
}
}
Deploy and run it. You can open the table by http://example.com/contextname/products.
See also:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With