TEKNE - TECHNE

Eclipse Glassfish EE example

2011-12-05T12:32:00.000-08:00

Hi, this is a simple ear application that demonstrates how to use eclipse with glassfish to build enterprise applications (J2EE). It combines the standard hello example of J2EE examples from NetBeans with the calculator example of web services example of NetBeans again. There is a simple trick in the web.xml of the war file to run the two examples seperately from the IE command line.

1.1 Create an Enterprise Application (name=ServletStatelessARSEAR)
1.2 Say OK to create an ejbClient (name = ServletStatelessARS-ejbClient)
1.3 Leave the rest as it is, you will add the EJB and war projects later on.
As seen in the picture.

2.1 Create under ejbModule an interface file at the ServletStatelessARS-ejbClient client application (loc/name=enterpriseARS.servlet_stateless_ejbClient/StatelessSessionARS.java)

package enterpriseARS.servlet_stateless_ejbClient;

public interface StatelessSessionARS {

public String sayHelloARS(String name);
public int add2Parms(int parm1, int parm2);

}

2.2 Create an EJB application (name=ServletStatelessARS-ejb) and attach it to the Enterprise application using the related creation option.
2.3 Create under ejbModule (loc/name=enterpriseARS.servlet_stateless_ejb/StatelessSessionARSBean.java)
package enterpriseARS.servlet_stateless_ejb;
import javax.ejb.LocalBean;
import javax.ejb.Stateless;
import javax.jws.WebService;

import enterpriseARS.servlet_stateless_ejbClient.StatelessSessionARS;

@WebService (only for diagnostic purposes, to be used for Glassfish endpoint testing)
@Stateless
public class StatelessSessionARSBean
implements StatelessSessionARS {

public String sayHelloARS(String name) {
return "HelloARS, " + name + "!\n";
}

public int add2Parms(int parm1, int parm2){
return(parm1+parm2);
}

}
3.1 Create a dynamic web application (name=ServletStatelessARS-war) and attach it to the Enterprise application using the related creation option.

3.2 Web/index.jsp should be:
<%@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>GlassFish JSP Page</title>
</head>
<body>
<h1>Calculator Service</h1>
<form name="Submit" action="Servlet2ParmsAddARS">
<input type="text" name="value1" value="2" size="3"/>+
<input type="text" name="value2" value="2" size="3"/>=
<input type="submit" value="Get Result" name="getResult" />
</form>
</body>

</html>
3.3 Web.xml should be:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>ServletStatelessARS</display-name>
<distributable/>
<servlet>
<servlet-name>Servlet2StatelessARS</servlet-name>
<servlet-class>enterpriseARS.servlet_stateless_war.Servlet2StatelessARS</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Servlet2StatelessARS</servlet-name>
<url-pattern>/servlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Servlet2ParmsAddARS</servlet-name>
<servlet-class>enterpriseARS.servlet_stateless_war.Servlet2ParmsAddARS</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Servlet2ParmsAddARS</servlet-name>
<url-pattern>/Servlet2ParmsAddARS</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>
index.jsp
servlet
</welcome-file>
</welcome-file-list>
</web-app>

3.4 In the Java Resources/src/enterpriseARS.servlet_stateless_war package,
Create Servlet2ParmsAddARS.java

package enterpriseARS.servlet_stateless_war;
import java.io.*;

import javax.ejb.EJB;

import javax.servlet.*;
import javax.servlet.http.*;

import javax.naming.*;

import enterpriseARS.servlet_stateless_ejbClient.*;

// Though it is perfectly fine to declare the dependency on the bean
// at the type level, it is not required for stateless session bean
// Hence the next two lines are commented and we rely on the
// container to inject the bean.
// @EJB(name="StatelessSession", beanInterface=StatelessSession.class)

public class Servlet2ParmsAddARS
extends HttpServlet {

// Using injection for Stateless session bean is still thread-safe since
// the ejb container will route every request to different
// bean instances. However, for Stateful session beans the
// dependency on the bean must be declared at the type level

@EJB
private StatelessSessionARS sless;

public void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

resp.setContentType("text/html");
PrintWriter out = resp.getWriter();

try {

out.println("<h2>Servlet ClientServlet at " + req.getContextPath () + "</h2>");

int i = Integer.parseInt(req.getParameter("value1"));
int j = Integer.parseInt(req.getParameter("value2"));

int result = sless.add2Parms(i,j);

out.println("<br/>");
out.println("Result:");
out.println("" + i + " + " + j + " = " + result);

} catch (Exception ex) {
ex.printStackTrace();
System.out.println("webclient servlet test failed");
throw new ServletException(ex);
}
}

}
3.5 create Servlet2StatelessARS.java at the same package location.

package enterpriseARS.servlet_stateless_war;

import java.io.*;

import javax.ejb.EJB;

import javax.servlet.*;
import javax.servlet.http.*;

import javax.naming.*;

import enterpriseARS.servlet_stateless_ejbClient.*;
public class Servlet2StatelessARS
extends HttpServlet {
@EJB
private StatelessSessionARS sless;

public void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

resp.setContentType("text/html");
PrintWriter out = resp.getWriter();

try {

out.println("<HTML> <HEAD> <TITLE> Servlet Output </TITLE> </HEAD> <BODY BGCOLOR=white>");
out.println("<CENTER> <FONT size=+1> Servlet2Stateless:: Please enter your name </FONT> </CENTER> <p> ");
out.println("<form method=\"POST\">");
out.println("<TABLE>");
out.println("<tr><td>Name: </td>");
out.println("<td><input type=\"text\" name=\"name\"> </td>");
out.println("</tr><tr><td></td>");
out.println("<td><input type=\"submit\" name=\"sub\"> </td>");
out.println("</tr>");
out.println("</TABLE>");
out.println("</form>");
String val = req.getParameter("name");

if ((val != null) && (val.trim().length() > 0)) {
out
.println("<FONT size=+1 color=red> Greeting from StatelessSessionBean: </FONT> "
+ sless.sayHelloARS(val) + "<br>");
}
out.println("</BODY> </HTML> ");

} catch (Exception ex) {
ex.printStackTrace();
System.out.println("webclient servlet test failed");
throw new ServletException(ex);
}
}

}

4.1 It will give IDE and compile error for the EJB because currently the dynamic web application does not see the EJB application.
4.2 Right click on the dynamic web application and check that Project references indicates ejb and ejbClient applications as referred.
4.3 Go to the Java Build Path and click on the Projects tab. Add the ejb and ejbClient applications.
4.4 The IDE – compile error for the EJB disappears.
5. You may also check yhe ear application for the same items but they are done automatically for it.
6. Make sure you test the application in an orderly manner. Build the EAR application and also build the others if necessary. When you run the war application the calculator works as default. If you run
http://localhost:8080/ServletStatelessARS-war/servlet then the hello message works.

7. If you experience any problems export the ear application to a war file at the
C:\Program Files\glassfish-3.1\glassfish\domains\domain1\autodeploy
Autodeploy directory of Glassfish. Then restart Glassfish, everything will be OK.

It is free of charge to request a copy of the source files. I am sometimes hecticly busy but I promise to respond in a couple of hours.

Cheers.

Ali R+ SARAL

Referring to another project using Eclipse

2011-12-04T11:17:00.000-08:00

There are two seperate projects. Main project calls a method in the ReferredProject.

ReferredProject has
referredProjectPackage/ReferenceClass.java
package referredProjectPackage;

public class ReferenceClass {
public void sayHello(){
System.out.println("Hello from the reference class.");
}
}
MainProject has
mainPackage/MainClass.java
package mainPackage;
import referredProjectPackage.*;

public class MainClass {

/**
* @param args
*/
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("MainClass works.");
ReferenceClass rc = new ReferenceClass();
rc.sayHello();
}

}
It gives error:

Right Click on the MainProject in the PackageExplorer. Select properties at the bottom. Properties for the MainProject window opens. Select JAVA build path and then select the Projects tab.

Select ReferredProject and then click OK. The errors disappear and the program works.
But to be on the safe side, do not forget to do also:
Right click on the MainProject, select Project References, select ReferredProject and click OK.

How to use Eclipse with GlassFish server(2)

2011-12-03T11:30:00.000-08:00

13- Right Click on the application name and slide to the bottom and select ‘properties’ for our web app TestEclipseGlassFishARS.

14- Select libraries and observe the source of the problem.

15- Select JRE System Library and click the edit button on the right.

16- Click the Add button the Installed JREs window.

17- Select Standard VM on the JRE type window.

18- The JRE Definition window opens. Select JRE Home using the directory button and go to the JDK 1.6 installation directory.

19- Your choice fills in all the necessary fields on the JRE Definition window. Click the finish button.

20- Installed JRE’s window appears again with the newly added JDK 1.6 directory.

21- Select JDK 1.6 and return back to the JRE System Library window which also has the new addition as seen in the picture. Select JDK 1.6 as Alternate JRE and then click Finish.

22- JRE System Library is now changed to JDK 1.6 as required by GlassFish.

23- Try once more to run the test web app. It works. Don’t g’ve up! You will make it.

Cheers.

Ali R+ SARAL

Note: I know that the picture quality may not prove to be good. If you like you may obtain a Word format of this tutorial for free from arsaral(at)yahoo.com. Sometimes I may be hecticly busy but I promise a response with in a couple of hours.

How to use Eclipse with GlassFish server (1)

2011-12-03T10:51:00.000-08:00

I am going to explain how to use Eclipse with Glassfish as a server. This tutorial uses a very simple, picture based approach. So trust me and take my advises you will make it to the end for sure.
1- Create a dynamic web project:
Open eclipse, file, new, [web], dynamic web project

2- Create a new server
Go to bottom right frame, select servers, right click in the frame content area, server, new

3- If GlassFish connection has been made for your Eclipse installation previously you will get this picture. But in your case, GlassFish will not appear.

4- Click ‘Download additional web servers’. It will open ‘ install new extension’ window and begin searching the internet. This will take a long time.

5- Be patient and wait till the end when finally it finds GlassFish and Jboss.

6- Select GlassFish and see that the previous window has the GlassFish items now.

7- Select GlassFish 3.1 and a new screen taht asks for the location of Glassfish on your computer opens. It also calls for your choice of jre.

8- Then you are asked for the admin directory and the admin password which happens to be adminadmin

9- Now it is time to try the very simple dynamic web program that we have created.

Do not forget to put index.jsp as a welcome file in the web.xml.
Index.jsp is on the picture.

10. Run the webapp on the new server.

11- Select Glassfish

12- ERROR: Glassfish requires JDK 1.6 and not a JRE.

You can request a better printed World version of this tutorial from arsaral(at)yahoo.com

The pictures are much better and scripts can be easily read in that version.

Struts2 Hibernate Spring Tutorial

2011-09-25T10:48:00.000-07:00

Struts - Hibernate - Spring Application

This is a tutorial that explains how Struts2 , Hibernate and Spring(IoC) is mixed together and used in the same application.

I based my work on the examples given in Vaan Nila Struts2 tutorial. Vaan Nila gives the Struts2Example14 for Struts2 - Spring and Struts2Example17 for Struts2 - Hibernate.

My trick is: I took the Struts2Example17 project and added it the lib/jars of the Struts2Example14. Then I changed the struts.xml from:

/register.jsp
to: (my StrutsHibernateSpring application)

/register.jsp

Similar Struts2Example14 's WEB-INF/applicationContext.xml:

I did WEB-INF/applicationContext.xml in StrutsHibernateSpring:

I also added the Spring listener to the web.xml in StrutsHibernateSpring :

org.springframework.web.context.ContextLoaderListener

which is similar to the Struts2Example14 web.xml.

It worked.

Here is the code:

struts.xml
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

listUser

/register.jsp

hibernate.config.xml

"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

org.hsqldb.jdbcDriver
jdbc:hsqldb:hsql://localhost
sa

1
org.hibernate.dialect.HSQLDialect
true
create

com.vaannila.dao
UserDAO.java
package com.vaannila.dao;

import java.util.List;
import com.vaannila.domain.User;

public interface UserDAO {

public void saveUser(User user);
public List listUser();
}

UserDAOImpl.java
package com.vaannila.dao;

import java.util.List;

import org.hibernate.Session;
import org.hibernate.Transaction;

import com.googlecode.s2hibernate.struts2.plugin.annotations.SessionTarget;
import com.googlecode.s2hibernate.struts2.plugin.annotations.TransactionTarget;
import com.vaannila.domain.User;

public class UserDAOImpl implements UserDAO {

@SessionTarget
Session session;
@TransactionTarget
Transaction transaction;

@SuppressWarnings("unchecked")
@Override
public List listUser() {
List courses = null;
try {
courses = session.createQuery("from User").list();
} catch (Exception e) {
e.printStackTrace();
}
return courses;
}

@Override
public void saveUser(User user) {
try {
session.save(user);
} catch (Exception e) {
transaction.rollback();
e.printStackTrace();
}
}

}

com.vaannila.domain
User.java
package com.vaannila.domain;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="USER")
public class User {

private Long id;
private String name;
private String password;
private String gender;
private String country;
private String aboutYou;
private Boolean mailingList;

@Id
@GeneratedValue
@Column(name="USER_ID")
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}

@Column(name="USER_NAME")
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}

@Column(name="USER_PASSWORD")
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}

@Column(name="USER_GENDER")
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}

@Column(name="USER_COUNTRY")
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}

@Column(name="USER_ABOUT_YOU")
public String getAboutYou() {
return aboutYou;
}
public void setAboutYou(String aboutYou) {
this.aboutYou = aboutYou;
}

@Column(name="USER_MAILING_LIST")
public Boolean getMailingList() {
return mailingList;
}
public void setMailingList(Boolean mailingList) {
this.mailingList = mailingList;
}

}

WebContent
WEB-INF
lib
application-Context.xml

web.xml

StrutsHibernateSpringARS

struts2

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

org.springframework.web.context.ContextLoaderListener

struts2

index.jsp

WebContent
hs.bat
set classpath=.\WEB-INF\lib\hsqldb.jar;%classpath%
java org.hsqldb.Server
hs2.bat
java -cp ./WEB-INF/lib/hsqldb.jar org.hsqldb.util.DatabaseManager

I went one step further and I did a DAO dependency injection in my application StrHibSprARS2.
applicationContext.xml in src together with hibernate.cfg.xml and struts.xml

(It would be wiser to change the name of the applicationContext.xml to beans.xml.)
UserAction.java would change to:
...
//private UserDAO userDAO = new UserDAOImpl();

XmlBeanFactory factory = new XmlBeanFactory(new ClassPathResource("applicationContext.xml"));
private UserDAO userDAO = (UserDAOImpl) factory.getBean("userDAOImplClass");
...
(again the name applicationContext.xml gets mixed with the real one in the WEB-INF. I tried
successfully to clean up the unnecessary entries in these two applicationContext files, namely
I deleted id="userActionClass" item from the src beans.xml and vise versa. No problem.)

Some notes about VaanNila's Hibernate Tutorial Examples

2011-09-13T10:36:00.000-07:00

This note explains how to run the hibernate examples given
in VaanNila's Hibernate Tutorial.
http://www.vaannila.com/hibernate/hibernate-tutorial/hibernate-tutorial.html

ERRORS MESSAGES AND THE SOLUTIONS:

Initial SessionFactory creation failed.java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
Exception in thread "main" java.lang.ExceptionInInitializerError
at com.vaannila.util.HibernateUtil.(HibernateUtil.java:14)

add commons-logging-1.1.1
------------------------------------
12.Eyl.2011 20:08:36 org.hibernate.cfg.Environment
INFO: Hibernate 3.2.5
12.Eyl.2011 20:08:36 org.hibernate.cfg.Environment
INFO: hibernate.properties not found
12.Eyl.2011 20:08:36 org.hibernate.cfg.Environment buildBytecodeProvider
INFO: Bytecode provider name : cglib

...
INFO: building session factory
Initial SessionFactory creation failed.java.lang.NoClassDefFoundError: net/sf/cglib/proxy/CallbackFilter
Exception in thread "main" java.lang.ExceptionInInitializerError
at com.vaannila.util.HibernateUtil.(HibernateUtil.java:14)

cglib problem
add cglib.jar
-------------------------------
12.Eyl.2011 20:10:55 org.hibernate.impl.SessionFactoryImpl
INFO: building session factory
Initial SessionFactory creation failed.java.lang.NoClassDefFoundError: org/objectweb/asm/Type

cglib needs asm.jar
-------------------------------

INFO: exporting generated schema to database
12.Eyl.2011 20:12:25 org.hibernate.tool.hbm2ddl.SchemaExport execute
INFO: schema export complete
Hibernate: insert into COURSES (COURSE_ID, COURSE_NAME) values (null, ?)
Hibernate: call identity()
Hibernate: insert into COURSES (COURSE_ID, COURSE_NAME) values (null, ?)
Hibernate: call identity()
Hibernate: insert into COURSES (COURSE_ID, COURSE_NAME) values (null, ?)
Hibernate: call identity()
Hibernate: select course0_.COURSE_ID as COURSE1_0_, course0_.COURSE_NAME as COURSE2_0_ from COURSES course0_
Physics
Chemistry
Maths
Hibernate: select course0_.COURSE_ID as COURSE1_0_0_, course0_.COURSE_NAME as COURSE2_0_0_ from COURSES course0_ where course0_.COURSE_ID=?
Hibernate: update COURSES set COURSE_NAME=? where COURSE_ID=?
Hibernate: select course0_.COURSE_ID as COURSE1_0_0_, course0_.COURSE_NAME as COURSE2_0_0_ from COURSES course0_ where course0_.COURSE_ID=?
Hibernate: delete from COURSES where COURSE_ID=?
Hibernate: select course0_.COURSE_ID as COURSE1_0_, course0_.COURSE_NAME as COURSE2_0_ from COURSES course0_
Physics
Mathematics

It works...
-----------
Directory of C:\Users\ars\Desktop\VN_Hibernate\HibernateExample1\lib

antlr-2.7.6.jar
asm.jar
cglib-2.2.jar
commons-collections-3.2.1.jar
commons-logging-1.1.1.jar
dom4j-1.6.1.jar
hibernate3.jar
hibernate-annotations
hibernate-commons-annotations
hsqldb.jar
javassist-3.4.GA.jar
jta-1.1.jar
slf4j-api-1.6.2.jar
slf4j-simple-1.6.2.jar

Some notes about VaanNila's Spring Hibernate Integration Tutorial

2011-09-09T12:29:00.001-07:00

Some notes about Vaanilla's Spring Hibernate Integration Tutorial
http://www.vaannila.com/spring/spring-hibernate-integration-1.html

SpringExample17 indicates the below list as necessary dependecies.

01.antlr-2.7.6
02.antlr-runtime-3.0
03.commons-collections-3.1
04.commons-dbcp
05.commons-logging-1.0.4
06.commons-pool
07.dom4j-1.6.1
08.ejb3-persistence
09.hibernate3
10.hibernate-annotations
11.hibernate-commons-annotations
12.hsqldb
13.javassist-3.4.GA
14.jstl
15.jta-1.1
16.org.springframework.asm-3.0.0.M3
17.org.springframework.beans-3.0.0.M3
18.org.springframework.context-3.0.0.M3
19.org.springframework.context.support-3.0.0.M3
20.org.springframework.core-3.0.0.M3
21.org.springframework.expression-3.0.0.M3
22.org.springframework.jdbc-3.0.0.M3
23.org.springframework.orm-3.0.0.M3
24.org.springframework.transaction-3.0.0.M3
25.org.springframework.web-3.0.0.M3
26.org.springframework.web.servlet-3.0.0.M3
27.slf4j-api-1.5.6
28.slf4j-simple-1.5.6
29.standard

I used the below list of dependecies:
Directory of C:\Users\ars\Desktop\Str_Hib_Spr\SpringExample17\WebContent\WEB-INF\lib

antlr-2.7.6.jar
antlr-runtime-3.0.jar
asm.jar
cglib-2.2.jar
commons-collections.jar
commons-dbcp.jar
commons-logging.jar
commons-pool.jar
dom4j-1.6.1.jar
hibernate-annotations.jar
hibernate-commons-annotations.jar
hibernate3.jar
hsqldb.jar
javassist-3.4.GA.jar
javax.persistence.jar
javax.servlet_2.4.0.v200706111738.jar
jstl.jar
jta-1.1.jar
org.springframework.asm-3.1.0.M2.jar
org.springframework.beans-3.1.0.M2.jar
org.springframework.context-3.1.0.M2.jar
org.springframework.context.support-3.1.0.M2.jar
org.springframework.core-3.1.0.M2.jar
org.springframework.expression-3.1.0.M2.jar
org.springframework.jdbc-3.1.0.M2.jar
org.springframework.orm-3.1.0.M2.jar
org.springframework.transaction-3.1.0.M2.jar
org.springframework.web-3.1.0.M2.jar
org.springframework.web.servlet-3.1.0.M2.jar
slf4j-api-1.6.2.jar
slf4j-simple-1.6.2.jar
standard.jar

I had to add asm.jar and cglib-2.2.jar because of the problems listed below.

exception

