Monday 28 February 2011

Simple CRUD with JQuery-2

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


});
Posted by at