Thursday 17 March 2011

Crud with JQuery Master-Detail 2

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


});