org.springframework.web.util.NestedServletException: Request processing failed;
nested exception is org.springframework.jdbc.UncategorizedSQLException: Hibernate operation:
Cannot open connection; uncategorized SQLException for SQL [???]; SQL state [null]; error code [0];
Cannot create PoolableConnectionFactory (socket creation error);
nested exception is org.apache.commons.dbcp.SQLNestedException:
Cannot create PoolableConnectionFactory (socket creation error)

root cause

org.springframework.jdbc.UncategorizedSQLException: Hibernate operation:
Cannot open connection; uncategorized SQLException for SQL [???];
SQL state [null]; error code [0];
Cannot create PoolableConnectionFactory (socket creation error);
nested exception is org.apache.commons.dbcp.SQLNestedException:
Cannot create PoolableConnectionFactory (socket creation error)

SOLUTION:
Vaanilla assumes that you know how to run HSQLDB :-)
add hs.bat :
set classpath=.\web-inf\lib\hsqldb.jar;%classpath%
java org.hsqldb.Server

OUTPUT:
C:\Users\ars\Desktop\Str_Hib_Spr\SpringExample17\WebContent>set classpath=.\web-
inf\lib\hsqldb.jar;

C:\Users\ars\Desktop\Str_Hib_Spr\SpringExample17\WebContent>java org.hsqldb.Serv
er
[Server@6ac2a132]: [Thread[main,5,main]]: checkRunning(false) entered
[Server@6ac2a132]: [Thread[main,5,main]]: checkRunning(false) exited
[Server@6ac2a132]: Startup sequence initiated from main() method
[Server@6ac2a132]: Loaded properties from [C:\Users\ars\Desktop\Str_Hib_Spr\Spri
ngExample17\WebContent\server.properties]
[Server@6ac2a132]: Initiating startup sequence...
[Server@6ac2a132]: Server socket opened successfully in 358 ms.
[Server@6ac2a132]: Database [index=0, id=0, db=file:test, alias=] opened sucessf
ully in 156 ms.
[Server@6ac2a132]: Startup sequence completed in 514 ms.
[Server@6ac2a132]: 2011-09-09 20:21:26.494 HSQLDB server 1.8.0 is online
[Server@6ac2a132]: To close normally, connect and execute SHUTDOWN SQL
[Server@6ac2a132]: From command line, use [Ctrl]+[C] to abort abruptly
----------------

exception
...
SEVERE: Context initialization failed
org.springframework.beans.factory.BeanCreationException:
Error creating bean with name 'mySessionFactory' defined in ServletContext resource [/WEB-INF/dispatcher-servlet.xml]:
Invocation of init method failed; nested exception is java.lang.NoClassDefFoundError:
net/sf/cglib/proxy/CallbackFilter
...
SEVERE: Servlet /SpringExample17 threw load() exception
java.lang.ClassNotFoundException: net.sf.cglib.proxy.CallbackFilter

SOLUTION:
add cglib.jar
--------------------

exception

root cause

org.springframework.beans.factory.BeanCreationException:
Error creating bean with name 'mySessionFactory' defined in ServletContext resource [/WEB-INF/dispatcher-servlet.xml]:
Invocation of init method failed; nested exception is java.lang.NoClassDefFoundError:
Could not initialize class net.sf.cglib.proxy.Enhancer

SOLUTION:
cglib depends on asm.jar:

add asm.jar
---------------------------

If there are any problems related to antlr add:
antlr-2.7.5H3

If there are still any more problems:
arsaral [at] yahoo [dot] com

Cheers.

Ali R+

Struts2 JQuery AjaxFORMS-4

2011-03-31T12:50:00.000-07:00

Here comes some button set examples. It is so simple that it can not be explained. The AJAX-JSON call has to be pondered a bit.

The AJAX submit activates the jsonsample action. the data structures that are defined in the jsonsample and updated in the execute method can be accessed at AjaxForms10.jsp's
...
<sj:checkboxlist
...
list="languageList"
...
So, when the JsonSample.java works the list of the checkbox is set.

struts.xml has the below entry for jsonsample:
...
<action name="jsonsample" class="ARS.JsonSample" method="execute">
<result type="json"></result>
</action>
...

The full code is below:

AjaxForms10.jsp
---------------
<%--
Buttonset / Checkboxes

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="formResult">formResult</div>
Buttonset that was populated from a List with String values.
<s:form id="form" action="echo" theme="xhtml">
<sj:checkboxlist
id="checkboxbuttonset"
tooltip="Choose your Friends"
label="Friends"
list="{'Patrick', 'Jason', 'Jay', 'Toby', 'Rene'}"
name="echo"/>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
</s:form>
<br/>
Buttonset that was populated from AJAX JSON Result.
<s:form id="form2" action="echo" theme="xhtml">
<s:url id="remoteurl" action="jsonsample"/>
<sj:checkboxlist
href="%{remoteurl}"
id="remoteCheckboxlist"
name="echo"
list="languageList"
label="Language"
/>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
</s:form>

<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/></body>
</html>

JsonSample.java
---------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package ARS;

import com.opensymphony.xwork2.Action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.opensymphony.xwork2.ActionSupport;

public class JsonSample extends ActionSupport{

private static final long serialVersionUID = -2223948287805083119L;
private List<String> languageList;
private List<ListValue> languageObjList;
private Map<String, String> languageMap;

// @Actions({
// @Action(
// value="/jsonsample",
// results={
// @Result(name="success",type="json")
// })
// })
public String execute() {

languageList = new ArrayList<String>();
languageObjList = new ArrayList<ListValue>();
languageMap = new HashMap<String, String>();

languageList.add("Java");
languageList.add("PHP");
languageList.add("C++");

languageMap.put("J", "Java");
languageMap.put("P", "PHP");
languageMap.put("C", "C++");

languageObjList.add(new ListValue("J", "Java"));
languageObjList.add(new ListValue("P", "PHP"));
languageObjList.add(new ListValue("C", "C++"));

return SUCCESS;
}

public String getJSON(){
return execute();
}

public List<String> getLanguageList()
{
return languageList;
}

public Map<String, String> getLanguageMap()
{
return languageMap;
}

public List<ListValue> getLanguageObjList()
{
return languageObjList;
}

public class ListValue {
private String myKey;
private String myValue;

public ListValue(String myKey, String myValue) {
super();
this.myKey = myKey;
this.myValue = myValue;
}

public String getMyKey()
{
return myKey;
}

public void setMyKey(String myKey)
{
this.myKey = myKey;
}

public String getMyValue()
{
return myValue;
}

public void setMyValue(String myValue)
{
this.myValue = myValue;
}
}
}

Almost the same...

AjaxForms11.jsp
---------------
<%--
Buttonset / Radio Buttons

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<strong>Result Div :</strong>
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>

<strong>Buttonset that was populated from a List with String values.</strong>
<s:form id="form" action="echo" theme="simple">
<label for="echo">Choose your Friend: </label>
<sj:radio
id="radiobuttonset"
list="{'Patrick', 'Jason', 'Jay', 'Toby', 'Rene'}"
name="echo"
onChangeTopics="submitForm1"
/>
<br/>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
listenTopics="submitForm1"
cssStyle="display:none;"
/>
</s:form>
<br/>
<strong>Buttonset that was populated from AJAX JSON Result with onChangeTopic.</strong>
<s:form id="form2" action="echo" theme="xhtml">
<s:url id="remoteurl" action="jsonsample"/>
<sj:radio
href="%{remoteurl}"
id="remoteRadiobuttons"
name="echo"
list="languageMap"
label="Language"
onChangeTopics="submitForm2"
/>
<sj:submit
id="form2button"
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
listenTopics="submitForm2"
cssStyle="display:none;"
/>
</s:form>

<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</html>

AJAX select examples.

AjaxForms12.jsp
---------------
<%--
form example from the AJAX command section
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<s:form id="formSelectOne" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form populated by a String List</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="remoteurl" action="jsonsample"/>
<sj:select
href="%{remoteurl}"
id="echo"
name="echo"
list="languageList"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Language"
/>
</div>
<div class="type-button">
<sj:submit
targets="result1"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div 1 :</strong>
<div id="result1" class="result ui-widget-content ui-corner-all">Submit form above.</div>

<s:form id="formSelectTwo" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form populated by a Map</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="remoteurl" action="jsonsample"/>
<sj:select
href="%{remoteurl}"
id="echo2"
name="echo"
list="languageMap"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Language"
/>
</div>
<div class="type-button">
<sj:submit
targets="result2"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..." style="display:none"
/>
</div>
</fieldset>
</s:form>

<strong>Result Div 2 :</strong>
<div id="result2" class="result ui-widget-content ui-corner-all">Submit form above.</div>

<s:form id="formSelectThree" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form populated by a List with Objects</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="remoteurl" action="jsonsample"/>
<sj:select
href="%{remoteurl}"
id="echo3"
name="echo"
list="languageObjList"
listKey="myKey"
listValue="myValue"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Language"
/>
</div>
<div class="type-button">
<sj:submit
targets="result3"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div 3 :</strong>
<div id="result3" class="result ui-widget-content ui-corner-all">Submit form above.</div>
</body>
</html>

This example uses jsonsample2. There is a slight difference with the previous one here. The difference comes because of the levels. The second select has to be set according to the first selection. This is reflected in the JsonSample2.java code.

AjaxForms13.jsp
---------------
<%--
form example from the AJAX command section
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
Reload example with two select boxes.
<s:form id="formSelectReload" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="language">Language: </label>
<s:url id="remoteurl" action="jsonsample2"/>
<sj:select
href="%{remoteurl}"
id="language"
onChangeTopics="reloadsecondlist"
name="language"
list="languageObjList"
listKey="myKey"
listValue="myValue"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Language"
/>
</div>
<div class="type-text">
<label for="echo">Framework: </label>
<s:url id="remoteurl" action="jsonsample2"/>
<sj:select
href="%{remoteurl}"
id="selectWithReloadTopic"
formIds="formSelectReload"
reloadTopics="reloadsecondlist"
name="echo"
list="reloadList"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Framework"
/>
</div>
<div class="type-button">
<sj:submit
id="submitFormSelectReload"
targets="result"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"
/>
</div>
</fieldset>
</s:form>
<br/>
Reload example with one select box and an buttonset.
<s:form id="formSelectCheckBox" action="echo" theme="xhtml">
<s:url id="remoteurl" action="jsonsample2"/>
<sj:select
href="%{remoteurl}"
id="languageSelect"
onChangeTopics="reloadcheckboxes"
name="language"
list="languageObjList"
listKey="myKey"
listValue="myValue"
emptyOption="true"
headerKey="-1"
headerValue="Please Select a Language"
label="Language"
required="true"
/>
<s:url id="remoteurl" action="jsonsample2"/>
<sj:checkboxlist
href="%{remoteurl}"
id="frameworkCheckboxes"
formIds="formSelectCheckBox"
reloadTopics="reloadcheckboxes"
name="echo"
list="reloadList"
label="Framework"
required="true"
onChangeTopics="submitCheckboxForm"
/>
<sj:submit
id="submitFormSelectCheckBox"
listenTopics="submitCheckboxForm"
targets="result"
value="AJAX Submit"
indicator="indicator2"
cssStyle="display : none;"
/>
</s:form>
<img id="indicator2"
src="images/indicator.gif"
alt="Loading..."
style="display:none"
/>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Submit a form.</div>
</body>
</html>

JsonSample2.java
----------------
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

package ARS;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class JsonSample2 extends ActionSupport {

private static final long serialVersionUID = -2223948287805083119L;
private static final Log log = LogFactory.getLog(JsonSample2.class);
private List<String> languageList;
private List<ListValue> languageObjList;
private Map<String, String> languageMap;
private List<String> reloadList;
private String language;

public String execute()
{

log.info("build json lists language : " + language);

languageList = new ArrayList<String>();
languageObjList = new ArrayList<ListValue>();
languageMap = new HashMap<String, String>();

languageList.add("Java");
languageList.add("PHP");
languageList.add("C#");

languageMap.put("J", "Java");
languageMap.put("P", "PHP");
languageMap.put("C", "C#");

languageObjList.add(new ListValue("J", "Java"));
languageObjList.add(new ListValue("P", "PHP"));
languageObjList.add(new ListValue("C", "C#"));

reloadList = new ArrayList<String>();
if (language != null && language.equalsIgnoreCase("J"))
{
reloadList.add("Struts2");
reloadList.add("MyFaces");
reloadList.add("Tapestry");
}
else if (language != null && language.equalsIgnoreCase("P"))
{
reloadList.add("CakePHP");
reloadList.add("Symfony");
reloadList.add("Zend");
}
else if (language != null && language.equalsIgnoreCase("C"))
{
reloadList.add("NStruts");
reloadList.add("ProMesh.NET");
reloadList.add("Websharp");
}

return SUCCESS;
}

public String getJSON()
{
return execute();
}

public List<String> getLanguageList()
{
return languageList;
}

public Map<String, String> getLanguageMap()
{
return languageMap;
}

public List<ListValue> getLanguageObjList()
{
return languageObjList;
}

public List<String> getReloadList()
{
return reloadList;
}

public void setLanguage(String language)
{
this.language = language;
}
}

ListValue.java
--------------
/**
*
*/
package ARS;

public class ListValue {
private String myKey;
private String myValue;

public ListValue(String myKey, String myValue) {
super();
this.myKey = myKey;
this.myValue = myValue;
}

public String getMyKey()
{
return myKey;
}

public void setMyKey(String myKey)
{
this.myKey = myKey;
}

public String getMyValue()
{
return myValue;
}

public void setMyValue(String myValue)
{
this.myValue = myValue;
}
}

Struts2 JQuery AjaxFORMS-3

2011-03-31T12:48:00.000-07:00

There is a text area in this example. You first write something into the text area and then you push the submit button. The AJAX call copies this text into the result area.

1. The text area takes its default value from the
...
<s:url id="remoteurl" action="ajax1"/>
...

in the struts.xml:
...
<action name="ajax1">
<result>/Ajax1.jsp</result>
</action>
...

Ajax1.jsp:
----------
testARS
(it is composed of only a single word text)

The submit button targets:
...
<sj:submit
targets="result"
...
the result area is at the bottom:
...
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
...

The submit button trigs the action echo:
...
<s:form id="formTextarea" action="echo" theme="simple" cssClass="yform">
...

in the struts.xml:
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
The code for the action echo lies in the echo.java, listed below under the
AjaxForms7.jsp's full code:

AjaxForms7.jsp
--------------
<%--
AJAX Textarea

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>

<s:form id="formTextarea" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="remoteurl" action="ajax1"/>
<sj:textarea
href="%{remoteurl}"
id="echo"
name="echo"
rows="10"
cols="80"
effect="highlight"
effectDuration="1500"
loadingText="Loading content of textarea ..."
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
effect="slide"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</div>
</fieldset>
</s:form>
<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>

Echo.java
---------
package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class Echo extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Echo.class);

private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

The result of the ecgo action is directed to echo.jsp:

echo.jsp
--------
<%@ taglib prefix="s" uri="/struts-tags"%>
<p>Echo : <s:property value="echo" escape="%{escape}"/></p>

echo.jsp puts "Echo :" and then the value of the echo request variable
(echo field on the JSP). The output of the echo.jsp is targeted to the result field on the AjaxForms7.jsp

AjaxForms8.jsp has not much new, only the text area is resizable.

AjaxForms8.jsp
--------------
<%--
AJAX Text Area / Resizable
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<s:form id="formTextareaResize" action="simpleecho" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<sj:textarea
resizable="true"
resizableGhost="true"
resizableHelper="ui-state-highlight"
id="echo"
name="echo"
rows="4"
cols="80"
onChangeTopics="submitThisForm"
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit"
indicator="indicator"
button="true"
listenTopics="submitThisForm"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>

AjaxForms8.jsp has not much new, only this time it is a text field that is resizable.

AjaxForms9.jsp
--------------
<%--
AJAX Textfield / Resizable

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<s:form id="formTextfieldResize" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:url id="urlsimpleecho" action="simpleecho">
<s:param name="echo">remote content for textfield!</s:param>
</s:url>
<sj:textfield
href="%{urlsimpleecho}"
resizable="true"
resizableGhost="true"
resizableHelper="ui-state-highlight"
resizableMaxHeight="30"
effect="blind"
effectDuration="1500"
effectOptions="{
mode: 'show'
}"
id="echo"
name="echo"
loadingText="Loading content of textfield ..."
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
effect="highlight"
effectDuration="1500"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</div>
</fieldset>
</s:form>

<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">
Enter some text in the Textarea above.
</div>
</body>
</html>

Struts2 JQuery AjaxFORMS-2

2011-03-31T12:45:00.000-07:00

AjaxForms5.jsp is a form example with validation. This example does not work in the struts2-jquery-showcase-2.5.0 version. There is a fix note from Herr Geppert on the internet about this. Some javascript has been changed at struts2-jquery-showcase-2.5.3 version. You have to add the utils.js and validation.js references also as seen below.

There is a difficulty about struts2-jquery-showcase-2.5.3. It does not run when compiled. The showcase related with the grid works though. So I copied the lib from the grid showcase of the same version. It worked.

The form activates the login action at the AJAX submit event. The AJAX submit event targets 'result' div with pulsate effect. There are two text fields, loginuser and loginpassword. These are handled at Login.java

Error processing can be done both in the Login.java or with xml validation.

AjaxForms5.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script type="text/javascript" src="${pageContext.request.contextPath}/struts/utils.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/struts/xhtml/validation.js"></script>
</head>
<body>
<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>

<s:form id="formValidate" action="login" theme="xhtml">
<s:textfield
id="loginuser"
name="loginuser"
label="User"
required="true"
/>
<s:textfield
id="loginpassword"
name="loginpassword"
label="Password (test)"
required="true"
/>
<sj:submit
targets="result"
button="true"
validate="true"
effect="pulsate"
value="Submit"
indicator="indicator"
/>
<input type="hidden" id="struts.enableJSONValidation" name="struts.enableJSONValidation" value="true" />
</s:form>
</body>
</html>

Login.java
----------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.opensymphony.xwork2.ActionSupport;

public class Login extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Login.class);

private String loginuser;
private String loginpassword;
private String echo;

