Skip to main content

Jquery, adding and listing rows dynamically

In this example, there is a categories table. Table has category_id and category_name columns. Database transactions are made by hibernate. On the web page side, adding and removing rows are done using jquery. Jquery code is highlighted with yellow.

hibernate.hbm.xml is like:
<class name="com.test.BsCat" table="categories">
  <id column="category_id" name="catId" type="java.lang.Short">
  <generator class="increment"/>
  </id>
  <property column="category_name" name="catName" lazy="false" type="java.lang.String"/>
 </class>

BsCat.java is like:
package com.test;


public class BsCat {
private Short  catId;
private String catName;

public Short getCatId() {
return catId;
}
public void setCatId(Short catId) {
this.catId = catId;
}
public String getCatName() {
return catName;
}
public void setCatName(String catName) {
this.catName = catName;
}
}

manage_categories.jsp is like:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.*" %>
<%@ page import="org.hibernate.HibernateException" %>
<%@ page import="org.hibernate.Session" %>
<%@ page import="org.hibernate.SessionFactory" %>
<%@ page import="org.hibernate.Transaction" %>
<%@ page import="org.hibernate.cfg.*" %>
<%@ page import="org.hibernate.Query" %>
<%@ page import="com.test.BsCat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Categories</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
$('#catrow').hide();
$('#addcat').click(function () {
        $(this).hide();
        $('#catrow').show();
    });
});


function subForm(sub_name)
{
    document.getElementById('fromwhere').value=sub_name;
    document.catsform.action='manage_categories.jsp';
    document.catsform.submit();
}
</script>
</head>
<body>
<%
Session sess = null;
try {
SessionFactory sessionFact = new Configuration().configure().buildSessionFactory();
sess = sessionFact.openSession();
String fromCat = request.getParameter("fromwhere");
String newCatName = request.getParameter("catname");
if (fromCat != null) {
if (fromCat.equals("cataddnew")) {
if (newCatName != null) {
Transaction txins = sess.beginTransaction();
BsCat newCat = new BsCat();
newCat.setCatName(newCatName);
sess.save(newCat);
txins.commit();

} else if (fromCat.startsWith("catdelete")) {
String cid = fromCat.substring(9);
String hql = "delete from BsCat where catId = " + cid;
Query qCats = sess.createQuery(hql);
int row = qCats.executeUpdate();
}
}


  sess.beginTransaction();
Query qCats = sess.createQuery("from BsCat order by catName");
List allCats = qCats.list();
%>
<div id="content">
<br>
<form name="catsform" action="" method="post">
<input type="hidden" maxlength="20" name="fromwhere" id="fromwhere"/>
<table class="liste" align="center">
        <tr>
        <th><b>Category Name</b></th>
</tr>
<%
for (int i = 0; i < allCats.size(); i++) {
BsCat oneCat = (BsCat) allCats.get(i);
%>  
<tr>
<td>
<%=oneCat.getCatName().toString()%>
</td>
<td>
<a href="#" onClick="subForm('catdelete<%=oneCat.getCatId().toString()%>')"><img src="images/del.gif" border="0" /></a>
</td>
</tr>
<%
}
%>
<tr id="catrow">
<td>
<input type="text" name="catname" id="catname"/>
</td>
<td>
<a href="#" onClick="subForm('cataddnew')"><img src="images/ok.gif" border="0" /></a>
</td>
</tr>
<tr>
<td></td>
<td id="addcat"><img src="images/plus.png"/></td>
</tr>
    </table>
</form>
<br>
</div>
<%
} catch(Exception e) {
out.println(e.getMessage());
} finally {
sess.flush();
sess.close();
}
%>
</body>
</html>






Comments

Popular posts from this blog