Sunday, 27 February 2011

Multi Actions with JQuery - 2

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 />");
}
}