public String execute() throws Exception
{
echo = "Welcome " + loginuser;
log.info(echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public String getLoginuser()
{
return loginuser;
}

public void setLoginuser(String loginuser)
{
this.loginuser = loginuser;
}

public String getLoginpassword()
{
return loginpassword;
}

public void setLoginpassword(String loginpassword)
{
this.loginpassword = loginpassword;
}
// public void validate(){
//
// if ( loginuser.length() == 0 ){
// addFieldError( "loginuser", "loginuser is required." );
// }
//
// if ( loginpassword.length() == 0 ){
// addFieldError( "loginpassword", "loginpassword is required." );
// }
// }
}

Login-validation.xml
--------------------
<!DOCTYPE validators PUBLIC
"-//OpenSymphony Group//XWork Validator 1.0.2//EN"
"http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<validators>
<validator type="requiredstring">
<param name="fieldname">loginuser</param>
<message>loginuser is required.</message>
</validator>
<validator type="requiredstring">
<param name="fieldname">loginpassword</param>
<message>loginpassword is required.</message>
</validator>
</validators>

AjaxForms6.jsp is a custom Validation example. It still uses some js substructure though. The example works without problem.

AjaxForms6.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script type="text/javascript">
$(document).ready( function() {
$.subscribe('removeErrors', function(event,data) {
$('.errorLabel').html('').removeClass('errorLabel');
$('#formerrors').html('');
});
});

function customeValidation(form, errors) {

//List for errors
var list = $('#formerrors');

//Handle non field errors
if (errors.errors) {
$.each(errors.errors, function(index, value) {
list.append(''+value+'\n');
});
}

//Handle field errors
if (errors.fieldErrors) {
$.each(errors.fieldErrors, function(index, value) {
var elem = $('#'+index+'Error');
if(elem)
{
elem.html(value[0]);
elem.addClass('errorLabel');
}
});
}
}
</script>
</head>
<body>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>

<ul id="formerrors" class="errorMessage"></ul>
<s:form id="formValidateCustom" action="login" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Validation</legend>
<div class="type-text">
<label for="echo">User: <span id="loginuserError"></span></label>
<s:textfield
id="loginuser"
name="loginuser"
/>
</div>
<div class="type-text">
<label for="echo">Password: <span id="loginpasswordError"></span></label>
<s:textfield
id="loginpassword"
name="loginpassword"
/>
</div>
<div class="type-button">
<sj:submit
targets="result"
button="true"
validate="true"
validateFunction="customeValidation"
onBeforeTopics="removeErrors"
onSuccessTopics="removeErrors"
value="Submit"
indicator="indicator"
/>
</div>
</fieldset>
</s:form>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

Struts2 JQuery AjaxFORMS-1

2011-03-31T12:41:00.000-07:00

I have taken these examples from Herr GEPPERT's showcase for Struts2-JQuery applications. My intention was to try whether they can work individually for specific purposes. The problem is you can not run struts2-jquery-showcase-2.5.3 as it is provided. There are missing files in the lib folder. But the same site provides a grid showcase which works. So, I copied the whole lib from there on to the original struts2-jquery-showcase-2.5.3 lib. It works now.

After fixing the lib problem, I returned back to the original problem I had. The examples for validation did not work healthily on struts2-jquery-showcase-2.5.0 which I had chosen to be 'safe'. So, I tried the new lib with my old problem, it worked. (I had seen Herr Geppert's note on a fix about this matter). There is also another small fix I had to do, which I will explain when I come to that matter.

web.xml
-------

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Basic_Struts2_Ant</display-name>
<welcome-file-list>
<welcome-file>/test.action</welcome-file>
</welcome-file-list>

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>

struts.xml
----------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<constant name="struts.devMode" value="true" />

<package name="basicstruts2" extends="struts-default, json-default">
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
<action name="simpleecho" class="ARS.SimpleEcho" method="execute">
<result name="success">/simpleecho.jsp</result>
</action>
<action name="ajax1">
<result>/Ajax1.jsp</result>
</action>
<action name="jsonsample" class="ARS.JsonSample" method="execute">
<result type="json"></result>
</action>
<action name="jsonsample2" class="ARS.JsonSample2" method="execute">
<result type="json"></result>
</action>
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>
</action>
<action name="login" class="ARS.Login" method="execute">
<interceptor-ref name="jsonValidationWorkflowStack"/>
<result name = "success">/simpleecho.jsp</result>
</action>
</package>
</struts>

AjaxForms0.jsp uses an AJAX call that targets the div formResult.
There is a field named echo of which value is copied by the
action echo to the result field.
AjaxForms0.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="formResult">formResult</div>
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>

<sj:a
id="ajaxformlink"
formIds="form"
targets="formResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Submit form here
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

The echo action trigs the echo.java of which result is fed to the result file echo.jsp. Echo.jsp is then targeted to the result field on the jsp.

Echo.java
---------
package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class Echo extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Echo.class);

private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Echo.jsp
--------
<%@ taglib prefix="s" uri="/struts-tags"%>
<p>Echo : <s:property value="echo" escape="%{escape}"/></p>

This is a simple repetition in Herr Geppert's examples. simpleecho is not simpler than echo I guess.

AjaxForms1.jsp
--------------
<%--
AJAX Forms

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="formResult">formResult</div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
id="formSubmit1"
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<s:url id="simpleecho" value="/simpleecho.action"/>
<sj:submit
id="formSubmit2"
href="%{simpleecho}"
targets="formResult"
value="AJAX Submit 2"
indicator="indicator"
button="true"
/>
</div>
</fieldset>
</s:form>
</body>
</html>

SimpleEcho.java
---------------
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

package ARS;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;

import com.opensymphony.xwork2.ActionSupport;

public class SimpleEcho extends ActionSupport {

private static final long serialVersionUID = 6999864671102333041L;
private String echo;
private boolean escape = true;

public String execute() throws Exception
{
return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Addition of effects etc cosmetic changes.

AjaxForms2.jsp
--------------
<%--
AJAX Forms with Effects

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="result"></div>
<s:form id="formEffect" action="echo" theme="xhtml">
<s:textfield id="echo" name="echo" label="Echo" value="Hello World!!!"/><br/>
<sj:submit
targets="result"
effect="slide"
effectMode="blind"
onEffectCompleteTopics="hideTarget"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
</s:form>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/> </body>

</html>

AjaxForms3.jsp
--------------
<%--
AJAX Forms with Outside Button

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="result">formResult</div>
<s:form id="formOutside" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Button outside</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</div>
</fieldset>
</s:form>

<sj:submit
formIds="formOutside"
targets="result"
effect="pulsate"
value="Submit outside the Form"
indicator="indicator"
button="true"
/>
</body>
</html>

The events are interesting. It is pretty straight forward, you create the JSP and it works.

AjaxForms4.jsp
--------------
<%--
AJAX Forms with Events

--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script type="text/javascript" charset="utf-8">
$.subscribe('beforeForm', function(event,data) {
var fData = event.originalEvent.formData;
alert('About to submit: \n\n' + fData[0].value + ' to target '+event.originalEvent.options.target+' with timeout '+event.originalEvent.options.timeout );
var form = event.originalEvent.form[0];
if (form.echo.value.length < 2) {
alert('Please enter a value with min 2 characters');
event.originalEvent.options.submit = false;
}
});
$.subscribe('completeForm', function(event,data) {
alert('status: ' + event.originalEvent.status + '\n\nresponseText: \n' + event.originalEvent.request.responseText +
'\n\nThe output div should have already been updated with the responseText.');
});
$.subscribe('errorStateForm', function(event,data) {
alert('status: ' + event.originalEvent.status + '\n\nrequest status: ' +event.originalEvent.request.status);
});
</script>
</head>
<body>
<div id="result">formResult</div>
<s:form id="formevent" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit"
timeout="2500"
indicator="indicator"
onBeforeTopics="beforeForm"
onCompleteTopics="completeForm"
onErrorTopics="errorState"
button="true"
/>
</div>
</fieldset>
</s:form>

<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>

<s:form id="formeventerror" action="file-does-not-exist.html" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Error Result</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit with Error"
timeout="2500"
indicator="indicator"
onBeforeTopics="beforeForm"
onCompleteTopics="completeForm"
onErrorTopics="errorState"
button="true"
/>
</div>
</fieldset>
</s:form>
</body>
</html>

Struts2 - Jquery AJAX tutorial3

2011-03-25T11:57:00.000-07:00

The AJAX with JSON example required more if not much to understand.
Let's begin from the easiest point.

The div named "result" is targeted by the AJAX call to put the
output. It is located in the body part of the AjaxTest6.JSP .
...

<div id="result" class="result ui-widget-content ui-corner-all">Click on the link below.</div>
...

The AJAX call is located in the body part of the AjaxTest6.jsp .
...
<sj:a id="ajaxjsonlink"
href="%{jsonurl}"
dataType="json"
onSuccessTopics="handleJsonResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action with JSON Rsult
</sj:a>
...

It uses the jsonurl which is set to
...
<s:url id="jsonurl" action="jsonlanguages"/>
...
So the action trigged by the AJAX call lies at the struts.xml with the label "jsonlanguages":

...
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>

</action>
...

The struts entry fro jsonlanguages at the struts.xml points to the class address as
jsonlanguages.java at the ARS library. IMPORTANT: It also gives a hint about how the result should be returned. The result should be based on the parameter "languages" not the default result definition. I will further elaborate on this below.

jsonlanguages.java uses a static string array of:
...
private static String[] staticLanguages =
{
"Actionscript (Flash)",
"ABAP Objects",
"Ada",
"Aleph",
"AppleScript",
"Beta",
"BlitzMax",
//...
"Zonnon"
};

and later on it copies this string into languages array:
in the execute method (the method that works as action default).
...
private String[] languages = Jsonlanguages.staticLanguages;

public String execute() throws Exception
{
ArrayList<String> tmp = new ArrayList<String>();
for (int i = 0; i < staticLanguages.length; i++)
{
tmp.add(staticLanguages[i]);
}
languages = tmp.toArray(new String[ tmp.size()]);

return SUCCESS;
}
...

The execute method returns SUCCESS. The difficulty is: By default, the jsonlanguages action returns the staticLanguages if we say:
...
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"/>

</action>
...

In order to return the languages we must indicate it as base to the parameter:
...
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>

</action>
...

This is done somewhat different by Herr GEPPERT as he has chosen to do things in the
convention fashion globally.

Here is the full working code.

AjaxTest6.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
<script>
$.subscribe('handleJsonResult', function(event,data) {
$('#result').html("<ul id='languagesList'></ul>");
var list = $('#languagesList');
$.each(event.originalEvent.data, function(index, value) {
list.append('<li>'+value+'</li>\n');
});
});
</script>
</head>
<body>

<div id="result" class="result ui-widget-content ui-corner-all">Click on the link below.</div>
<s:url id="jsonurl" action="jsonlanguages"/>

<sj:a id="ajaxjsonlink"
href="%{jsonurl}"
dataType="json"
onSuccessTopics="handleJsonResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action with JSON Rsult
</sj:a>
<img id="indicator" src="./images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

struts.xml
-----------
...
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>

</action>
...

jsonlanguages.java
------------------
package ARS;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.lang.StringUtils;
import com.opensymphony.xwork2.ActionSupport;

public class Jsonlanguages extends ActionSupport {

private static final long serialVersionUID = -3066791113091431706L;
private static String[] staticLanguages =
{
"Actionscript (Flash)",
"ABAP Objects",
"Ada",
"Aleph",
"AppleScript",
"Beta",
"BlitzMax",
// ...
// "XOTcl",
// ...
"Zonnon"
};
private String[] languages = Jsonlanguages.staticLanguages;

public String execute() throws Exception
{
ArrayList<String> tmp = new ArrayList<String>();
for (int i = 0; i < staticLanguages.length; i++)
{
tmp.add(staticLanguages[i]);
}
languages = tmp.toArray(new String[ tmp.size()]);

return SUCCESS;
}

public String[] getLanguages()
{
return languages;
}
}

The AJAX call trigs "handleJsonResult" via:
...
onSuccessTopics="handleJsonResult"
...

HandleJsonResult simply buids up a list;
first creates the ist named "languagesList" and then
adds each value in the "event.originalEvent.data" using the
each iterator.

$.subscribe('handleJsonResult', function(event,data) {
$('#result').html("<ul id='languagesList'></ul>");
var list = $('#languagesList');
$.each(event.originalEvent.data, function(index, value) {
list.append('<li>'+value+'</li>\n');
});
});
</script>

This list is placed into the "targets" area of tha AJAX call, namely the div named "result".

Kind regards. Enjoy!

Ali R+

Struts2 - Jquery AJAX tutorial2

2011-03-25T11:56:00.000-07:00

AjaxTest3.jsp is an example of form AJAX action.
AjaxTest3.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="formResult">formResult</div>
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>

<sj:a
id="ajaxformlink"
formIds="form"
targets="formResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Submit form here
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

The action echo is trigged when the form is submitted.
The echo action is defined at the struts.xml as

...
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
...

It's source is at the ARS lib's echo.jsp member.
/ARS/echo.jsp
-------------
package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class Echo extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Echo.class);

private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Now, let's concentrate on the form of AjaxTest3.jsp:
...
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>
...

This form has a textfield named echo with a default value.
If we look at the ARS.echo once again:

public class Echo extends ActionSupport {
...
private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}
...

The execute method takes this default value and adds "Echo :" to its
front and uses its setter and getters to change this value.

struts.xml has:
...
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
It returns echo.jsp...

echo.jsp
--------
<%@ taglib prefix="s" uri="/struts-tags"%>
<p>Echo : <s:property value="echo" escape="%{escape}"/></p>

Now, it is clearer how it takes the echo and returns it back to
AjaxTest3 which targets this output to
...
targets="formResult"
...

namely the div named formResult.

AjaxTest4.jsp uses AJAX calls with events. The events are triggered
by the:
...
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
onErrorTopics="errorStateLink"
...
handlers.

The events are defined in the subscribing section in the
script part at the beginning. Namely:
...
<script type="text/javascript" charset="utf-8">
//$(document).ready(function() {
$.subscribe('beforeLink', function(event,data) {
alert('Before request ');
$('#result').html('Loading ...');
});
...

I have added file-does-not-exist1.html so that you can rename
and play with it.
The complete code follows:

AjaxTest4.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>

<script type="text/javascript" charset="utf-8">
//$(document).ready(function() {
$.subscribe('beforeLink', function(event,data) {
alert('Before request ');
$('#result').html('Loading ...');
});
$.subscribe('completeLink', function(event,data) {
$('#result').append('<br/><br/><strong>Completed request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
$.subscribe('errorStateLink', function(event,data) {
$('#result').html('<br/><br/><strong>Error request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
//});
</script>
</head>
<body>
<s:url id="ajax" value="/ajax1.action"/>
<div id="result" name="result">result</div>
<div id="result2" name="result2">result</div>
<sj:a
id="ajaxlink"
href="%{ajax}"
indicator="indicator"
targets="result"
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
effect="pulsate"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<br/>
<br/>
<sj:a
id="ajaxlink2"
href="file-does-not-exist.html"
indicator="indicator2"
targets="result"
onClickTopics="beforeLink"
onCompleteTopics="completeLink"
onErrorTopics="errorStateLink"
effect="pulsate"
effectDuration="1500"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Error Action
</sj:a>
<img id="indicator2" src="images/indicator.gif" alt="Loading..." style="display:none"/>

</body>
</html>

I added bounce effect to the highlight effect example for economy.
The AJAX function's effects can be used for highlight:
...
effect="highlight"
effectOptions="{ color : '#222222' }"
effectDuration="3000"
...

and bounce:
...
effect="bounce"
effectDuration="2200"
...

The full code follows:

AjaxTest5.jsp
-------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="result">formResult</div>
<s:url id="ajax" value="/ajax1.action"/>

<sj:a
id="ajaxlink"
href="%{ajax}"
targets="result"
effect="highlight"
effectOptions="{ color : '#222222' }"
effectDuration="3000"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>
<s:url id="ajax2" value="/ajax1.action"/>

<sj:a
id="ajaxlink2"
href="%{ajax}"
indicator="indicator"
targets="result"
effect="bounce"
effectDuration="2200"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>

</body>
</html>

Struts2 - Jquery AJAX tutorial1

2011-03-25T11:51:00.000-07:00

This is a simplified, easy to understand version of AJAX events section from the STRUTS2 JQUERY PLUGIN SHOWCASE-2.5.0 of Johannes Geppert Hosted by weinfreund.de. The difference is GEPPERT has provided all the examples in the frameworks of a showcase using STRUTS2-convention, velocity, YAML, Maven and others.

My approach is to minimize the external connections, make each example independent and break the big pieces to smaller ones. Each of the pieces I provide will work alone and I will provide complete and working examples. I made a few additions when it is unavoidable.

Herr GEPPERT's showcase can easily be compiled and run without any problem. It was great fun to analyze and break down his work to smaller pieces. His work is very well written and logically documented, easy to understand but it is complex and it must be well deserved, a piece of art.

1- First things first. Create a Web application.
2- Create a lib and put everything in the showcases lib here. Put them into the CLASSPATH. I did not change the css and themes references to button and div definitions of Herr GEPPERT.
3- I put all the AJAX examples in a single application's WEB lib.
4- Of course I used the Struts.xml for all the actions because of 3.
5- Web.xml is different from Herr GEPPERT's. He uses convention and I use the classic STRUTS2.

Here are :

web.xml
---------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Basic_Struts2_Ant</display-name>
<welcome-file-list>
<welcome-file>/test.action</welcome-file>
</welcome-file-list>

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>

struts.xml
----------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.devMode" value="true" />

<package name="basicstruts2" extends="struts-default, json-default">

<action name="index">
<result>/index.jsp</result>
</action>
<action name="AjaxTest">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactionone">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactiontwo">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactionthree">
<result>/data_server.jsp</result>
</action>
<action name="myremact1">
<result>/index.jsp</result>
</action>
<action name="myremact2">
<result>/index.jsp</result>
</action>
<action name="myremact3">
<result>/index.jsp</result>
</action>
<action name="myremoteaction">
<result>/data_server.jsp</result>
</action>
<action name="ajax1">
<result>/data_server1.jsp</result>
</action>
<action name="ajax2">
<result>/data_server2.jsp</result>
</action>
<action name="ajax3">
<result>/data_server3.jsp</result>
</action>
<action name="ajax4">
<result>/data_server4.jsp</result>
</action>
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>

</action>
</package>

</struts>

I used a very simple data server JSP file.

data_server.jsp
---------------
<%--
Document : data_server
Created on : 19.Mar.2011, 21:10:39
Author : Ali Riza SARAL
--%>

<%@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">

<%
out.println("Hello world!");
%

Later I moved to Herr GEPPERT's approach. Namely just a few words as data in the JSP.
All four of them are the same. You can change and play with them.

data_server1.jsp
data_server2.jsp
data_server3.jsp
data_server4.jsp
----------------
test ARS

You have to right click on AjaxTest.jsp and then RUN this file to test our first example.

The first AJAX example targets a div namely div1. The related action is AjaxTest.action which can be tracked at the struts.xml to data_server.jsp which
returns "Hello World!". This phrase is written to the target div1 area.

Please note the use of the struts URL tag.

AjaxTest.jsp
------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="div1">Div 1</div>
<s:url id="ajaxTest" value="/AjaxTest.action"/>
<sj:a id="link1" href="%{ajaxTest}" targets="div1"> Update Content </sj:a>
<br>
<br>
<s:url id="ajax" value="ajax1.action"/>

<sj:a id="ajaxlink"
href="%{ajax}"
targets="result"
indicator="indicator"
button="true"
buttonIcon="ui-icon-refresh"
>
Run AJAX Action
</sj:a>
<br>
<br>
<s:url id="ajax2" value="ajax1.action"/>
<sj:a id="ajaxlink2"
href="%{ajax2}"
targets="div1"
indicator="indicator2"
button="true"
buttonIcon="ui-icon-refresh"
>
Run AJAX Action2
</sj:a>

</body>
</html>

The second example AjaxTest2.jsp

AjaxTest2.jsp
--------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@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">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<strong>Result Div 1 :</strong>
<div id="result1" class="result ui-widget-content ui-corner-all">Click on the link bellow.</div>
<strong>Result Div 2 :</strong>
<div id="result2" class="result ui-widget-content ui-corner-all">Click on the link bellow.</div>

<s:url id="ajax" value="/ajax3.action"/>
<sj:a
id="ajaxlink"
href="%{ajax}"
targets="result1,result2"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>

</body>
</html>

Simple DAO Tutorial - 5

2011-03-19T09:44:00.000-07:00

This DAO is a new version of the original one that
you can find at:
http://tekne-techne.blogspot.com/2011/01/simple-dao-tutorial-1.html

I have used this original DAO's MySQL implementation files
in the Simple CRUD with JQuery and many other examples at my blog.

The problem in the original DAO was it reorganised the DB as soon as
a record was deleted. This was caused by a wrong design
decision that each record should have a sequential id with no
ids missing in between them.

I removed this requirement in this new version of DAO with:

public Person readNextRec() throws PersonDAOSysException {
...
stmt = conn.prepareStatement("select id, firstName, lastName, "
+ " hobby from personTab where id > ? ORDER BY ID ASC LIMIT 1");
...
This is true for only HSQL and MySQL DBs. The vector 'DB' is left as
it was.

To read an in depth analysis of this package please refer to
http://tekne-techne.blogspot.com/2011/01/simple-dao-tutorial-1.html

To correct speed problems at the delete function of Simple CRUD with JQuery
you may use PersonDAOMySQLDBImpl.java of nbDAObasicARSv1.0.

I will provide a new version as such for Simple CRUD with JQuery
in the near future. Also a new master - detail on the same JSP
will follow.

Once again this for only training purposes, it is not meant for
any other.

You can download the source files from sourceforge:
http://sourceforge.net/projects/crudjquery/files/

Crud with JQuery Master-Detail 7

2011-03-17T04:43:00.008-07:00

The data table at personList.jsp uses PersonServer.jsp.
PersonServer.jsp is a translation of PHP source provided
by Monseur Allan Jardine at
http://www.datatables.net/examples

some more explanation:
http://tekne-techne.blogspot.com/2011/02/jquery-server-processing-with-jsp-java.html

PersonServer.jsp
----------------
<%--
Document : person_server.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>

<%@page import="java.sql.Connection"%>
<%@page import="atg.taglib.json.util.*"%>
<%@page import= "java.util.*"%>
<%@page import= "java.sql.*"%>
<%@page import= "org.apache.commons.lang.*"%>

<%
class Utilities {

Utilities() {
};

String escape_string(String input) {
return StringEscapeUtils.escapeHtml(input);
}
}
%>

<%
System.out.println("test arsssssssssssssssssssssss");
Utilities util = new Utilities();
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
String[] aColumns = {"id", "firstname", "lastname", "hobby"};

/* Indexed column (used for fast and accurate table cardinality) */
String sIndexColumn = "id";

/* DB table to use */
String sTable = "persontab";
/* Database connection information */
String user = "root";
String password = "3391309";
String db = "persondao";
String server = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* MySQL connection
*/

Connection conn = null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost/" + db,
user, password);

if (!conn.isClosed()) {
System.out.println("Successfully connected to "
+ "MySQL server using TCP/IP...");
}

} catch (Exception e) {
System.err.println("Exception: " + e.getMessage());
} finally {
// try {
// if (conn != null) {
// //conn.close();
// }
// } catch (SQLException e) {
// }
}

/*
* Paging
*/
String sLimit = "";
if (request.getParameter("iDisplayStart") != null
&& request.getParameter("iDisplayLength") != "-1") {
sLimit = "LIMIT " + util.escape_string(request.getParameter("iDisplayStart")) +
", " + util.escape_string(request.getParameter("iDisplayLength"));
}

/*
* Ordering
*/
String sOrder = "";

if (request.getParameter("iSortCol_0") != null) {
sOrder = "ORDER BY ";

for (int i = 0; i < Integer.valueOf(request.getParameter("iSortingCols")); i++) {
if (request.getParameter("bSortable_" + Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))).equals("true")) {
sOrder += aColumns[Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))] + " "
+ util.escape_string(request.getParameter("sSortDir_" + String.valueOf(i))) + ", ";
}
}

sOrder = sOrder.substring(0, sOrder.length()-2);
if (sOrder.equals("ORDER BY")) {
sOrder = "";
}
sOrder += " ";
}

/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
String sWhere = "";
System.out.println("sSearch="+ request.getParameter("sSearch"));

if (request.getParameter("sSearch") != "") {
sWhere = "WHERE (";
for (int i = 0; i < aColumns.length; i++) {
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch")) + "%' OR ";
}
sWhere = sWhere.substring(0, sWhere.length()-3);
sWhere += ')';
}

/* Individual column filtering */

for (int i = 0; i < aColumns.length; i++) {
if (request.getParameter("bSearchable_" + String.valueOf(i)) == "true"
&& request.getParameter("sSearch_" + String.valueOf(i)) != "") {
if (sWhere == "") {
sWhere = "WHERE ";
} else {
sWhere += " AND ";
}
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch_" + String.valueOf(i))) + "%' ";
}
}

/*
* SQL queries
* Get data to display
*/
String strColumnNames = "";

for (int i=0;i < aColumns.length;i++){
strColumnNames = strColumnNames + ", "+ aColumns[i];
}
strColumnNames = strColumnNames.substring(1);

String sQuery = "SELECT "
+ strColumnNames
+ " FROM " + sTable
+ " "
+ sWhere
+ sOrder
+ sLimit;

System.out.println("sQuery="+sQuery);

Statement s = conn.createStatement();
s.executeQuery(sQuery);

/* Data set length after filtering */
ResultSet rs = s.getResultSet();
int count = 0;
while (rs.next()) {
int idCol = rs.getInt("id");
System.out.println("id = " + idCol);
++count;
}
int iFilteredTotal = count;
rs.close();
s.close();
System.out.println("Selected count="+iFilteredTotal);

/* Total data set length */
s = conn.createStatement();
String sQuery2 = " SELECT COUNT(*) AS rowcount FROM " + sTable;
rs = s.executeQuery(sQuery2);
rs.next();
int iTotal = rs.getInt("rowcount");
rs.close();
s.close();
System.out.println("Total count="+iTotal);

/*
* Output
*/
String output = "{" +
"\"sEcho\" : "+ request.getParameter("sEcho")+ ", " +
"\"iTotalRecords\" : " + String.valueOf(iTotal) + ", " +
"\"iTotalDisplayRecords\" : " + String.valueOf(iFilteredTotal) + ", " +
// "\"iDisplayLength\" : " + "10" + ", " +
// "\"iDisplayStart\" : " + "10" + ", " +
"\"aaData\" : [" + "";

Object[][] aaData= new Object[iFilteredTotal][4];

s = conn.createStatement();
s.executeQuery(sQuery);
rs = s.getResultSet();

int rowNum=0;
while ( rs.next() )
{
System.out.println("rowNum="+ rowNum);
//if (rowNum > 3) break;
Object[] aRow = {0,"","",""};
Object[] row = {0,"","",""};

for ( int i=0 ; i<aColumns.length ; i++ )
{
System.out.println("i="+ i +" colVal="+ rs.getString( aColumns[i]));
if ((i == 0)&& (aColumns[i] != " ")){
row[i] = rs.getInt( aColumns[i]);
}
else{
row[i] = rs.getString( aColumns[i]);
}
}
aaData[rowNum] = row;
System.out.println("rowNum("+rowNum +") row[0]="+row[0].toString());
rowNum++;
}
rs.close();
s.close();

String valRow = " [ ";
for (int rowN = 0; rowN < iFilteredTotal; rowN++) {
//System.out.println("rowN="+rowN);
for (int colN = 0; colN < aColumns.length; colN++) {
//System.out.println(" colN="+colN);
if (aColumns[colN] == "id" )
valRow = valRow + " " + aaData[rowN][colN].toString() + " , ";
else if ( aColumns[colN] != " " )
valRow = valRow + "\"" + aaData[rowN][colN].toString() + "\" , ";
}
valRow = valRow.substring(0, valRow.length()-2);
valRow = valRow + " ], ";
//System.out.println("valRow="+valRow);
output = output + valRow;
valRow = " [ ";
}
System.out.println("output="+output);
output = output.substring(0, output.length()-2);
output = output + " ] }";

out.print(output);
%>

The util package has:
Escape.java
-----------
package util;

import org.apache.commons.lang.*;

public class Escape {
public static String html(String input) {
return StringEscapeUtils.escapeHtml(input);
}

public static String javaScript(String input) {
return StringEscapeUtils.escapeJavaScript(input);
}

public static String lineBreakToBr(String input) {
return input.replaceAll("\\n", "<br />");
}

public static String paragraphBreakToBrs(String input) {
return input.replaceAll("\\n\\s*\\n", "<br /><br />");
}
}

Crud with JQuery Master-Detail 6

2011-03-17T04:43:00.007-07:00

When the list button is pressed the listServlet is NOT called.
Instead
...
$(function() {
$("input#List").click(function() {
window.open("personList.jsp");
//window.close();
window.open('close.html', '_self');
})
})
...

works in the JQmultiAJAXCalls.js.

It simply opens the personList.jsp.
It also closes the previous (index.jsp) windows.
window.open('close.html', '_self'); is used to disable the
comirmation message at the window close event.

personList.jsp is a JQuery data tables example customized for
this app's purpose. The js source part at the beginning
serves for data pipelining, namely it feeds tha data as it
gets necessary. This helps not to overload the data table.
I had to make slight changes so that the given example (JQuery
standard providence) could work according to my needs.

Please notice that there is a click function defined by me.
This first resets all the rows then extracts the current id
from the current row. It hen makes an AJAX call to the
selectList servlet. SelectListServlet gets the currentId from
the aoData and sets the current id at the DAO. Then it dispatches
the index.jsp.

The source follows:

personList.jsp
--------------

<%--
Document : personList
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>
<!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" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
var oCache = {
iCacheLower: -1
};

function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name == sKey )
{
aoData[i].value = mValue;
}
}
}

