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"/>
  <property column="category_name" name="catName" lazy="false" type="java.lang.String"/>
 </class> 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" "">
<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() { 
$('#addcat').click(function () {

function subForm(sub_name)
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();

} 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();

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


Popular posts from this blog

Find and replace with sed command in Linux

Find and replace feature is always handy. It can turn into a torture when it comes to change or delete a simple constant string in a text file. There is a handy tool in linux for doing these kind of tihngs. Actually sed is not a text editor but it is used outside of the text file to make changes.