CODEWITHSUNDEEP
javajspservlets
MMMMS
MMMMS

Reputation: 2201

How to display two table data in single jsp page represented button click

I am trying to develop like online shopping cart using jsp and servlet.I have a two tables like below,

tbl_Electronics :

P_Id | P_Name | Price

E01    Watch     250
E02    Mobile    250

tbl_Personal :

P_Id | P_Name | Price

P01    Shop    25
P02    Oil     15

I have home page like below,

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h1>Catergories</h1>
<input type="button" id="Electronics" value="Electronics"> <br><br>
<input type="button" id="Personal" value="Personal Care"> <br>
<table border="1">
<thead>
<tr>
<th>Product_Id</th>
<th>Product_Name</th>
<th>Product_Price</th>
<th>Order now?</th>
</tr>
</thead>
<tbody>
<tr>
<!-- // this is sample code that how want to display -->
<c:forEach var="P" items="${TablValuesBasedOnButton}">
<tr><c:out value="${P.P_Id }" /><tr>
<tr><c:out value="${P.P_Name }" /><tr>
<tr><c:out value="${P.Price }" /><tr>
<tr><input type="checkbox" value="${P.P_Id }" class="checkboxclass"></tr>
</c:forEach>
</tr>
</tbody>
</table>

<script type="text/javascript">
$("#Electronics").click(function(){
    alert("This is Electronics Button");
})
$("#Personal").click(function(){
    alert("This is Personal care Button");
})

</script>
</body>
</html>

When user click on button that represented table data should display in the table.Example - if user click Electronics button then all tbl_Electronics table values display in the view table.I am able to do in two different pages but i dont have idea in single page displays different table values.

Please suggest me how to do this and sample code will be help me lot.

Upvotes: 2

Views: 3491

Answers (1)

drgPP
drgPP

Reputation: 936

Ok, so first of all, since your tables has the same columns, you must have an Interface

public Interface IProduct {
  getProductId();
  getProductName();
  getProductPrice(); 
}

Now, you must have views for your tables (beans) which implement this interface (take care of the fields names);

public Class Electronics implements IProduct, java.io.Serializable {
  private Long productId;
  private String productName;
  private Double productPrice;

  //Getters must implement the interface methods
}

//Same logic for class Personal

Now, in your jsp you must handle the click button actions, something like this (put the buttons in a form):

$("#Electronics").click(function(){
   document.myform.method = "post";
   document.myform.action ="GetElectronicsValuesServlet";
   document.myForm.submit();
});

Inside the servelet, in your doPost() method you do the logic, working with the interface reference, something like this:

List<IProduct> electronics = //db method call
request.setAttribute("products", electronics);
RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
rd.forward(request, response);

//Same logic in the second servlet, but populate the list interface references with objects of persons, and put the list on the same key "products"

Now, in the page, use interface reference to get the values:

//Retrieve the list of products from request and iterate over it, do it with //jstl, for presentation i'm using scriplets
<%for (IProduct product : products) {%>
  <tr><%=product.getProductId()%></tr>
  <tr><%=product.getProductName()%></tr>
  <tr><%=product.getProductPrice()%></tr>
<%}%>

Something similar should help you to resolve your problem. Hope it helps.

Upvotes: 1

Related Questions