function fnGetKey( aoData, sKey )
{
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name == sKey )
{
return aoData[i].value;
}
}
return null;
}

function fnDataTablesPipeline ( sSource, aoData, fnCallback ) {
//alert("fnDataTablesPipeline");
var iPipe = 2; /* Ajust the pipe size */

var bNeedServer = false;
var sEcho = fnGetKey(aoData, "sEcho");
var iRequestStart = fnGetKey(aoData, "iDisplayStart");
var iRequestLength = fnGetKey(aoData, "iDisplayLength");
var iRequestEnd = iRequestStart + iRequestLength;
//alert("iRequestStart="+iRequestStart+"iRequestLength="+iRequestLength);

oCache.iDisplayStart = iRequestStart;

/* outside pipeline? */
if ( oCache.iCacheLower < 0 || iRequestStart < oCache.iCacheLower || iRequestEnd + iRequestLength*iPipe > oCache.iCacheUpper )
{
bNeedServer = true;
}
//alert(bNeedServer);
/* sorting etc changed? */
if ( oCache.lastRequest && !bNeedServer )
{
for( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho" )
{
if ( aoData[i].value != oCache.lastRequest[i].value )
{
bNeedServer = true;
break;
}
}
}
}

/* Store the request for checking next time around */
oCache.lastRequest = aoData.slice();

if ( bNeedServer )
{
if ( iRequestStart < oCache.iCacheLower )
{
iRequestStart = iRequestStart - (iRequestLength*(iPipe-1));
if ( iRequestStart < 0 )
{
iRequestStart = 0;
}
}

oCache.iCacheLower = iRequestStart;
oCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe);
oCache.iDisplayLength = fnGetKey( aoData, "iDisplayLength" );
fnSetKey( aoData, "iDisplayStart", iRequestStart );
fnSetKey( aoData, "iDisplayLength", iRequestLength*iPipe );
//alert("oCache.iCacheLower="+oCache.iCacheLower+"oCache.iCacheUpper="+oCache.iCacheUpper);

$.getJSON( sSource, aoData, function (json) {
/* Callback processing */
oCache.lastJson = jQuery.extend(true, {}, json);

if ( oCache.iCacheLower != oCache.iDisplayStart )
{
json.aaData.splice( 0, oCache.iDisplayStart-oCache.iCacheLower );
}
json.aaData.splice( oCache.iDisplayLength, json.aaData.length );
jsonARS = json;

// if (oCache.iCacheUpper+ oCache.iDisplayLength < json.iTotalRecords)
// json.iTotalDisplayRecords=oCache.iCacheUpper+oCache.iDisplayLength;
if ((oCache.iDisplayStart+ oCache.iDisplayLength < json.iTotalRecords) &&
(oCache.iCacheUpper+ oCache.iDisplayLength < json.iTotalRecords))
json.iTotalDisplayRecords=oCache.iCacheUpper+oCache.iDisplayLength;
else
json.iTotalDisplayRecords = json.iTotalRecords;
fnCallback(json)
} );
}
else
{
json = jQuery.extend(true, {}, oCache.lastJson);
json.sEcho = sEcho; /* Update the echo for each response */
json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
json.aaData.splice( iRequestLength, json.aaData.length );
jsonARS = json;
fnCallback(json);
return;
}
}
var curRow = 1;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
// "sPaginationType": "full_numbers",
"sPaginationType": "two_button",
"aaSorting": [[0, 'desc'], [1, 'desc']],

"sAjaxSource": "./person_server.jsp",
"fnServerData": fnDataTablesPipeline,
"fnDrawCallback": function ( oSettings ) {
$('#example tbody tr').each( function () {

$(this).click( function () {
$('#example tbody tr').each( function () {
$(this).removeClass('row_selected');
});
$(this).addClass('row_selected');
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
curRow = iId;
//alert(iId);
var aoData = [];
aoData.push( { "name": "id", "value": curRow } );
$.ajax({
type:"POST",
url: "./selectlist",
contentType: "application/x-www-form-urlencoded",
// dataType: "JSON",
data: aoData
// success: function(data) {
// var jsonData = $.parseJSON(data);
// $("input#id").val(jsonData.id)
// $("input#name").val(jsonData.name)
// $("input#last").val(jsonData.last)
// $("input#hobby").val(jsonData.hobby)
// }
});
window.open("index.jsp");
window.close();
} );
} );
}
} );
} );

</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>Ali Riza SARAL's</i> Persons List
</div>
<H1>Please click on one of the persons</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Id</TH>
<TH width="25%">Name</TH>
<TH width="25%">Last Name</TH>
<TH width="25%">Hobby</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
</body>
</html>

SelectListServlet.java
----------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class selectListServlet extends HttpServlet {

public void init()
throws ServletException {
System.out.println("ARSmsg: selectListServlet began to work");
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
//PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person = new Person();
HttpSession session = request.getSession();

String id = request.getParameter("id");
int currentRow = Integer.valueOf(id);
System.out.println("currentRow==================" + currentRow);

try {
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");

personDAO.setPersonCurrentId(currentRow);
session.removeAttribute("personDAOsess");
session.setAttribute("personDAOsess", personDAO);
System.out.println(personDAO.getPersonCurrentId());

}
catch (Error e) {
System.out.println(e.getMessage());
}
finally {
//out.close();
}
//window.open("index.jsp");
RequestDispatcher view = getServletContext().getRequestDispatcher("/index.jsp");
view.forward(request,response);
}
}

Crud with JQuery Master-Detail 5

2011-03-17T04:43:00.005-07:00

Underneath the servlet layer there is the DAO (Data Access Object)
layer. DAO layer is a mechanism that makes the program
independent from the data storage type. In fact I have provided
in this blog a DAO application which can access data in vector, HSQL and
MySQL formats with a single switch change. A new and better version
of this DAO application will be available in short notice, including
the availability on SourceForge.net.

WARNING:
---------
The delete functionality reorganises the id's in the DB.
This causes substantial delay when a rec is deleted.
I have corrected this design problem in the new DAO application
that I will provide in short notice. You may change the DAO implementation
files and correct the problem or wait for me to provide the new
version og this tutorial application.

The DAO is defined at an interface file:

PersonDAO.java
--------------
package daoPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.util.Collection;
import mainPackage.*;

public interface PersonDAO {

public void createRec(int id, String firstName,
String lastName, String hobby)
throws PersonDAOSysException;

public Person readRec(int personId)
throws PersonDAOSysException;

public void updateRec(int id, String firstName,
String lastName, String hobby)
throws PersonDAOSysException;

public void deleteRec(int personId)
throws PersonDAOSysException;
}

mainPackage/Person.java
-------------------------
package mainPackage;

/**
*
* @author Ali Riza SARAL
*/
public class Person {

private String name;
private String last;
private String hobby;
private int id;

public Person(){}
public Person(int id, String name, String last, String hobby){
this.name = name;
this.last = last;
this.hobby = hobby;
this.id = id;
}
public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

public String getLast() {
return this.last;
}

public void setLast(String last) {
this.last = last;
}

public String getHobby() {
return this.hobby;
}

public void setHobby(String hobby) {
this.hobby = hobby;
}

public int getId() {
return this.id;
}

public void setId(int id) {
this.id = id;
}
}

MySQL DAO follows:

PersonDAOMySQLDBImpl.java
-------------------------
package daoPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.*;
import javax.naming.*;
import java.sql.*;
import javax.sql.*;
import mainPackage.*;

public class PersonDAOMySQLDBImpl implements PersonDAO {

private Connection conn;
private int personNextId = 1;
private int personCurrentId = 1;

public PersonDAOMySQLDBImpl() throws Exception {
System.out.println("ARSmsg: PersonDAOMySQLImpl constructor began-----------.");
getDBConnection();

// try {
// update("DROP TABLE IF EXISTS persontab ");
// // db will automatically generate unique values for the id column
// update(
// "CREATE TABLE persontab("
// + "id INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(id),"
// + "firstname VARCHAR(20),"
// + "lastname VARCHAR(20), "
// + "hobby VARCHAR(30))");
// } catch (SQLException e) {
// //ignore exception the second time if we create the same table
// }

// try {
// update(
// "INSERT INTO persontab(firstname,lastname,hobby) VALUES('Ali Riza', 'SARAL', 'Music Composition')");
// update(
// "INSERT INTO persontab(firstname,lastname,hobby) VALUES('Tamer', 'ÜNAL', 'Folk Music')");
// update(
// "INSERT INTO persontab(firstname,lastname,hobby) VALUES('Ekrem', 'CANBEK', 'Violin')");
// update(
// "INSERT INTO persontab(firstName,lastName,hobby) VALUES('Turan', 'MUTLUAY', 'Choir')");
// update(
// "INSERT INTO persontab(firstName,lastName,hobby) VALUES('Rengin', 'AHISKALI', 'Literature')");
// // do a query
// query("SELECT * FROM persontab");
//
// shutdown();
// } catch (SQLException ex3) {
// ex3.printStackTrace();
// }
Statement s = conn.createStatement();
String sQuery = " SELECT COUNT(*) AS rowcount FROM " + "persontab";
ResultSet rs = s.executeQuery(sQuery);
rs.next();
int iTotal = rs.getInt("rowcount");
rs.close();
s.close();
personNextId = iTotal + 1;
personCurrentId=1;
}

public void createRec(int id, String firstName,
String lastName, String hobby) throws PersonDAOSysException {
System.out.println("ARSmsg: createRec began-----------.");
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("insert into personTab(id, firstName, lastName,"
+ " hobby) values (?, ?, ?, ?)");
stmt.setString(1, String.valueOf(id));
stmt.setString(2, firstName);
stmt.setString(3, lastName);
stmt.setString(4, hobby);
stmt.executeUpdate();
personCurrentId = personNextId;
personNextId++;
query("SELECT * FROM personTab");
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
}
public void createRecFlat(int id, String firstName,
String lastName, String hobby) throws PersonDAOSysException {
System.out.println("ARSmsg: createRec began-----------.");
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("insert into personTab(id, firstName, lastName,"
+ " hobby) values (?, ?, ?, ?)");
stmt.setString(1, String.valueOf(id));
stmt.setString(2, firstName);
stmt.setString(3, lastName);
stmt.setString(4, hobby);
stmt.executeUpdate();
//personCurrentId = personNextId;
//personNextId++;
//query("SELECT * FROM personTab");
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
}
public void deleteRec(int studentId) throws PersonDAOSysException {
System.out.println("ARSmsg: deleteRec began-----------.");
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("delete from personTab where id = ?");
stmt.setString(1, String.valueOf(studentId));
stmt.executeUpdate();
stmt.close();
query("SELECT * FROM personTab");
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}

reorganiseDB();
}

public boolean findByPrimaryKey(int personId) throws PersonDAOSysException {
System.out.println("ARSmsg: findByPrimaryKey began-----------.");
boolean result = false;
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("select id from personTab where id = ?");
stmt.setString(1, String.valueOf(personId));
ResultSet rs = stmt.executeQuery();
result = rs.next();
rs.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException: " + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return result;
}

public Collection findByLastName(String lastName) throws PersonDAOSysException {
System.out.println("ARSmsg: findByLastName began-----------.");
Collection persons = new ArrayList();
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("select id from personTab where lastName = ?");
stmt.setString(1, lastName);
ResultSet rs = stmt.executeQuery();
while (rs.next()) {
String personId = rs.getString(1);
persons.add(personId);
}
rs.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException: " + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
System.out.println("FindByLastName id="+persons.toString());
return persons;
}

