Thursday, 17 March 2011

Crud with JQuery Master-Detail 6

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);
}
}
Posted by at