public int findTotalNumberOfPersons() throws PersonDAOSysException {
//System.out.println("ARSmsg: findTotalNumberOfPersons began-----------.");
int total = 0;
PreparedStatement stmt = null;
try {
getDBConnection();
stmt = conn.prepareStatement("select count(id) from personTab");
ResultSet rs = stmt.executeQuery();
rs.next();
total = rs.getInt(1);
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
System.out.println("ARSmsg: findTotalNumberOfPersons ="+total);
return total;
}

public Person readRec(int personId) throws PersonDAOSysException {
System.out.println("ARSmsg: readRec began-----------.");
Person person = null;
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("select firstName, lastName, "
+ " hobby from personTab where id=?");
stmt.setString(1, String.valueOf(personId));
ResultSet rs = stmt.executeQuery();
rs.next();

person = new Person(personId,
rs.getString(1),
rs.getString(2),
rs.getString(3));
System.out.print(personId + " ");
// System.out.print(rs.getString(1) + " ");
// System.out.print(rs.getString(2) + " ");
// System.out.println(rs.getString(3) + "\n");
rs.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return person;
}

public Person readNextRec() throws PersonDAOSysException {
System.out.println("ARSmsg: readNextRec began-----------.");
Person person = null;
PreparedStatement stmt = null;
personCurrentId++;
int personId = personCurrentId;

try {
getDBConnection();
stmt = conn.prepareStatement("select firstName, lastName, "
+ " hobby from personTab where id=?");
stmt.setString(1, String.valueOf(personId));
ResultSet rs = stmt.executeQuery();
if (rs.next()==true){
person = new Person(personId,
rs.getString(1),
rs.getString(2),
rs.getString(3));
rs.close();
} else {
personCurrentId--;
personId = personCurrentId;
person = readRec(personId);
}

System.out.print(personId + " ");
// System.out.print(rs.getString(1) + " ");
// System.out.print(rs.getString(2) + " ");
// System.out.println(rs.getString(3) + "\n");

} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return person;
}

public Person readPrevRec() throws PersonDAOSysException {
System.out.println("ARSmsg: readPrevRec began-----------.");
Person person = null;
PreparedStatement stmt = null;
personCurrentId--;
if (personCurrentId < 1) personCurrentId = 1;
int personId = personCurrentId;

try {
getDBConnection();
stmt = conn.prepareStatement("select firstName, lastName, "
+ " hobby from personTab where id=?");
stmt.setString(1, String.valueOf(personId));
ResultSet rs = stmt.executeQuery();
if (rs.next()==true){

person = new Person(personId,
rs.getString(1),
rs.getString(2),
rs.getString(3));
System.out.print(personId + " ");
// System.out.print(rs.getString(1) + " ");
// System.out.print(rs.getString(2) + " ");
// System.out.println(rs.getString(3) + "\n");
rs.close();
}
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return person;
}

public void updateRec(int id, String firstName, String lastName,
String hobby) throws PersonDAOSysException {
System.out.println("ARSmsg: updateRec began-----------.");
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("update personTab set "
+ "firstName=?,lastName = ?,hobby = ? where id=?");
stmt.setString(1, firstName);
stmt.setString(2, lastName);
stmt.setString(3, hobby);
stmt.setString(4, String.valueOf(id));
int rowCount = stmt.executeUpdate();
stmt.close();
if (rowCount < 1){
createRec(personNextId, firstName, lastName, hobby);
}
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
}

private void reorganiseDB() {
System.out.println("ARSmsg: reorganiseDB began-----------.");
Person person;

getDBConnection();

try {
update("DROP TABLE IF EXISTS persontabtemp");
update("CREATE TABLE persontabtemp ("
+ "id INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(id),"
+ "firstname VARCHAR(20), "
+ "lastname VARCHAR(20), "
+ "hobby VARCHAR(30))");
} catch (SQLException e) {
//ignore exception the second time if we create the same table
}
closeDBConnection();

int recCount = findTotalNumberOfPersons();

for (int i = 1, j = 1; j < recCount+1; i++) {

if (findByPrimaryKey(i)) {
//System.out.println(i+" exists");
person = readRec(i);
createRecTemp(j,person.getName(), person.getLast(), person.getHobby());
j++;
} else {
System.out.println(i + " does not exist");
}
}
getDBConnection();

try {
update("DROP TABLE IF EXISTS persontab ");
update( "CREATE TABLE persontab("
+ "id INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(id),"
+ "firstname VARCHAR(20),"
+ "lastname VARCHAR(20), "
+ "hobby VARCHAR(30))");
} catch (SQLException e) {
//ignore exception the second time if we create the same table
}
closeDBConnection();

int recCountTemp = findTotalNumberOfPersonsTemp();

for (int i = 1; i < recCountTemp + 1; i++) {
person = readRecTemp(i);
createRecFlat(i, person.getName(), person.getLast(), person.getHobby());
}
}

public void createRecTemp(int id, String firstName,
String lastName, String hobby) throws PersonDAOSysException {
System.out.println("ARSmsg: createRecTemp began-----------.");
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("insert into persontabtemp(id, firstName, lastName,"
+ " hobby) values (?, ?, ?, ?)");
stmt.setString(1, String.valueOf(id));
stmt.setString(2, firstName);
stmt.setString(3, lastName);
stmt.setString(4, hobby);
stmt.executeUpdate();
//personCurrentId = personNextId;
//personNextId++;
//query("SELECT * FROM persontabtemp");
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
}

public int findTotalNumberOfPersonsTemp() throws PersonDAOSysException {
System.out.println("ARSmsg: findTotalNumberOfPersonsTemp began-----------.");
int total = 111;
PreparedStatement stmt = null;
try {
getDBConnection();
stmt = conn.prepareStatement("select count(id) from persontabtemp");
ResultSet rs = stmt.executeQuery();
rs.next();
total = rs.getInt(1);
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return total;
}

public Person readRecTemp(int personId) throws PersonDAOSysException {
System.out.println("ARSmsg: readRecTemp began-----------.");
Person person = null;
PreparedStatement stmt = null;

try {
getDBConnection();
stmt = conn.prepareStatement("select firstName, lastName, "
+ " hobby from persontabtemp where id=?");
stmt.setString(1, String.valueOf(personId));
ResultSet rs = stmt.executeQuery();
rs.next();

person = new Person(personId,
rs.getString(1),
rs.getString(2),
rs.getString(3));
// System.out.print(personId + " ");
// System.out.print(rs.getString(1) + " ");
// System.out.print(rs.getString(2) + " ");
// System.out.println(rs.getString(3) + "\n");
rs.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
} finally {
closeStatement(stmt);
closeDBConnection();
}
return person;
}

private void getDBConnection() throws PersonDAOSysException {
//System.out.println("ARSmsg: getDBConnection began-----------.");
String url = "jdbc:mysql://localhost:3306/";
String dbName = "persondao";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "3391309";

// try {
// Properties props = new Properties();
// String curDir = System.getProperty("user.dir");
// //System.out.println("curDir=" + curDir);
// FileInputStream fis = new FileInputStream(curDir + "/PersonDAOARS.properties");
// props.load(fis);
// fis.close();
//
// url = props.getProperty("MySQLurl");
// dbName = props.getProperty("MySQLdbName");
// driver = props.getProperty("MySQLdriver");
// userName = props.getProperty("MySQLuserName");
// password = props.getProperty("MySQLpassword");
// } catch (FileNotFoundException e) {
// throw new PersonDAOSysException("\\FileNotFoundException:" + e.getMessage() + " " + e.toString());
// } catch (java.io.IOException e) {
// throw new PersonDAOSysException("\\java.io.IOException:" + e.getMessage() + " " + e.toString());
// }

try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url + dbName, userName, password);
//System.out.println("Connected to the database");
//conn.close();
//System.out.println("Disconnected from database");
} catch (Exception ex) {
throw new PersonDAOSysException("\\nSQLException:" + ex.getMessage() + " " + ex.toString());
}
}

private void closeDBConnection() throws PersonDAOSysException {
//System.out.println("ARSmsg: closeDBConnection began-----------.");
try {
conn.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
}
}

private void closeStatement(PreparedStatement stmt) throws PersonDAOSysException {
//System.out.println("ARSmsg: closeStatement began-----------.");
try {
stmt.close();
} catch (SQLException ex) {
throw new PersonDAOSysException("SQLException:" + ex.getMessage());
}
}

public synchronized void update(String expression) throws SQLException {
//for CREATE, DROP, INSERT and UPDATE
System.out.println("ARSmsg: update began-----------.");
Statement st = null;

st = conn.createStatement(); // statements

int i = st.executeUpdate(expression); // run the query

if (i == -1) {
System.out.println("db error : " + expression);
}
st.close();
}

public synchronized void query(String expression) throws SQLException {
//for SELECT
System.out.println("ARSmsg: query began-----------.");
Statement st = null;
ResultSet rs = null;

st = conn.createStatement();
rs = st.executeQuery(expression);

// dump(rs);
st.close();
}

public static void dump(ResultSet rs) throws SQLException {
System.out.println("ARSmsg: dump began-----------.");
ResultSetMetaData meta = rs.getMetaData();
int colmax = meta.getColumnCount();
int i;
Object o = null;

for (; rs.next();) {
for (i = 0; i < colmax; ++i) {
o = rs.getObject(i + 1);
System.out.print(o.toString() + " ");
}
System.out.println(" ");
}
System.out.println();
}

public void shutdown() throws SQLException {
System.out.println("ARSmsg: shutdown began-----------.");
Statement st = conn.createStatement();

st.execute("FLUSH TABLES"); //write out buffersand clean shut down
conn.close(); // if there are no other open connection
}
public int getPersonNextId() {
return personNextId;
}

public int getPersonCurrentId() {
return personCurrentId;
}
public void setPersonCurrentId(int id) {
personCurrentId = id;
}
}

Crud with JQuery Master-Detail 4

2011-03-17T04:43:00.003-07:00

The rest of the servlets have the same architectural approach
but differ in functionality. I will expalin the Master-Detail
mechanism and related servlets later.

The complete sources follows:

readNextServlet.java
--------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class readNextServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("ARSmsg: readNextServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
person = personDAO.readNextRec();

String id = String.valueOf(person.getId());
String name = person.getName();
String last = person.getLast();
String hobby = person.getHobby();
System.out.println("next id="+personDAO.getPersonNextId());

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
//System.out.println("ProcessData out id="+name);
}
catch (Error e) {
System.out.println(e.getMessage());
}
finally {
out.close();
}

}

}

readPrevServlet.java
--------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class readPrevServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("ARSmsg: readPrevServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
person = personDAO.readPrevRec();

if (person != null){
session.removeAttribute("personDAOsess");
session.setAttribute("personDAOsess", personDAO);
String id=String.valueOf(person.getId());
String name =person.getName();
String last =person.getLast();
String hobby=person.getHobby();

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
}
} finally {
out.close();
}

}
}

createServlet.java
------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class createServlet extends HttpServlet {

public void init()
throws ServletException {
System.out.println("ARSmsg: createServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/json;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
PersonDAOMySQLDBImpl personDAO;
HttpSession session = request.getSession();
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");

try {
String id = String.valueOf(personDAO.getPersonNextId());
String name = "Pls enter 20 chars";
String last = "Regards. ";
String hobby = "Ali R+";
System.out.println("ProcessData began");

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
// System.out.println("createServlet id="+name);
} finally {
out.close();
}

}
}

deleteServlet.java
------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class deleteServlet
extends HttpServlet
{
/**
* Called once at startup
*/
public void init()
throws ServletException
{
System.out.println("ARSmsg: deleteServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
personDAO.deleteRec(personDAO.getPersonCurrentId());
System.out.println("ARSSSSSSssCurrentId="+personDAO.getPersonCurrentId());
person = personDAO.readRec(personDAO.getPersonCurrentId());

String id = String.valueOf(person.getId());
String name = person.getName();
String last = person.getLast();
String hobby = person.getHobby();

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
//System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}

}

updateServlet.java
------------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class updateServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("Init() worked");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
String id = request.getParameter("id");
String name = request.getParameter("name");
String last = request.getParameter("last");
String hobby = request.getParameter("hobby");
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
personDAO.updateRec(Integer.valueOf(id), name, last, hobby);

if (person != null){
session.removeAttribute("personDAOsess");
session.setAttribute("personDAOsess", personDAO);

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
//System.out.println("ProcessData out id="+name);
}
} finally {
out.close();
}

}
}

Crud with JQuery Master-Detail 3

2011-03-17T04:43:00.001-07:00

The AJAX calls address the Servlets in their url parms. The
servlet calls are defined in the web.xml:

web.xml:
--------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Simple CRUD of ARS</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>init</servlet-name>
<servlet-class>servletPackage.initServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>new</servlet-name>
<servlet-class>servletPackage.createServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readnext</servlet-name>
<servlet-class>servletPackage.readNextServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readprev</servlet-name>
<servlet-class>servletPackage.readPrevServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>save</servlet-name>
<servlet-class>servletPackage.updateServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>delete</servlet-name>
<servlet-class>servletPackage.deleteServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>list</servlet-name>
<servlet-class>servletPackage.listServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>selectlist</servlet-name>
<servlet-class>servletPackage.selectListServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>init</servlet-name>
<url-pattern>/init</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>new</servlet-name>
<url-pattern>/new</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readnext</servlet-name>
<url-pattern>/readnext</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readprev</servlet-name>
<url-pattern>/readprev</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>save</servlet-name>
<url-pattern>/save</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>delete</servlet-name>
<url-pattern>/delete</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>list</servlet-name>
<url-pattern>/list</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>selectlist</servlet-name>
<url-pattern>/selectlist</url-pattern>
</servlet-mapping>
</web-app>

The sources of the servlets are in the source packages
servletPackage library.

initServlet.java is used to initialize the index.jsp's
form fields at the beginning of the application.

At the beginning of the index.jsp:
...
<%
System.out.println("index.jsp JSP script began here.");
PersonDAOMySQLDBImpl personDAO;

if (session.getAttribute("personDAOsess") == null){
System.out.println("index.jsp personDAOsess == null ");
personDAO = new PersonDAOMySQLDBImpl();
session.setAttribute("personDAOsess", personDAO);
}
else {
System.out.println("index.jsp personDAOsess!!!!=null");
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
System.out.println("personcurrentid="+personDAO.getPersonCurrentId());
}
%>
...

initializes the personDAO and puts it into a session attribute if it already does not exist.

Then initServlet.java works. It gets the current id from the personDAO of which constructor
has set it to 1. Then it:
...
person = personDAO.readRec(personDAO.getPersonCurrentId());
...
and retrieves the related person data. It formats this data into JSON format and
returns it with :
out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");

The complete source follows:

initServlet.java:
-----------------
package servletPackage;
/**
*
* @author Ali Riza SARAL
*/
import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class initServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("ARSmsg: initServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOMySQLDBImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
person = personDAO.readRec(personDAO.getPersonCurrentId());

String id = String.valueOf(person.getId());
String name = person.getName();
String last = person.getLast();
String hobby = person.getHobby();
System.out.println("init id="+personDAO.getPersonNextId());

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
//System.out.println("ProcessData out id="+name);
}
catch (Error e) {
System.out.println(e.getMessage());
}
finally {
out.close();
}

}

}

Crud with JQuery Master-Detail 2

2011-03-17T04:42:00.000-07:00

Lets go further into the AJAX call - servlets.

When a button is clicked the related JQuery handler gets activated.
This handler makes an AJAX call. The handlers are defined in the
js/JQmultiAJAXCalls.js.

aoData is used to pass the input values id, name, lastname and hobby
to the servlet indicated in the AJAX calls url param.
Datatype is JSON and be carefull about the contentType.
If the call ends with success then I parse the returned
data with ParseJSON into a var named jsonData. Then I use
this to update the input fields on the index.jsp with
the returned values.

JQmultiAJAXCalls.js
-------------------
$(document).ready(function() {
// Handler for .ready() called.
$(function() {
$("input#New").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('New is clicked dataString='+name);
var aoData = [];
aoData.push( { "name": "id", "value": id },
{ "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./new",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)},

success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Save").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Save is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./save",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Delete").click(function() {
alert("Please be patient!");
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Delete is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./delete",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})
$(function() {
$("input#Next").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Next is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{ "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./readnext",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Prev").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Prev is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./readprev",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#List").click(function() {
window.open("personList.jsp");
//window.close();
window.open('close.html', '_self');
})
})

});

Crud with JQuery Master-Detail 1

2011-03-17T04:29:00.000-07:00

This is a Simple CRUD application using JQuery. The detail screen has
CRUD & prev/next, List buttons. You can select a person from the
master list and work on the detail screen.

Both the detail and list JSP's use JQuery and AJAX calls.
The server side is implemented via Servlets and JSPs.
The data is used from a MySQL table.

CREATE TABLE `persontab` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`firstname` varchar(20) DEFAULT NULL,
`lastname` varchar(20) DEFAULT NULL,
`hobby` varchar(30) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=latin1;

You can populate it with:
INSERT INTO `persondao`.`persontab` (`firstname`, `lastname`, `hobby`) VALUES ("name1", "surname", "hobby");
INSERT INTO `persondao`.`persontab` (`firstname`, `lastname`, `hobby`) VALUES ("name2", "surname", "hobby");

Master list JSP uses the JQuery DT abilities fully, including buffering.

ANALYSIS and the source code:
-----------------------------
The application opens with index.jsp which is indicated as welcome file at
web.xml:
...
<display-name>Simple CRUD of ARS</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
...
(I will provide the complete web.xml when I come to servlet definitions).

Index.jsp has a form named 'theDetail'. This is used for input fields name, lastname
and hobby. At the bottom of this for there are navigation buttons next, prev,
new, save, delete. These buttons are linked to corresponding servlets via AJAX calls
which are included via
...
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
...
at the top of the index.jsp.
A personDAO is defined used to access the MySQL database. personDAO is also
used to keep track of the currentId and the NextAvailableId.

Index.jsp shows the first record in the MySQL DB when it is first opened.
This is done via an AJAX call to the init servlet.

This is the end of an overall outline of the index.page. The complete cource follows.

index.jsp
---------
<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>

<%@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">
<%@ page import="mainPackage.*" %>
<%@ page import="daoPackage.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
PersonDAOMySQLDBImpl personDAO;

if (session.getAttribute("personDAOsess") == null){
System.out.println("index.jsp personDAOsess == null ");
personDAO = new PersonDAOMySQLDBImpl();
session.setAttribute("personDAOsess", personDAO);
}
else {
System.out.println("index.jsp personDAOsess!!!!=null");
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
System.out.println("personcurrentid="+personDAO.getPersonCurrentId());
}
%>
<script type="text/javascript" charset="utf-8">
function InitScr() {
//alert ("Merhaba from Ali R+ with best wishes! ");
}
$(document).ready(function() {
$.ajax({
type:"POST",
url: "./init",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
});
} );
</script>
</head>
<body style="background-color:yellow" onLoad="InitScr()">

<h1>The Simplest JQuery CRUD Application</h1>

<br />

<form name="theDetail" action="" method="get">
<input type="hidden" id="id" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">

</form>
</body>
</html>

Simple CRUD with JQuery-4

2011-02-28T23:41:00.001-08:00

The underlying mechanism to be used as database is the Data Access Object.
It is defined in the source Packages.daoPackage
daoPackage.PersonDAO.java
-------------------------
package daoPackage;

import java.util.Collection;
import mainPackage.*;

public interface PersonDAO {

public void createRec(int id, String firstName,
String lastName, String hobby)
throws PersonDAOSysException;

public Person readRec(int personId)
throws PersonDAOSysException;

public void updateRec(int id, String firstName,
String lastName, String hobby)
throws PersonDAOSysException;

public void deleteRec(int personId)
throws PersonDAOSysException;
}

daoPackage.PersonDAOSysException
--------------------------------
package daoPackage;

public class PersonDAOSysException extends RuntimeException {
public PersonDAOSysException (String str) {
super(str);
}
public PersonDAOSysException () {
super();
}
}

daoPackage.PersonDAOVectorImpl.java
-----------------------------------
package daoPackage;

import java.util.*;
import javax.naming.*;
import java.sql.*;
import javax.sql.*;
import mainPackage.*;

public class PersonDAOVectorImpl implements PersonDAO {

private static Vector<Person> personVect;
private static int personNextId = 1;
private static int personCurrentId = 1;

public PersonDAOVectorImpl() {
System.out.println("PersonDAOVectorImpl constructor began.");
//check if it exists as serialized
//if not
// personelVectDB.populate();
// if it exists deserialize and populate?
// personelVectDB.deserialize();

personVect = new Vector<Person>();
Person personalData;

personalData = new Person();
personalData.setId(1);
personalData.setName("Ali");
personalData.setLast("SARAL");
personalData.setHobby("Music Composition");
personVect.add(personalData);

personalData = new Person();
personalData.setId(2);
personalData.setName("Tamer");
personalData.setLast("ÜNAL");
personalData.setHobby("Folk Music");
personVect.add(personalData);

personalData = new Person();
personalData.setId(3);
personalData.setName("Ekrem");
personalData.setLast("CANBEK");
personalData.setHobby("Violin");
personVect.add(personalData);

personalData = new Person();
personalData.setId(4);
personalData.setName("Turan");
personalData.setLast("MUTLUAY");
personalData.setHobby("Choir");
personVect.add(personalData);

personalData = new Person();
personalData.setId(5);
personalData.setName("Rengin");
personalData.setLast("AHISKALI");
personalData.setHobby("Literature");
personVect.add(personalData);

Enumeration vEnum = personVect.elements();
while (vEnum.hasMoreElements()) {
Person person = (Person) vEnum.nextElement();
System.out.println("ARSmsg: PersonDAOVectorImpl constructor person.name=" + person.getName() + " person.id=" + person.getId());
}

personNextId = 6;
personCurrentId = 1;
}

public void createRec(int id, String firstName, String lastName, String hobby)
throws PersonDAOSysException {
System.out.println("ARSmsg : createRec began.");
Person person = new Person();
try {
//getDBConnection();
person.setId(id);
person.setName(firstName);
person.setLast(lastName);
person.setHobby(hobby);
personVect.add(personVect.size(), person);
personCurrentId = personNextId;
personNextId++;
} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
//closeDBConnection();
}
}

public void deleteRec(int personId) throws PersonDAOSysException {
System.out.println("ARSmsg : deleteRec began.");
int posVect = 0;
try {
//getDBConnection();
posVect = findRecSeq(personId);
System.out.println("personCurrentId=" + personCurrentId);
System.out.println("posVect=" + posVect);
if (posVect != -1) {
personVect.removeElementAt(posVect);
reorganiseVect();
} else {
System.out.println("ARSmsg: Delete - Not found!");
}
} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
closeDBConnection();
}
}

public Person readRec(int personId)
throws PersonDAOSysException {
System.out.println("ARSmsg : readRec began.");
Person person = new Person();
int posVect = 0;
try {
//getDBConnection();
posVect = findRecSeq(personId);
System.out.println("personCurrentId=" + personCurrentId);
System.out.println("posVect=" + posVect);
if (posVect == -1) {
posVect = personCurrentId;
} else {
personCurrentId = posVect + 1;
}

return personVect.elementAt(posVect);
} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
//closeDBConnection();
}
}

public Person readNextRec()
throws PersonDAOSysException {
System.out.println("ARSmsg : readNextRec began.");
Person person = new Person();
int posVect = 0;
try {
//getDBConnection();
personCurrentId++;
posVect = findRecSeq(personCurrentId);
System.out.println("personCurrentId=" + personCurrentId);
System.out.println("posVect=" + posVect);
if (posVect == -1) {
posVect = personVect.size() - 1;
personCurrentId--;
}
person = (Person) personVect.elementAt(posVect);
System.out.println("readNextRec person.name =" + (String) person.getName());
return person;

} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
//closeDBConnection();
}
}

public Person readPrevRec() throws PersonDAOSysException {
System.out.println("ARSmsg : readPrevRec began.");
Person person = new Person();
int posVect = 0;
try {
//getDBConnection();
personCurrentId--;
posVect = findRecSeq(personCurrentId);
System.out.println("personCurrentId=" + personCurrentId);
System.out.println("posVect=" + posVect);
if (posVect == -1) {
posVect = 0;
personCurrentId++;
}
person = (Person) personVect.elementAt(posVect);
System.out.println("readPrevRec person.name =" + (String) person.getName());
return person;

} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
//closeDBConnection();
}
}

public void updateRec(int id, String firstName, String lastName,
String hobby) throws PersonDAOSysException {
System.out.println("ARSmsg : updateRec began.");
int posVect = 0;
Person person = new Person();

try {
//getDBConnection();

posVect = findRecSeq(id);
System.out.println("personNextId=" + personNextId);
System.out.println("posVect=" + posVect);
if (posVect == -1) {
posVect = personNextId - 1;
personNextId++;
}
else {
personVect.remove(posVect);
}
System.out.println("posVect=" + posVect);

person.setId(id);
person.setName(firstName);
person.setLast(lastName);
person.setHobby(hobby);
personVect.add(posVect, person);
} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
} finally {
closeDBConnection();
}
}

private int findRecSeq(int id) {
int posVect = 0;
Person person;
Iterator itr = personVect.iterator();
while (itr.hasNext()) {
person = (Person) itr.next();
//System.out.println("person.name=" + person.getName() + " person.id=" + person.getId());
if (person.getId() == id) {
return posVect;
}
posVect = posVect + 1;
}
return (-1);
}

private void reorganiseVect() {
int posVect = 0;
Person person;
Iterator itr = personVect.iterator();
while (itr.hasNext()) {
person = (Person) itr.next();
person.setId(posVect + 1);
posVect = posVect + 1;
}
personNextId = posVect + 1;
//personCurrentId = 1;
}

private void getDBConnection() throws PersonDAOSysException {
try {
if (personVect == null) {
//personVect = new Personel();
}
} catch (Exception ex) {
throw new PersonDAOSysException("\\DAOException:" + ex.getMessage() + " " + ex.toString());
}
}

private void closeDBConnection()
throws PersonDAOSysException {
try {
//personelVectDB.close();
} catch (Exception ex) {
throw new PersonDAOSysException("DAOException:" + ex.getMessage());
}
}

public Vector<Person> getPersonVect() {
return personVect;
}

public void addPerson(Person personalData) {
personVect.add(personalData);
personNextId++;
}

public int getPersonNextId() {
return personNextId;
}

public int getPersonCurrentId() {
return personCurrentId;
}
}

The daoPackage uses the Person.java definition as record definition and
it is located in the source Packages.mainPackage
mainPackage.Person.java
-----------------------

package mainPackage;

/**
*
* @author Ali Riza SARAL
*/
public class Person {

private String name;
private String last;
private String hobby;
private int id;

public Person(){}
public Person(int id, String name, String last, String hobby){
this.name = name;
this.last = last;
this.hobby = hobby;
this.id = id;
}
public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

public String getLast() {
return this.last;
}

public void setLast(String last) {
this.last = last;
}

public String getHobby() {
return this.hobby;
}

public void setHobby(String hobby) {
this.hobby = hobby;
}

public int getId() {
return this.id;
}

public void setId(int id) {
this.id = id;
}
}

The servlets use a utility program for processing escapes which resides
in the source Packages.util. This program uses commons-lang...jar
which has to be put on the classpath somewhere.
util.Escape.java
----------------
package util;

import org.apache.commons.lang.*;

public class Escape {
public static String html(String input) {
return StringEscapeUtils.escapeHtml(input);
}

public static String javaScript(String input) {
return StringEscapeUtils.escapeJavaScript(input);
}

public static String lineBreakToBr(String input) {
return input.replaceAll("\\n", "<br />");
}

public static String paragraphBreakToBrs(String input) {
return input.replaceAll("\\n\\s*\\n", "<br /><br />");
}
}

Simple CRUD with JQuery-3

2011-02-28T23:39:00.000-08:00

--------------
Each AJAX call triggers a corresponding URL of a servlet that are
defined in the web.xml

web.xml
-------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Simple CRUD of ARS</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>new</servlet-name>
<servlet-class>servletPackage.createServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readnext</servlet-name>
<servlet-class>servletPackage.readNextServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readprev</servlet-name>
<servlet-class>servletPackage.readPrevServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>save</servlet-name>
<servlet-class>servletPackage.updateServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>delete</servlet-name>
<servlet-class>servletPackage.deleteServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>list</servlet-name>
<servlet-class>servletPackage.listServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>selectlist</servlet-name>
<servlet-class>servletPackage.selectListServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>new</servlet-name>
<url-pattern>/new</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readnext</servlet-name>
<url-pattern>/readnext</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readprev</servlet-name>
<url-pattern>/readprev</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>save</servlet-name>
<url-pattern>/save</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>delete</servlet-name>
<url-pattern>/delete</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>list</servlet-name>
<url-pattern>/list</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>selectlist</servlet-name>
<url-pattern>/selectlist</url-pattern>
</servlet-mapping>
</web-app>

Each servlet is defined in the source Packages.servletPackage
createServlet.java
------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class createServlet extends HttpServlet {

public void init()
throws ServletException {
System.out.println("ARSmsg: createServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/json;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
PersonDAOVectorImpl personDAO;
HttpSession session = request.getSession();
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");

try {
String id = String.valueOf(personDAO.getPersonNextId());
String name = "Please enter data here";
String last = "Regards. ";
String hobby = "Ali R+";
System.out.println("ProcessData began");
name = name+ " new,";

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}
}

deleteServlet.java
------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class deleteServlet
extends HttpServlet
{
/**
* Called once at startup
*/
public void init()
throws ServletException
{
System.out.println("ARSmsg: deleteServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOVectorImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");
personDAO.deleteRec(personDAO.getPersonCurrentId());
person = personDAO.readRec(personDAO.getPersonCurrentId());

String id = String.valueOf(person.getId());
String name = person.getName();
String last = person.getLast();
String hobby = person.getHobby();

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}

}

listServlet.java
----------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;

import util.Escape;

public class listServlet
extends HttpServlet
{
/**
* Called once at startup
*/
public void init()
throws ServletException
{
System.out.println("ARSmsg: listServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/json;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
//response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
Enumeration e =request.getParameterNames();
while (e.hasMoreElements()) {
String key = (String) e.nextElement();
System.out.println(key);
}
StringBuffer s =request.getRequestURL();
System.out.println(s.toString());

String id = request.getParameter("id");
String name = request.getParameter("name");
String last = request.getParameter("last");
String hobby = request.getParameter("hobby");
System.out.println("ProcessData began");
name = name+ " list,";

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}
}

readNextServlet.java
--------------------
package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class readNextServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("ARSmsg: readNextServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOVectorImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");
person = personDAO.readNextRec();

String id = String.valueOf(person.getId());
String name = person.getName();
String last = person.getLast();
String hobby = person.getHobby();
System.out.println("next id="+personDAO.getPersonNextId());

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}

}

readPrevServlet.java
--------------------
package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class readPrevServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("ARSmsg: readPrevServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOVectorImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");
person = personDAO.readPrevRec();

if (person != null){
session.removeAttribute("personDAOsess");
session.setAttribute("personDAOsess", personDAO);
String id=String.valueOf(person.getId());
String name =person.getName();
String last =person.getLast();
String hobby=person.getHobby();

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
}
} finally {
out.close();
}

}
}

updateServlet.java
------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import mainPackage.*;
import daoPackage.*;

import util.Escape;

public class updateServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("Init() worked");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

PersonDAOVectorImpl personDAO;
Person person= new Person();
HttpSession session = request.getSession();

try {
String id = request.getParameter("id");
String name = request.getParameter("name");
String last = request.getParameter("last");
String hobby = request.getParameter("hobby");
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");
personDAO.updateRec(Integer.valueOf(id), name, last, hobby);

if (person != null){
session.removeAttribute("personDAOsess");
session.setAttribute("personDAOsess", personDAO);

id = Escape.html(id);
name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
id = Escape.javaScript(id);
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"id\":" + '"' + id + '"' + ","
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
}
} finally {
out.close();
}

}
}

Simple CRUD with JQuery-2

2011-02-28T23:38:00.000-08:00

The main screen is index.jsp . This screen has the new, save, delete,
next, prev and list buttons. The list button is not functional at
this moment. I will provide that in the near future.

index.jsp
----------

<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>

<%@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">
<%@ page import="mainPackage.*" %>
<%@ page import="daoPackage.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
PersonDAOVectorImpl personDAO;

if (session.getAttribute("personDAOsess") == null){
System.out.println("index.jsp personDAOsess == null ");
personDAO = new PersonDAOVectorImpl();
session.setAttribute("personDAOsess", personDAO);
}
else {
System.out.println("index.jsp personDAOsess!!!!=null");
personDAO = (PersonDAOVectorImpl) session.getAttribute("personDAOsess");
}
%>
<SCRIPT>
function InitScr() {
alert ("Merhaba from Ali R+ with best wishes! ");
$("input#Prev").click()
}

</SCRIPT>
</head>
<body style="background-color:yellow" onLoad="InitScr()">

<h1>The Simplest JQuery CRUD Application</h1>

<br />

<form name="theDetail" action="" method="get">
<input type="hidden" id="id" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">
</form>
</body>
</html>

Each button is linked to an event handler in the java script file
JQmultiAJAXCalls.js
-------------------
$(document).ready(function() {
// Handler for .ready() called.
$(function() {
$("input#New").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('New is clicked dataString='+name);
var aoData = [];
aoData.push( { "name": "id", "value": id },
{ "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./new",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)},

success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Save").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Save is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./save",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Delete").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Delete is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./delete",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})
$(function() {
$("input#Next").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Next is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{ "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./readnext",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Prev").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('Prev is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./readprev",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#List").click(function() {
var id = $("input#id").val();
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
//alert('List is clicked name='+name);
var aoData = [];
aoData.push( {"name": "id", "value": id },
{"name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./list",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

});

Simple CRUD with JQuery

2011-02-28T12:20:00.000-08:00

This tutorial will explain the construction of a simple CRUD
with vector based DAO using JQuery. This is the JQuery
version of my 'Simple CRUD Tutorial' at
http://tekne-techne.blogspot.com/2011/01/simple-crud-tutorial-intro.html

The main screen is index.jsp

This screen has the new, save, delete, next, prev and list buttons. The list button is not functional at this moment. I will provide that in the near future.

Each button is linked to an event handler in the java script file JQmultiAJAXCalls.js

Each AJAX call triggers a corresponding URL of a servlet that are defined in the web.xml

Each servlet is defined in the source Packages.servletPackage

The underlying mechanism to be used as database is the Data Access Object. It is defined in the source Packages.daoPackage

The daoPackage uses the Person.java definition as record definition and it is located in the source Packages.mainPackage

The servlets use a utility program for processing escapes which resides in the source Packages.util. This program uses commons-lang...jar which has to be put on the classpath somewhere.

Once again, I will provide the list and select Row in an other tutorial. I will provide the related source codes with the same explanation above at the required points. The source code is complete and working...

Kind regards.

Ali R+

Multi Actions with JQuery - 2

2011-02-27T10:08:00.001-08:00

This is a little bit more difficult than simple.
This example shows
1- how to define a servlet with web.xml and JAVA source lib
2- how to call this servlet via AJAX
3- how to pass values to the servlet via AJAX
4- how to receive returned values from the called servlet via AJAX
5- how to do all of these many times at the same JSP

web.xml
-------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Simple CRUD of ARS</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>new</servlet-name>
<servlet-class>servletPackage.createServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readnext</servlet-name>
<servlet-class>servletPackage.readNextServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>readprev</servlet-name>
<servlet-class>servletPackage.readPrevServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>save</servlet-name>
<servlet-class>servletPackage.updateServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>delete</servlet-name>
<servlet-class>servletPackage.deleteServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>list</servlet-name>
<servlet-class>servletPackage.listServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>selectlist</servlet-name>
<servlet-class>servletPackage.selectListServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>new</servlet-name>
<url-pattern>/new</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readnext</servlet-name>
<url-pattern>/readnext</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>readprev</servlet-name>
<url-pattern>/readprev</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>save</servlet-name>
<url-pattern>/save</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>delete</servlet-name>
<url-pattern>/delete</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>list</servlet-name>
<url-pattern>/list</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>selectlist</servlet-name>
<url-pattern>/selectlist</url-pattern>
</servlet-mapping>
</web-app>

createServlet.java
------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;

import util.Escape;

public class createServlet extends HttpServlet {

public void init()
throws ServletException {
System.out.println("ARSmsg: createServlet began to work");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/json;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
//response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
Enumeration e =request.getParameterNames();
while (e.hasMoreElements()) {
String key = (String) e.nextElement();
System.out.println(key);
}
StringBuffer s =request.getRequestURL();
System.out.println(s.toString());

String name = request.getParameter("name");
String last = request.getParameter("last");
String hobby = request.getParameter("hobby");
System.out.println("ProcessData began");
name = name+ " new,";

name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}
}

updateServlet.java
------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package servletPackage;

import java.io.*;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.*;

import util.Escape;

public class updateServlet extends HttpServlet {

public void init()
throws ServletException
{
System.out.println("Init() worked");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/json;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
//response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
Enumeration e =request.getParameterNames();
while (e.hasMoreElements()) {
String key = (String) e.nextElement();
System.out.println(key);
}
StringBuffer s =request.getRequestURL();
System.out.println(s.toString());

String name = request.getParameter("name");
String last = request.getParameter("last");
String hobby = request.getParameter("hobby");
System.out.println("ProcessData began");
name = name+ " save,";

name = Escape.html(name);
last = Escape.html(last);
hobby = Escape.html(hobby);

// for JSON output
name = Escape.javaScript(name);
last = Escape.javaScript(last);
hobby = Escape.javaScript(hobby);

out.println(
"{"
+ " \"name\":" + '"' + name + '"' + ","
+ " \"last\":" + '"' + last + '"' + ","
+ " \"hobby\":" + '"' + hobby + '"'
+ "}");
System.out.println("ProcessData out id="+name);
} finally {
out.close();
}

}
}

deleteServlet.java
listServlet.java
readNextServlet.java
readPrevServlet.java
...
these are similar for the time being.
They will vary when I implement the CRUD using this substructure.

JQMultiAJAXCalls.jsp
--------------------
<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>

<%@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>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
%>
<SCRIPT>
function InitScr() {
alert ("Merhaba from Ali R+ with best wishes! ");
}

</SCRIPT>
</head>
<body style="background-color:yellow" onLoad="InitScr()">

<h1>The Simplest JQuery CRUD Application</h1>

<br />

<form name="theDetail" action="" method="get">
<input type="hidden" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">
</form>
</body>
</html>

JQMultiAJAXCalls.js
-------------------
$(document).ready(function() {
// Handler for .ready() called.
$(function() {
$("input#New").click(function() {
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
alert('New is clicked dataString='+name);
var aoData = [];
aoData.push( { "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./new",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)},

success: function(data) {
var jsonData = $.parseJSON(data);
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Save").click(function() {
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();
alert('Save is clicked name='+name);
var aoData = [];
aoData.push( { "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./save",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown)
},
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
})
})

$(function() {
$("input#Delete").click(function() {
...
$(function() {
$("input#Next").click(function() {
...

$(function() {
$("input#Prev").click(function() {
...

$(function() {
$("input#List").click(function() {
...

});

package util;

import org.apache.commons.lang.*;

public class Escape {
public static String html(String input) {
return StringEscapeUtils.escapeHtml(input);
}

public static String javaScript(String input) {
return StringEscapeUtils.escapeJavaScript(input);
}

public static String lineBreakToBr(String input) {
return input.replaceAll("\\n", "<br />");
}

public static String paragraphBreakToBrs(String input) {
return input.replaceAll("\\n\\s*\\n", "<br /><br />");
}
}

Multi Actions with JQuery - 1

2011-02-27T10:06:00.000-08:00

This is a small tutorial about a simple multi-button JQuery
application. The first part will demonstarte how to handle
multi buttons and the second part will demonstrate:
1. How to handle multi actions
2. How to handle an action with AJAX and a servlet.

The multi-button simple example follows:

JQMultiButton.jsp
-----------------
<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>

<%@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>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiButton.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
%>
<SCRIPT>
function InitScr() {
alert ("Merhaba from Ali R+ with best wishes! ");
}

</SCRIPT>
</head>
<body style="background-color:yellow" onLoad="InitScr()">

<h1>The Simplest JQuery CRUD Application</h1>

<br />

<form name="theDetail" action="" method="get">
<input type="hidden" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">
</form>
</body>
</html>

JQmultiButton.js
----------------
$(document).ready(function() {
// Handler for .ready() called.

$(function() {
$("input#New").click(function() {
alert('New is clicked');
})
})

$(function() {
$("input#Save").click(function() {
alert('Save is clicked');
})
})

$(function() {
$("input#Delete").click(function() {
alert('Delete is clicked');
})
})
$(function() {
$("input#Next").click(function() {
alert('Next is clicked');
})
})

$(function() {
$("input#Prev").click(function() {
alert('Prev is clicked');
})
})

$(function() {
$("input#List").click(function() {
alert('List is clicked');
})
})

});

JQuery how to pass data to a servlet on the server via AJAX

2011-02-25T08:38:00.000-08:00

This is a short note about passing data to a servlet on the server.
using AJAX on JQuery. The problem is you can not find the required
format written anywhere.

-The passed data must be in the name-value format as seen below.
-The content type is indicated wrong in many internet references,
probably version difference.
-The JQuery version I used is jQuery JavaScript Library v1.4.4
-be careful dataType "json" does not work it has to be capitolized.

The complete application uses multiple buttons that trigger multiple
AJAX calls. I will provide the full working code as I make progress.
Calling and returning back from AJAX driven servlets is working now.

Cheers.

Ali R+

Here is the solution:
...
...
...
var name = $("input#name").val();
var last = $("input#last").val();
var hobby = $("input#hobby").val();

var aoData = [];

aoData.push( { "name": "name", "value": name },
{"name": "last", "value": last },
{"name": "hobby", "value": hobby }
);
$.ajax({
type:"POST",
url: "./new",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
data: aoData,
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
})
return false;
...
...
...

JQ Forms with AJAX-JSP8

2011-02-20T00:22:00.000-08:00

This is basicly the same as Sample4 but there is a small addition to
demonstrate fieldSerialize and fieldValue Form Plugin methods.

sample8.java
------------
<%--
Document : sample4
Created on : 19.Şub.2011, 20:17:55
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#jsonForm').ajaxForm({
// dataType identifies the expected content type of the server response
dataType: 'json',

// success identifies the function to invoke when the server response
// has been received
success: processJson
});
});

function processJson(data) {
// 'data' is the json object returned from the server
alert(data.message);
var queryString = $('#jsonForm :text').fieldSerialize();
var pwd = $('#jsonForm :text').fieldValue()[0];
alert(queryString);
}
</script>
</head>
<body>
<div id="sample4">
<p />
This page shows how to handle JSON data returned from the server.
<p />
The form below submits a message to the server and the server
echos it back in JSON format.
<br />
<p />
<form id="jsonForm" action="json-echo.jsp" method="post"><div>
Message: <input type="text" name="message" value="Hello JSON" />
<input type="submit" value="Echo as JSON" />
</div></form>
<br />
</div>
</body>
</html>

json-echo.java
--------------
<%
out.print("{ \"message\": \"" + request.getParameter("message") + "\" }");
%>

JQ Forms with AJAX-JSP6

2011-02-20T00:21:00.000-08:00

This example demonstrates the use of ajaxForm with HTML data.

Sample6.jsp
-----------
<%--
Document : sample6.jsp
Created on : 19.Şub.2011, 21:09:26
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',

// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>

<div id="sample6">
<p />
This page shows how to handle HTML data returned from the server.
<p />
The form below submits a message to the server and the server
echos it back in an HTML div. The response is added to this
page in the <code class="inline">htmlExampleTarget</code> div below.
<br />
<form id="htmlForm" action="html-echo.jsp" method="post"><div>
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</div></form>

<br />
<h3>htmlExampleTarget (output will be added below):</h3>
<div id="htmlExampleTarget"></div>
</div>

</body>
</html>

html-echo.jsp
-------------
<%
out.print("<div style=\"background-color:#ffa; padding:20px\">" + request.getParameter("message") + "</div>");
%>

JQ Forms with AJAX-JSP5

2011-02-20T00:19:00.000-08:00

This example demonstrates the use of ajaxForm with XML data.

Sample5.jsp
-----------
<%--
Document : sample5.jsp
Created on : 19.Şub.2011, 20:38:10
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function() {
// bind form using ajaxForm
$('#xmlForm').ajaxForm({
// dataType identifies the expected content type of the server response
dataType: 'xml',

// success identifies the function to invoke when the server response
// has been received
success: processXml
});
});
function processXml(responseXML) {
// 'responseXML' is the XML document returned by the server; we use
// jQuery to extract the content of the message node from the XML doc
var message = $('message', responseXML).text();
alert(message);
}
</script>
</head>
<body>
<div id="sample5">
<p />
This page shows how to handle XML data returned from the server.
<p />
The form below submits a message to the server and the server
echos it back in XML format.
<br />

<form id="xmlForm" action="xml-echo.jsp" method="post"><div>
Message: <input type="text" name="message" value="Hello XML" />
<input type="submit" value="Echo as XML" />
</div></form>
</div>

</body>
</html>

xml-echo.jsp
------------
<%@page contentType="text/xml" pageEncoding="UTF-8"%>
<%

// !!! IMPORTANT !!! - the server must set the content type to XML
out.print("<root><message>" + request.getParameter("message") + "</message></root>");
%>

JQ Forms with AJAX-JSP4

2011-02-20T00:16:00.000-08:00

This example demonstrates the use of ajaxForm with JSON data.

Sample4.jsp
-----------
<%--
Document : sample4
Created on : 19.Şub.2011, 20:17:55
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#jsonForm').ajaxForm({
// dataType identifies the expected content type of the server response
dataType: 'json',

// success identifies the function to invoke when the server response
// has been received
success: processJson
});
});

function processJson(data) {
// 'data' is the json object returned from the server
alert(data.message);
}
</script>
</head>
<body>
<div id="sample4">
<p />
This page shows how to handle JSON data returned from the server.
<p />
The form below submits a message to the server and the server
echos it back in JSON format.
<br />
<p />
<form id="jsonForm" action="json-echo.jsp" method="post"><div>
Message: <input type="text" name="message" value="Hello JSON" />
<input type="submit" value="Echo as JSON" />
</div></form>
<br />
</div>
</body>
</html>

json-echo.jsp
-------------
<%
out.print("{ \"message\": \"" + request.getParameter("message") + "\" }");
%>

JQ Forms with AJAX-JSP3

2011-02-20T00:15:00.000-08:00

There are three slightly different examples of validation here. The first uses the forData array.

FIRST EXAMPLE:
--------------

Sample3_1.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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
var x=0;
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm1').ajaxForm( { beforeSubmit: validate } );
});
function validate(formData, jqForm, options) {
// formData is an array of objects representing the name and value of each field
// that will be sent to the server; it takes the following form:
//
// [
// { name: username, value: valueOfUsernameInput },
// { name: password, value: valueOfPasswordInput }
// ]
//
// To validate, we can examine the contents of this array to see if the
// username and password fields have values. If either value evaluates
// to false then we return false from this method.
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('Please enter a value for both Username and Password');
return false;
}
}
alert('Both fields contain values.');
}
</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>formData</code> Argument</h3>
<form id="validateForm1" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>
</div>

</body>
</html>

dummy.jsp
---------
<%--
Document : dummy
Created on : 19.?ub.2011, 09:30:16
Author : Ali Riza SARAL
--%>
<%
out.print("Hello world");
%>

The second uses the jqform element to acces the DOM elemnts directly.

SECOND EXAMPLE:
---------------

Sample3_2.jsp
-------------
<%--
Document : sample3
Created on : 19.Şub.2011, 10:38:01
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm2').ajaxForm( { beforeSubmit: validate } );
})

function validate(formData, jqForm, options) {
// jqForm is a jQuery object which wraps the form DOM element
//
// To validate, we can access the DOM elements directly and return true
// only if the values of both the username and password fields evaluate
// to true

var form = jqForm[0];
if (!form.username.value || !form.password.value) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}

</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>jqForm</code> Argument</h3>
<form id="validateForm2" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>
</div>

</body>
</html>

The third example uses the fieldValue is a Form Plugin method.

THIRD EXAMPLE:
--------------

Sample3_3.jsp:
--------------
<%--
Document : sample3
Created on : 19.Şub.2011, 10:38:01
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm3').ajaxForm( { beforeSubmit: validate } );
})

function validate(formData, jqForm, options) {
// fieldValue is a Form Plugin method that can be invoked to find the
// current value of a field
//
// To validate, we can capture the values of both the username and password
// fields and return true only if both evaluate to true

var usernameValue = $('input[name=username]').fieldValue();
var passwordValue = $('input[name=password]').fieldValue();

// usernameValue and passwordValue are arrays but we can do simple
// "not" tests to see if the arrays are empty
if (!usernameValue[0] || !passwordValue[0]) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}
</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>fieldValue</code> Method</h3>
<form id="validateForm3" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>

</div>

</body>
</html>

JQ Forms with AJAX-JSP2

2011-02-20T00:14:00.000-08:00

This example demonstarates the use of ajaxSubmit() and pre- / post- submit callback.

Sample2.jsp
-----------
<%--
Document : sample2
Created on : 19.Şub.2011, 09:56:09
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback

// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};

// bind to the form's submit event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);

// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];

alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}

// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property

// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property

// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}

</script>
</head>
<body>
<div id="sample2" class="sampleTabContent" data-tabid="ajaxSubmit">
<p />
The following code controls the HTML form beneath it. It uses <code class="inline">ajaxSubmit</code>
to submit the form.
<pre><code class="mix">// prepare the form when the DOM is ready

</code></pre>
<form id="myForm2" action="dummy.jsp" method="post"><div>

<input type="hidden" name="Hidden" value="hiddenValue" />
<table>
<tr><td>Name:</td><td><input name="Name" type="text" value="MyName2" /></td></tr>
<tr><td>Password:</td><td><input name="Password" type="password" /></td></tr>
<tr><td>Multiple:</td><td><select name="Multiple" multiple="multiple">
<optgroup label="Group 1">
<option value="one" selected="selected">One</option>

<option value="two">Two</option>
<option value="three">Three</option>
</optgroup>
<optgroup label="Group 2">
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>

</optgroup>
</select></td></tr>
<tr><td>Single:</td><td><select name="Single">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select></td></tr>

<tr><td>Single2:</td><td><select name="Single2">
<optgroup label="Group 1">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
<optgroup label="Group 2">

<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</optgroup>
</select></td></tr>
<tr><td>Check:</td><td>
<input type="checkbox" name="Check" value="1" />

<input type="checkbox" name="Check" value="2" />
<input type="checkbox" name="Check" value="3" />
</td></tr>
<tr><td>Radio:</td><td>
<input type="radio" name="Radio" value="1" />
<input type="radio" name="Radio" value="2" />
<input type="radio" name="Radio" value="3" />
</td></tr>
<tr><td>Text:</td><td><textarea name="Text" rows="2" cols="20">This is Form2</textarea></td></tr>

</table>
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1" />
<input type="image" name="submitButton" value="Submit2" src="submit.gif" />
</div></form>
<h1>Output Div (#output2):</h1>
<div id="output2">AJAX response will replace this content.</div>
</div>

</body>
</html>

dummy.jsp
---------
<%--
Document : dummy
Created on : 19.?ub.2011, 09:30:16
Author : Ali Riza SARAL
--%>
<%
out.print("Hello world");
%>

JQ Forms with AJAX-JSP1

2011-02-20T00:12:00.001-08:00

This tutorial is based on the examples given at "jQuery Form Plugin" page. I tried to remain as loyal as possible to the originals which belong to the official JQuery site.

My contribution although not big is:
1- I extracted the examples from the gorgious example frame of JQuery and made them simple easy to copy and use seperate examples.

2- I changed the PHP AJAX calls to JSP AJAX calls.

Kind regards.

This example demonstarates the use of ajaxForm() and pre- / post- submit callback.

Sample1.jsp
-----------
<%--
Document : sample1
Created on : 19.Şub.2011, 09:19:43
Originally : belongs to "jQuery Form Plugin"
Author : Ali Riza SARAL
--%>

<%@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>JSP Page</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback

// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};

// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];

alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}

// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property

// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property

// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
</script>
</head>
<body>
<div id="sample1">
<form id="myForm1" action="dummy.jsp" method="post"><div>
<input type="hidden" name="Hidden" value="hiddenValue" />
<table>
<tr><td>Name:</td><td><input name="Name" type="text" value="MyName1" /></td></tr>
<tr><td>Password:</td><td><input name="Password" type="password" /></td></tr>
<tr><td>Multiple:</td><td><select name="Multiple" multiple="multiple">

<optgroup label="Group 1">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</optgroup>
<optgroup label="Group 2">
<option value="four">Four</option>

<option value="five">Five</option>
<option value="six">Six</option>
</optgroup>
</select></td></tr>
<tr><td>Single:</td><td><select name="Single">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>

<option value="three">Three</option>
</select></td></tr>
<tr><td>Single2:</td><td><select name="Single2">
<optgroup label="Group 1">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
<optgroup label="Group 2">
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</optgroup>
</select></td></tr>

<tr><td>Check:</td><td>
<input type="checkbox" name="Check" value="1" />
<input type="checkbox" name="Check" value="2" />
<input type="checkbox" name="Check" value="3" />
</td></tr>
<tr><td>Radio:</td><td>
<input type="radio" name="Radio" value="1" />
<input type="radio" name="Radio" value="2" />

<input type="radio" name="Radio" value="3" />
</td></tr>
<tr><td>Text:</td><td><textarea name="Text" rows="2" cols="20">This is Form1</textarea></td></tr>
</table>
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1" />
<input type="image" name="submitButton" value="Submit2" src="submit.gif" />
<input type="image" name="submitButton" value="Submit3" src="submit.gif" />
<input type="image" name="submitButton" value="Submit4" src="submit.gif" />
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
</div></form>
<h1>Output Div (#output1):</h1>
<div id="output1">AJAX response will replace this content.</div>
</div>

</body>
</html>

dummy.jsp
---------
<%--
Document : dummy
Created on : 19.?ub.2011, 09:30:16
Author : Ali Riza SARAL
--%>
<%
out.print("Hello world");
%>

JQ datatable pipeline largedata with AJAX

2011-02-18T07:25:00.000-08:00

JQuery datatable how to pipeline largedata with AJAX and JSP

My work depends on "DataTables server-side processing with
pipelining example " from the official JQuery side. The
difference are:

1. The original example's AJAX works with PHP where as mine works
with JSP.
2. I corrected a paging problem which I do not know why it
happened to me or whether the original also has it. The problem was:
Although it did not come to the end of the data, it disabled the
further arrow > button. So, I could not reach the data further than
the data that had been read at the first moment. I figured out that if
I change the TotalDisplayRecords the datatable behaves as required,
including the page size and sort change cases.

I added:

if ((oCache.iDisplayStart+ oCache.iDisplayLength < json.iTotalRecords) &&
(oCache.iCacheUpper+ oCache.iDisplayLength < json.iTotalRecords))
json.iTotalDisplayRecords=oCache.iCacheUpper+oCache.iDisplayLength;
else
json.iTotalDisplayRecords = json.iTotalRecords;

The complete and running code follws:

serverSideJQdtARS_5.jsp
-----------------------

<!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" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
var oCache = {
iCacheLower: -1
};

function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name == sKey )
{
aoData[i].value = mValue;
}
}
}

function fnGetKey( aoData, sKey )
{
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name == sKey )
{
return aoData[i].value;
}
}
return null;
}

function fnDataTablesPipeline ( sSource, aoData, fnCallback ) {
//alert("fnDataTablesPipeline");
var iPipe = 2; /* Ajust the pipe size */

var bNeedServer = false;
var sEcho = fnGetKey(aoData, "sEcho");
var iRequestStart = fnGetKey(aoData, "iDisplayStart");
var iRequestLength = fnGetKey(aoData, "iDisplayLength");
var iRequestEnd = iRequestStart + iRequestLength;
//alert("iRequestStart="+iRequestStart+"iRequestLength="+iRequestLength);

oCache.iDisplayStart = iRequestStart;

/* outside pipeline? */
if ( oCache.iCacheLower < 0 || iRequestStart < oCache.iCacheLower || iRequestEnd + iRequestLength*iPipe > oCache.iCacheUpper )
{
bNeedServer = true;
}
//alert(bNeedServer);
/* sorting etc changed? */
if ( oCache.lastRequest && !bNeedServer )
{
for( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho" )
{
if ( aoData[i].value != oCache.lastRequest[i].value )
{
bNeedServer = true;
break;
}
}
}
}

/* Store the request for checking next time around */
oCache.lastRequest = aoData.slice();

if ( bNeedServer )
{
if ( iRequestStart < oCache.iCacheLower )
{
iRequestStart = iRequestStart - (iRequestLength*(iPipe-1));
if ( iRequestStart < 0 )
{
iRequestStart = 0;
}
}

oCache.iCacheLower = iRequestStart;
oCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe);
oCache.iDisplayLength = fnGetKey( aoData, "iDisplayLength" );
fnSetKey( aoData, "iDisplayStart", iRequestStart );
fnSetKey( aoData, "iDisplayLength", iRequestLength*iPipe );
//alert("oCache.iCacheLower="+oCache.iCacheLower+"oCache.iCacheUpper="+oCache.iCacheUpper);

$.getJSON( sSource, aoData, function (json) {
/* Callback processing */
oCache.lastJson = jQuery.extend(true, {}, json);

if ( oCache.iCacheLower != oCache.iDisplayStart )
{
json.aaData.splice( 0, oCache.iDisplayStart-oCache.iCacheLower );
}
json.aaData.splice( oCache.iDisplayLength, json.aaData.length );
jsonARS = json;

// if (oCache.iCacheUpper+ oCache.iDisplayLength < json.iTotalRecords)
// json.iTotalDisplayRecords=oCache.iCacheUpper+oCache.iDisplayLength;
if ((oCache.iDisplayStart+ oCache.iDisplayLength < json.iTotalRecords) &&
(oCache.iCacheUpper+ oCache.iDisplayLength < json.iTotalRecords))
json.iTotalDisplayRecords=oCache.iCacheUpper+oCache.iDisplayLength;
else
json.iTotalDisplayRecords = json.iTotalRecords;
fnCallback(json)
} );
}
else
{
json = jQuery.extend(true, {}, oCache.lastJson);
json.sEcho = sEcho; /* Update the echo for each response */
json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
json.aaData.splice( iRequestLength, json.aaData.length );
jsonARS = json;
fnCallback(json);
return;
}
}
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
// "sPaginationType": "full_numbers",
"sPaginationType": "two_button",
"aaSorting": [[0, 'desc'], [1, 'desc']],

"sAjaxSource": "./server_processing.jsp",
"fnServerData": fnDataTablesPipeline
} );
} );

</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
</div>
<H1>Live example</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Rendering engine</TH>
<TH width="25%">Browser</TH>
<TH width="25%">Platform(s)</TH>
<TH width="15%">Engine version</TH>
<TH width="15%">CSS grade</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TH>Rendering engine</TH>
<TH>Browser</TH>
<TH>Platform(s)</TH>
<TH>Engine version</TH>
<TH>CSS grade</TH>
</TR>
</TFOOT>
</TABLE>
</DIV>
</div>
</body>
</html>

server_processing.jsp
---------------------

<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>

<%@page import="java.sql.Connection"%>
<%@page import="atg.taglib.json.util.*"%>
<%@page import= "java.util.*"%>
<%@page import= "java.sql.*"%>
<%@page import= "org.apache.commons.lang.*"%>

<%
class Utilities {

Utilities() {
}

;

String escape_string(String input) {
return StringEscapeUtils.escapeHtml(input);
}
}
%>

<%
System.out.println("test arsssssssssssssssssssssss");
Utilities util = new Utilities();
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
String[] aColumns = {"engine", "browser", "platform", "version", "grade"};

/* Indexed column (used for fast and accurate table cardinality) */
String sIndexColumn = "id";

/* DB table to use */
String sTable = "ajax";
/* Database connection information */
String user = "root";
String password = "3391309";
String db = "jquerydb";
String server = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* MySQL connection
*/

Connection conn = null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost/" + db,
user, password);

if (!conn.isClosed()) {
System.out.println("Successfully connected to "
+ "MySQL server using TCP/IP...");
}

} catch (Exception e) {
System.err.println("Exception: " + e.getMessage());
} finally {
// try {
// if (conn != null) {
// //conn.close();
// }
// } catch (SQLException e) {
// }
}

/*
* Paging
*/
String sLimit = "";
if (request.getParameter("iDisplayStart") != null
&& request.getParameter("iDisplayLength") != "-1") {
sLimit = "LIMIT " + util.escape_string(request.getParameter("iDisplayStart")) +
", " + util.escape_string(request.getParameter("iDisplayLength"));
}

/*
* Ordering
*/
String sOrder = "";

if (request.getParameter("iSortCol_0") != null) {
sOrder = "ORDER BY ";

for (int i = 0; i < Integer.valueOf(request.getParameter("iSortingCols")); i++) {
if (request.getParameter("bSortable_" + Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))).equals("true")) {
sOrder += aColumns[Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))] + " "
+ util.escape_string(request.getParameter("sSortDir_" + String.valueOf(i))) + ", ";
}
}

sOrder = sOrder.substring(0, sOrder.length()-2);
if (sOrder.equals("ORDER BY")) {
sOrder = "";
}
sOrder += " ";
}

/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
String sWhere = "";
System.out.println("sSearch="+ request.getParameter("sSearch"));

if (request.getParameter("sSearch") != "") {
sWhere = "WHERE (";
for (int i = 0; i < aColumns.length; i++) {
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch")) + "%' OR ";
}
sWhere = sWhere.substring(0, sWhere.length()-3);
sWhere += ')';
}

/* Individual column filtering */

for (int i = 0; i < aColumns.length; i++) {
if (request.getParameter("bSearchable_" + String.valueOf(i)) == "true"
&& request.getParameter("sSearch_" + String.valueOf(i)) != "") {
if (sWhere == "") {
sWhere = "WHERE ";
} else {
sWhere += " AND ";
}
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch_" + String.valueOf(i))) + "%' ";
}
}

/*
* SQL queries
* Get data to display
*/
String strColumnNames = "";

for (int i=0;i < aColumns.length;i++){
strColumnNames = strColumnNames + ", "+ aColumns[i];
}
strColumnNames = strColumnNames.substring(1);

String sQuery = "SELECT "
+ strColumnNames
+ " FROM " + sTable
+ " "
+ sWhere
+ sOrder
+ sLimit;

System.out.println("sQuery="+sQuery);

Statement s = conn.createStatement();
s.executeQuery(sQuery);

/* Data set length after filtering */
ResultSet rs = s.getResultSet();
int count = 0;
while (rs.next()) {
String engineCol = rs.getString("engine");
System.out.println("engine = " + engineCol);
++count;
}
int iFilteredTotal = count;
rs.close();
s.close();
System.out.println("Selected count="+iFilteredTotal);

/* Total data set length */
s = conn.createStatement();
String sQuery2 = " SELECT COUNT(*) AS rowcount FROM " + sTable;
rs = s.executeQuery(sQuery2);
rs.next();
int iTotal = rs.getInt("rowcount");
rs.close();
s.close();
System.out.println("Total count="+iTotal);

/*
* Output
*/
String output = "{" +
"\"sEcho\" : "+ request.getParameter("sEcho")+ ", " +
"\"iTotalRecords\" : " + String.valueOf(iTotal) + ", " +
"\"iTotalDisplayRecords\" : " + String.valueOf(iFilteredTotal) + ", " +
// "\"iDisplayLength\" : " + "10" + ", " +
// "\"iDisplayStart\" : " + "10" + ", " +
"\"aaData\" : [" + "";

Object[][] aaData= new Object[iFilteredTotal][5];

s = conn.createStatement();
s.executeQuery(sQuery);
rs = s.getResultSet();

int rowNum=0;
while ( rs.next() )
{
System.out.println("rowNum="+ rowNum);
//if (rowNum > 3) break;
Object[] aRow = {"","","",0,""};
Object[] row = {"","","",0,""};

for ( int i=0 ; i<aColumns.length ; i++ )
{
System.out.println("i="+ i +" colVal="+ rs.getString( aColumns[i]));
if ( aColumns[i] == "version" )
{
/* Special output formatting for 'version' column */
row[i] = (rs.getInt( aColumns[i] )==0) ? "-" : rs.getInt(aColumns[i]);
}
else if ( aColumns[i] != " " )
{
/* General output */
row[i] = rs.getString( aColumns[i]);
}
}
aaData[rowNum] = row;
System.out.println("rowNum("+rowNum +") row[0]="+row[0].toString());
rowNum++;
}
rs.close();
s.close();

String valRow = " [ ";
for (int rowN = 0; rowN < iFilteredTotal; rowN++) {
System.out.println("rowN="+rowN);
for (int colN = 0; colN < aColumns.length; colN++) {
System.out.println(" colN="+colN);
if (aColumns[colN] == "version" )
valRow = valRow + " " + aaData[rowN][colN].toString() + " , ";
else if ( aColumns[colN] != " " )
valRow = valRow + "\"" + aaData[rowN][colN].toString() + "\" , ";
}
valRow = valRow.substring(0, valRow.length()-2);
valRow = valRow + " ], ";
System.out.println("valRow="+valRow);
output = output + valRow;
valRow = " [ ";
}
System.out.println("output="+output);
output = output.substring(0, output.length()-2);
output = output + " ] }";

out.print(output);
%>

JQ AJAX server processing with PAGING

2011-02-16T00:19:00.000-08:00

This is the continuation of the previous tutorial on serverSide JQuery DataTable with JSP tutorial. After you finish this tutorial you may have noticed that the paging buttons(two_button) did not work. If studied one can see that the original server_processing.php example had the same discrepancy.

I believe Allan JARDINE has done a tremendous contribution and deserves a decent return anyway. The mentioned example is basicly an AJAX server processing example and it is not a paging example. So, it may not be adequate to name it as a discrepancy. Nevertheless, it has to be fixed to continue our endevour.

Thee is a simple solution to this which requires a better understanding of server processing with a 'json' object and event handling.

Define a new(global) json variable above the $(document).ready function:
...
json jsonARS;
...

Get the json variable returned from the server and put it in the global jsonARS var.

Place in the $(document).ready function:
...
"sAjaxSource": "./server_processing.jsp",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "more_data", "value": "my_value" } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
//alert("OK");
jsonARS = json;
fnCallback(json);
} );
}
...

Handle the two_button bttons with:
...
$('#example_prev').click( function() {
...

get the osettings structure pointer to acces the _iDisplayLength

...
var oSettings = oTable.fnSettings();
...

use jsonARS to access the jsonARS.iTotalDisplayRecords

...

Please note that, I handle the below cases in event processing:
1- Do not go forward over the end of the total data.
2- Do not go backwards before the beginning of the total data.
3- Do not go further than the end of the displayed(selected) data.
etc.

The complete working code follows.

Cheers.

Ali R+

serverSideJQdtARS_3.jsp
-----------------------
<!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" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
var jsonARS;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
// "sPaginationType": "full_numbers",
"sPaginationType": "two_button",
"aaSorting": [[0, 'desc'], [1, 'desc']],

"sAjaxSource": "./server_processing.jsp",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "more_data", "value": "my_value" } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
//alert("OK");
jsonARS = json;
fnCallback(json);
} );
},
"fnCallback": function ( json ) {

}
} );
$('#example_next').click( function() {
//alert('paginate click handler');
var oSettings = oTable.fnSettings();
// alert("iDisplayStart="+oSettings._iDisplayStart+
// "iDisplayLength="+oSettings._iDisplayLength+
// "iTotalRecords="+jsonARS.iTotalRecords+
// "iTotalDisplayRecords="+jsonARS.iTotalDisplayRecords
// );

if (((oSettings._iDisplayStart+ oSettings._iDisplayLength) < jsonARS.iTotalRecords) &&
(jsonARS.iTotalDisplayRecords == oSettings._iDisplayLength))
oSettings._iDisplayStart += oSettings._iDisplayLength;
oSettings.oApi._fnDraw( oSettings );
} );
$('#example_prev').click( function() {
//alert('paginate click handler');
var oSettings = oTable.fnSettings();
oSettings._iDisplayStart -= oSettings._iDisplayLength;
if (oSettings._iDisplayStart < 0) oSettings._iDisplayStart = 0;
oSettings.oApi._fnDraw( oSettings );
} );
} );

</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
</div>
<H1>Live example</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Rendering engine</TH>
<TH width="25%">Browser</TH>
<TH width="25%">Platform(s)</TH>
<TH width="15%">Engine version</TH>
<TH width="15%">CSS grade</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
</body>
</html>

server_processing.jsp
---------------------

<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>

<%@page import="java.sql.Connection"%>
<%@page import="atg.taglib.json.util.*"%>
<%@page import= "java.util.*"%>
<%@page import= "java.sql.*"%>
<%@page import= "org.apache.commons.lang.*"%>

<%
class Utilities {

Utilities() {
}

;

String escape_string(String input) {
return StringEscapeUtils.escapeHtml(input);
}
}
%>

<%
System.out.println("test arsssssssssssssssssssssss");
Utilities util = new Utilities();
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
String[] aColumns = {"engine", "browser", "platform", "version", "grade"};

/* Indexed column (used for fast and accurate table cardinality) */
String sIndexColumn = "id";

/* DB table to use */
String sTable = "ajax";
/* Database connection information */
String user = "root";
String password = "3391309";
String db = "jquerydb";
String server = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* MySQL connection
*/

Connection conn = null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost/" + db,
user, password);

if (!conn.isClosed()) {
System.out.println("Successfully connected to "
+ "MySQL server using TCP/IP...");
}

} catch (Exception e) {
System.err.println("Exception: " + e.getMessage());
} finally {
// try {
// if (conn != null) {
// //conn.close();
// }
// } catch (SQLException e) {
// }
}

/*
* Paging
*/
String sLimit = "";
if (request.getParameter("iDisplayStart") != null
&& request.getParameter("iDisplayLength") != "-1") {
sLimit = "LIMIT " + util.escape_string(request.getParameter("iDisplayStart")) +
", " + util.escape_string(request.getParameter("iDisplayLength"));
}

/*
* Ordering
*/
String sOrder = "";

if (request.getParameter("iSortCol_0") != null) {
sOrder = "ORDER BY ";

for (int i = 0; i < Integer.valueOf(request.getParameter("iSortingCols")); i++) {
if (request.getParameter("bSortable_" + Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))).equals("true")) {
sOrder += aColumns[Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))] + " "
+ util.escape_string(request.getParameter("sSortDir_" + String.valueOf(i))) + ", ";
}
}

sOrder = sOrder.substring(0, sOrder.length()-2);
if (sOrder.equals("ORDER BY")) {
sOrder = "";
}
sOrder += " ";
}

/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
String sWhere = "";
System.out.println("sSearch="+ request.getParameter("sSearch"));

if (request.getParameter("sSearch") != "") {
sWhere = "WHERE (";
for (int i = 0; i < aColumns.length; i++) {
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch")) + "%' OR ";
}
sWhere = sWhere.substring(0, sWhere.length()-3);
sWhere += ')';
}

/* Individual column filtering */

for (int i = 0; i < aColumns.length; i++) {
if (request.getParameter("bSearchable_" + String.valueOf(i)) == "true"
&& request.getParameter("sSearch_" + String.valueOf(i)) != "") {
if (sWhere == "") {
sWhere = "WHERE ";
} else {
sWhere += " AND ";
}
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch_" + String.valueOf(i))) + "%' ";
}
}

/*
* SQL queries
* Get data to display
*/
String strColumnNames = "";

for (int i=0;i < aColumns.length;i++){
strColumnNames = strColumnNames + ", "+ aColumns[i];
}
strColumnNames = strColumnNames.substring(1);

String sQuery = "SELECT "
+ strColumnNames
+ " FROM " + sTable
+ " "
+ sWhere
+ sOrder
+ sLimit;

System.out.println("sQuery="+sQuery);

Statement s = conn.createStatement();
s.executeQuery(sQuery);

/* Data set length after filtering */
ResultSet rs = s.getResultSet();
int count = 0;
while (rs.next()) {
String engineCol = rs.getString("engine");
System.out.println("engine = " + engineCol);
++count;
}
int iFilteredTotal = count;
rs.close();
s.close();
System.out.println("Selected count="+iFilteredTotal);

/* Total data set length */
s = conn.createStatement();
String sQuery2 = " SELECT COUNT(*) AS rowcount FROM " + sTable;
rs = s.executeQuery(sQuery2);
rs.next();
int iTotal = rs.getInt("rowcount");
rs.close();
s.close();
System.out.println("Total count="+iTotal);

/*
* Output
*/
String output = "{" +
"\"sEcho\" : "+ request.getParameter("sEcho")+ ", " +
"\"iTotalRecords\" : " + String.valueOf(iTotal) + ", " +
"\"iTotalDisplayRecords\" : " + String.valueOf(iFilteredTotal) + ", " +
// "\"iDisplayLength\" : " + "10" + ", " +
// "\"iDisplayStart\" : " + "10" + ", " +
"\"aaData\" : [" + "";

Object[][] aaData= new Object[iFilteredTotal][5];

s = conn.createStatement();
s.executeQuery(sQuery);
rs = s.getResultSet();

int rowNum=0;
while ( rs.next() )
{
System.out.println("rowNum="+ rowNum);
//if (rowNum > 3) break;
Object[] aRow = {"","","",0,""};
Object[] row = {"","","",0,""};

for ( int i=0 ; i<aColumns.length ; i++ )
{
System.out.println("i="+ i +" colVal="+ rs.getString( aColumns[i]));
if ( aColumns[i] == "version" )
{
/* Special output formatting for 'version' column */
row[i] = (rs.getInt( aColumns[i] )==0) ? "-" : rs.getInt(aColumns[i]);
}
else if ( aColumns[i] != " " )
{
/* General output */
row[i] = rs.getString( aColumns[i]);
}
}
aaData[rowNum] = row;
System.out.println("rowNum("+rowNum +") row[0]="+row[0].toString());
rowNum++;
}
rs.close();
s.close();

String valRow = " [ ";
for (int rowN = 0; rowN < iFilteredTotal; rowN++) {
System.out.println("rowN="+rowN);
for (int colN = 0; colN < aColumns.length; colN++) {
System.out.println(" colN="+colN);
if (aColumns[colN] == "version" )
valRow = valRow + " " + aaData[rowN][colN].toString() + " , ";
else if ( aColumns[colN] != " " )
valRow = valRow + "\"" + aaData[rowN][colN].toString() + "\" , ";
}
valRow = valRow.substring(0, valRow.length()-2);
valRow = valRow + " ], ";
System.out.println("valRow="+valRow);
output = output + valRow;
valRow = " [ ";
}
System.out.println("output="+output);
output = output.substring(0, output.length()-2);
output = output + " ] }";

out.print(output);
%>

JQ server-processing with AJAX calls using JSP

2011-02-15T00:38:00.000-08:00

This is the JAVA-JSP version of "DataTables server-side processing example" of official JQuery website. I have converted the 'server_processing.php' to 'server_processing.jsp'.

Please note that the original example lacks the

"sPaginationType": "two_button", (or "sPaginationType": "full_numbers")

My JSP version lacks it too... This is basicly an example for AJAX and server-side processing not pagination. I will be providing an example which uses pagination and AJAX calls for server-side processing in a couple of days or weeks.

Here is the full complete working code:

serverSideJQdtARS.jsp
---------------------

<!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" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[0, 'desc'], [1, 'desc']],

"sAjaxSource": "./server_processing.jsp"
} );
} );

</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
</div>
<H1>Live example</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Rendering engine</TH>
<TH width="25%">Browser</TH>
<TH width="25%">Platform(s)</TH>
<TH width="15%">Engine version</TH>
<TH width="15%">CSS grade</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TH>Rendering engine</TH>
<TH>Browser</TH>
<TH>Platform(s)</TH>
<TH>Engine version</TH>
<TH>CSS grade</TH>
</TR>
</TFOOT>
</TABLE>
</DIV>
</div>
</body>
</html>

server_processing.jsp
---------------------

<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>

<%@page import="java.sql.Connection"%>
<%@page import="atg.taglib.json.util.*"%>
<%@page import= "java.util.*"%>
<%@page import= "java.sql.*"%>
<%@page import= "org.apache.commons.lang.*"%>

<%
class Utilities {

Utilities() {
}

;

String escape_string(String input) {
return StringEscapeUtils.escapeHtml(input);
}
}
%>

<%
System.out.println("test arsssssssssssssssssssssss");
Utilities util = new Utilities();
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
String[] aColumns = {"engine", "browser", "platform", "version", "grade"};

/* Indexed column (used for fast and accurate table cardinality) */
String sIndexColumn = "id";

/* DB table to use */
String sTable = "ajax";
/* Database connection information */
String user = "root";
String password = "3391309";
String db = "jquerydb";
String server = "localhost";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* MySQL connection
*/

Connection conn = null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost/" + db,
user, password);

if (!conn.isClosed()) {
System.out.println("Successfully connected to "
+ "MySQL server using TCP/IP...");
}

} catch (Exception e) {
System.err.println("Exception: " + e.getMessage());
} finally {
// try {
// if (conn != null) {
// //conn.close();
// }
// } catch (SQLException e) {
// }
}

/*
* Paging
*/
String sLimit = "";
if (request.getParameter("iDisplayStart") != null
&& request.getParameter("iDisplayLength") != "-1") {
sLimit = "LIMIT " + util.escape_string(request.getParameter("iDisplayStart")) +
", " + util.escape_string(request.getParameter("iDisplayLength"));
}

/*
* Ordering
*/
String sOrder = "";

if (request.getParameter("iSortCol_0") != null) {
sOrder = "ORDER BY ";

for (int i = 0; i < Integer.valueOf(request.getParameter("iSortingCols")); i++) {
if (request.getParameter("bSortable_" + Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))).equals("true")) {
sOrder += aColumns[Integer.valueOf(request.getParameter("iSortCol_" + String.valueOf(i)))] + " "
+ util.escape_string(request.getParameter("sSortDir_" + String.valueOf(i))) + ", ";
}
}

sOrder = sOrder.substring(0, sOrder.length()-2);
if (sOrder.equals("ORDER BY")) {
sOrder = "";
}
sOrder += " ";
}

/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
String sWhere = "";
System.out.println("sSearch="+ request.getParameter("sSearch"));

if (request.getParameter("sSearch") != "") {
sWhere = "WHERE (";
for (int i = 0; i < aColumns.length; i++) {
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch")) + "%' OR ";
}
sWhere = sWhere.substring(0, sWhere.length()-3);
sWhere += ')';
}

/* Individual column filtering */

for (int i = 0; i < aColumns.length; i++) {
if (request.getParameter("bSearchable_" + String.valueOf(i)) == "true"
&& request.getParameter("sSearch_" + String.valueOf(i)) != "") {
if (sWhere == "") {
sWhere = "WHERE ";
} else {
sWhere += " AND ";
}
sWhere += aColumns[i] + " LIKE '%" + util.escape_string(request.getParameter("sSearch_" + String.valueOf(i))) + "%' ";
}
}

/*
* SQL queries
* Get data to display
*/
String strColumnNames = "";

for (int i=0;i < aColumns.length;i++){
strColumnNames = strColumnNames + ", "+ aColumns[i];
}
strColumnNames = strColumnNames.substring(1);

String sQuery = "SELECT "
+ strColumnNames
+ " FROM " + sTable
+ " "
+ sWhere
+ sOrder
+ sLimit;

System.out.println("sQuery="+sQuery);

Statement s = conn.createStatement();
s.executeQuery(sQuery);

/* Data set length after filtering */
ResultSet rs = s.getResultSet();
int count = 0;
while (rs.next()) {
String engineCol = rs.getString("engine");
System.out.println("engine = " + engineCol);
++count;
}
int iFilteredTotal = count;
rs.close();
s.close();
System.out.println("Selected count="+iFilteredTotal);

/* Total data set length */
s = conn.createStatement();
String sQuery2 = " SELECT COUNT(*) AS rowcount FROM " + sTable;
rs = s.executeQuery(sQuery2);
rs.next();
int iTotal = rs.getInt("rowcount");
rs.close();
s.close();
System.out.println("Total count="+iTotal);

/*
* Output
*/
String output = "{" +
"\"sEcho\" : "+ request.getParameter("sEcho")+ ", " +
"\"iTotalRecords\" : " + Integer.valueOf(iTotal) + ", " +
"\"iTotalDisplayRecords\" : " + iFilteredTotal + ", " +
"\"aaData\" : [" + "";

Object[][] aaData= new Object[iFilteredTotal][5];

s = conn.createStatement();
s.executeQuery(sQuery);
rs = s.getResultSet();

int rowNum=0;
while ( rs.next() )
{
System.out.println("rowNum="+ rowNum);
//if (rowNum > 3) break;
Object[] aRow = {"","","",0,""};
Object[] row = {"","","",0,""};

for ( int i=0 ; i<aColumns.length ; i++ )
{
System.out.println("i="+ i +" colVal="+ rs.getString( aColumns[i]));
if ( aColumns[i] == "version" )
{
/* Special output formatting for 'version' column */
row[i] = (rs.getInt( aColumns[i] )==0) ? "-" : rs.getInt(aColumns[i]);
}
else if ( aColumns[i] != " " )
{
/* General output */
row[i] = rs.getString( aColumns[i]);
}
}
aaData[rowNum] = row;
System.out.println("rowNum("+rowNum +") row[0]="+row[0].toString());
rowNum++;
}
rs.close();
s.close();

String valRow = " [ ";
for (int rowN = 0; rowN < iFilteredTotal; rowN++) {
System.out.println("rowN="+rowN);
for (int colN = 0; colN < aColumns.length; colN++) {
System.out.println(" colN="+colN);
if (aColumns[colN] == "version" )
valRow = valRow + " " + aaData[rowN][colN].toString() + " , ";
else if ( aColumns[colN] != " " )
valRow = valRow + "\"" + aaData[rowN][colN].toString() + "\" , ";
}
valRow = valRow.substring(0, valRow.length()-2);
valRow = valRow + " ], ";
System.out.println("valRow="+valRow);
output = output + valRow;
valRow = " [ ";
}
System.out.println("output="+output);
output = output.substring(0, output.length()-2);
output = output + " ] }";

out.print(output);
%>

MySQL definitions and insert commands
-------------------------------------

CREATE TABLE `ajax` (
`engine` varchar(20) NOT NULL DEFAULT '',
`browser` varchar(35) DEFAULT NULL,
`platform` varchar(20) DEFAULT NULL,
`version` int(11) DEFAULT NULL,
`grade` varchar(1) DEFAULT NULL,
PRIMARY KEY (`engine`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `ajax` (`engine`, `browser`, `platform`, `version`, `grade`)
VALUES ("engine1", "browser1", "platform1", 1, "A");
INSERT INTO `ajax` (`engine`, `browser`, `platform`, `version`, `grade`)
VALUES ("engine2", "browser1", "platform1", 1, "A");
INSERT INTO `ajax` (`engine`, `browser`, `platform`, `version`, `grade`)
VALUES ("engine3", "browser1", "platform1", 1, "A");
...

JQuery server processing with JSP-JAVA

2011-02-07T10:55:00.000-08:00

This is a small and simple tutorial which shows how you
can populate a JQuery table via AJAX and using JAVA-JSP.
There will be four steps to achieve this.

1- Calling the JSP. This is the first JSP where you will make
the AJAX call to the JSP on the server. This is also where
the results of the AJAX call will be displayed in a data table
with the id "example." Please note the references to the
jquery javascript files and style css files.

Originally this example belongs to the official JQuery site
but it works with a php server there.

serverSideJQdtARS.jsp
---------------------
<!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" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processingARS3.jsp"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
</div>
<H1>Live example</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Rendering engine</TH>
<TH width="25%">Browser</TH>
<TH width="25%">Platform(s)</TH>
<TH width="15%">Engine version</TH>
<TH width="15%">CSS grade</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
</body>
</html>

The JSP file on the server is below. The purpose here is only if it has been called.
You may check the print out at the server log. So it works at least.

server_processingARS.jsp
------------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="java.util.Vector"%>
<%

System.out.println( "test arsssssssssssssssssssssss" );
%>

Of course it will give some error like:
"Data Tables warning: JSON data from server could not be parsed.
This is caused by a JSON formatting error."

2- Next, I tried to create a JSON array which fits the requirements
of JQuery. I changed the JSP on the server as:

server_processingARS2.jsp
-------------------------

<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%

System.out.println("test arsssssssssssssssssssssss");

CDL cdl = new CDL();
JSONArray jsonarray = new JSONArray();

try {
JSONObject jsObj = new JSONObject();
jsObj = jsObj.put("sEcho", 1);
jsonarray.add(jsObj);

jsObj = new JSONObject();
jsObj = jsObj.put("iTotalRecords", 1);
jsonarray.add(jsObj);

jsObj = new JSONObject();
jsObj = jsObj.put("iTotalDisplayRecords", 1);
jsonarray.add(jsObj);

JSONObject jsObjEngine = new JSONObject();
jsObjEngine = jsObjEngine.put("Engine","Trident");
JSONObject jsObjBrowser = new JSONObject();
jsObjBrowser = jsObjBrowser.put("Browser", "Internet Explorer 4.0");
JSONObject jsObjPlatform = new JSONObject();
jsObjPlatform = jsObjPlatform.put("Platform", "Win 95+");
JSONObject jsObjVersion = new JSONObject();
jsObjVersion = jsObjVersion.put("Version", "4");
JSONObject jsObjGrade = new JSONObject();
jsObjGrade = jsObjGrade.put("Grade", "X");

JSONArray jsArraaData = new JSONArray();
jsArraaData.add(jsObjEngine );
jsArraaData.add(jsObjBrowser );
jsArraaData.add(jsObjPlatform );
jsArraaData.add(jsObjVersion );
jsArraaData.add(jsObjGrade );

JSONObject jsObjaaData = new JSONObject();
jsObjaaData = jsObjaaData.put("aaData", jsArraaData);

jsonarray.add(jsObjaaData);
out.print(jsonarray);

//String y = jsonarray.toString();
//System.out.println(y);

} catch (JSONException je) {
System.out.println(je.toString());
}

%>

I played around but I could not pass over this hurdle:
"aaData.length is null or not an object"

3- I looked around and found a small note from ALLAN on the
JQuery official board. It said you can have a look at
.../datatables/examples/example_support/json_sources2.txt

I tried his suggestion with the below code:

server_processing3.jsp
----------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%
System.out.println("test arsssssssssssssssssssssss");
try {
String x =
"{ \"aaData\": ["+
" [ \"ALLAN\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],"+
" [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ]"+
"] }";

out.print(x);
}
catch (Error e){System.out.println("errorrrrrrr");}
%>

It worked.

4- Now the problem was to produce the same JSON code programmatically,
using the lib ofJSON.org. The solution is:

server_processing4.jsp
----------------------

<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%

System.out.println("test arsssssssssssssssssssssss");
try {
String x =
"{ \"aaData\": ["+
" [ \"ALLAN\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],"+
" [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ]"+
"] }";
//out.print(x);
//out.print("<br />");
JSONArray jsaaData = new JSONArray();

Object a[] = {"ALLAN", "Internet Explorer 4.0", "Win 95+",(int) 4, "X"};
JSONArray jsaaData1 = new JSONArray(a);
Object b[] = {"Trident", "Internet Explorer 5.0", "Win 95+",(int) 5, "C"};
JSONArray jsaaData2 = new JSONArray(b);

jsaaData.add(jsaaData1);
jsaaData.add(jsaaData2);

JSONObject jsObj = new JSONObject();
jsObj = jsObj.put("aaData", jsaaData);

String y = jsObj.toString();
out.print(y);
} catch (JSONException je) {
System.out.println(je.toString());
}
%>

I tried to keep JQuery and ALLAN's references alive but if any
offense I will happily correct any discrepancies.

Kind regards.