Pages Navigation Menu

Coding is much easier than you think

Pagination in Struts 2 using jQuery jTable plugin

Posted by on Oct 6, 2014 in Ajax, jQuery, Struts-2 | 1 comment

 
jtable_pagination in struts2
 
This is the third article on jQuery jTable plugin in Struts 2 that describes on how to implement pagination feature to do server side paging in struts 2 using the JQuery jTable plugin and here I have not explained about how to setup jTable plugin in struts 2. So If you have not read my previous articles “Setting up JQuery jTable plugin in Struts 2” and “Ajax based curd operation in Struts 2 using JQuery jTables plugin”, I will recommend that you read that article first because first one explains how you can integrate the JTable plugin in Struts 2 application and second article explains on how to implement ajax based curd operation. This article will assume that the code for the integration of the jQuery JTable plugin is implemented, and only the code required for implementing pagination in Struts 2 using jTable is explained here.
 

Setup

 
As described above, the prerequisite for this code is that you integrate the jQuery jTable plugin into the Struts 2. You can find detailed instructions here, at JQuery jTable plugin in Struts 2, so now I am going to take the sample application I created for explaining AJAX based crud operations in jTable plugin and continue to implement paging for that application.
 
1. Download sample application from here and import the project in eclipse
2. Follow the steps in this article here to create table in database.
 

Steps to enable Paging:

 

From the browser perspective: jTable

 
To enable paging, paging option must set to true. You can also set pageSize option (default value is 10) in jQuery Script code.
 

$('#StudentTableContainer').jtable({
    //...
    paging: true, //Set paging enabled
    pageSize: 3, //Set page size
    actions: {
        //...
    },
    fields: {
        //...
    }
});

 
Note: pageSize sets the initial number of records to be displayed per page.
 

Modified Jsp page

 




jTable Pagination in Java Web Applications














jTable Pagination in Java Web Applications

 

From the server’s perspective: Servlet

 
If paging is enabled, jTable sends two query string parameters to the server on listAction AJAX call:
jtStartIndex: Start index of records for current page.
jtPageSize: Count of maximum expected records.
And it expects additional information from server:
TotalRecordCount: Total count of records.
 
In our previous example the url specified in the ‘listAction‘ option has business logic to fetch all records from database. Now in order to handle pagination this ‘listAction’ option should fetch only a part of records for each page, So handle this there are two changes that has to be done in the server side .
 
1. Modify oracle query to fetch only a subset of records based on the jtStartIndex and jtPageSize.

Since these values are sent along with the request as string parameters by jTable so add following member variable in struts 2 action class and create getters and setters for the same

// Holds Start Page Index
private int jtStartIndex;
// Hold records to be displayed per Page 
private int jtPageSize;	

 
2. As mentioned above, jTable need TotalRecordCount to be present in the json response, For which add a member variable totalRecordCount in struts 2 action class and create getters and setters for the same.
 
Now replace the list method in action class with the below code,
 

public String list() {
try {
	// Fetch Data from Student Table
	records = dao.getAllStudents(jtStartIndex, jtPageSize);
	// Get Total Record Count for Pagination
	totalRecordCount = dao.getStudentCount();
	result = "OK";
} catch (Exception e) {
	result = "ERROR";
	message = e.getMessage();
}
return Action.SUCCESS;
}

 

Changes made at Dao class

 
Add below two methods in ‘CrudDao.java’ file

1. Method to get the count of total number of records in the result set.
 

public int getStudentCount()
{
int count=0;
try 
{
	Statement stmt = dbConnection.createStatement();
	ResultSet rs = stmt.executeQuery("SELECT COUNT(*) AS COUNT FROM STUDENT");		
	while (rs.next()) 
	{
		count=rs.getInt("COUNT");
	}
} 
catch (SQLException e) 
{
	System.err.println(e.getMessage());
}
return count;
}

 
2. In order to return only a subset of records according to the page offset (jtStartIndex and jtPageSize), oracle query should be modified as follows,

In case of Oracle database:
“SELECT * from (Select M.*, Rownum R from STUDENT M) where r > ” + < jtStartIndex> +” and r <= "+< jtStartIndex + jtPageSize >;
 
In case of MySql database:

select * from STUDENT limit ,

 

Now modify getAllUsers in CurdDao.java using below code
 

public List getAllStudents(int startPageIndex, int recordsPerPage) {
List students = new ArrayList();
int range = startPageIndex+recordsPerPage;
String query="SELECT * from (Select M.*, Rownum R From STUDENT M) where r > " + startPageIndex +" and r <= "+range;
try 
{
	Statement stmt = dbConnection.createStatement();
	ResultSet rs = stmt.executeQuery(query);
	while (rs.next())
	{
		Student student = new Student();
		student.setStudentId(rs.getInt("STUDENTID"));
		student.setName(rs.getString("NAME"));
		student.setDepartment(rs.getString("DEPARTMENT"));
		student.setEmailId(rs.getString("EMAIL"));
		students.add(student);
	}
} 
catch (SQLException e) 
{
	System.err.println(e.getMessage());
}
return students;
}

 
This function returns only a subset of records according to the page offset (jtStartIndex and jtPageSize).
 
Now on running the application, with the above changes, the final demo looks as shown below:
 
Pagination-Cover
 
download
 

Reference

 
jTable official website
AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in
 

Read More

AJAX implementation in Struts 2 using JQuery and JSON

Posted by on Oct 5, 2014 in Ajax, jQuery, Struts-2 | 54 comments

 
Dynamic Dependent Select Box using Jquery in struts2
 
In this post, we will learn to implement AJAX calls from a JSP page to a Struts 2 Action class using JQuery and update the same JSP page back with the Json response from the Struts 2.
 

Library required

 
Since the response to be sent to jQuery is of type JSON, to handle it you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute which has getter and setter into a JSON object.
 

Steps done to set up our action for JSON

 
From the browser perspective: jQuery

jQuery allows you to issue an ajax request and expects a JSON object as a response.
 

Jsp Page

 
Now, let us create a JSP page with two drop down lists, one contains values for countries and the other that is going to be populated with values for states based on the value selected in the first drop down list. This is done without a page refresh, by making AJAX calls to the Struts 2 action on first drop down list change event.
 
Recommended reading :

 

<%@ taglib prefix="s" uri="/struts-tags"%>


AJAX in Struts 2 using JSON and jQuery




   

AJAX calls to Struts 2 using JSON and jQuery





 
Note that I have referenced jQuery files in the head section of the jsp which is responsible for the AJAX call made to the struts 2 action and for displaying the response back in the JSP.
 
Whenever the value is selected in the “country” drop down list, its change event is fired and the ‘getJSON’ function executes ajaxAction (first argument of ‘getJSON’) configured in struts.xml. I have explained about the parameters of ‘getJSON’ method in the article here.
 
From the server’s perspective: Struts 2
 
In action class you need to create instance variables and its respective getter and setter methods. Here all the variables that have a setter can be set to the values received as parameters from jQuery and all the variables that have a getter method can be retrieved in the client javascript code.
 
Also read :

Action class

 

package com.action;

import java.util.LinkedHashMap;
import java.util.Map;

import com.opensymphony.xwork2.Action;

public class AjaxJsonAction implements Action{

private Map stateMap = new LinkedHashMap();
private String dummyMsg;
//Parameter from Jquery
private String countryName;

public String execute() {
	if (countryName.equals("India")) {
		stateMap.put("1", "Kerala");
		stateMap.put("2", "Tamil Nadu");
		stateMap.put("3", "Jammu Kashmir");
		stateMap.put("4", "Assam");
	} else if (countryName.equals("US")) {
		stateMap.put("1", "Georgia");
		stateMap.put("2", "Utah");
		stateMap.put("3", "Texas");
		stateMap.put("4", "New Jersey");
	} else if (countryName.equals("Select Country")) {
		stateMap.put("1", "Select State");
	}
	dummyMsg = "Ajax action Triggered";
	return SUCCESS;
}

public Map getStateMap() {
	return stateMap;
}

public String getDummyMsg() {
	return dummyMsg;
}

public String getCountryName() {
	return countryName;
}

public void setStateMap(Map stateMap) {
	this.stateMap = stateMap;
}

public void setDummyMsg(String dummyMsg) {
	this.dummyMsg = dummyMsg;
}

public void setCountryName(String countryName) {
	this.countryName = countryName;
}
}

 
In the above code, we create a maps and populates its value based on the country parameter passed to the action class by the AJAX call made by the JQuery’s getJSON() method.
 

struts.xml

 
Since the response needed by jQuery is of type json, so we need to convert this map objects to json strings, for this you need to configure this Action class in struts.xml such that it returns a json object. This configuration is as follows:

Create a package in struts.xml file, which extend json-default and specify the result type of your action class inside this package to be json. The json-default package contains an interceptor and the result type configuration for JSON requests and responses.



   
   
	true
	true
   
   


 
Note: json-default package extends struts-default

Please read the Struts 2 JSON plugin documentation for more details.

 

Web.xml

 

Struts2

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


  struts2
  /*


  index.jsp


 
Recommended Article :

  • How to Call Struts2 action from java script
  •  

    Demo

     
    On selecting ‘India’ in the first dropdown list
     
    Struts2_ajax_json_jquery
     
    On selecting ‘US’ in the first dropdown list
     
    Struts2_ajax_json_jquery _2
     
    download

    Read More

    Pagination in Servlet and JSP using jQuery jTable plugin

    Posted by on Sep 30, 2014 in Ajax, J2EE, jQuery, jTable, Servlet | 8 comments

     
    pagination in j2ee
     
    This is the 3rd article on jQuery jTable plugin that describes on how to implement pagination feature to do server side paging and here I have not explained about how to setup jTable plugin in java web application. So If you have not read my previous articles “Setting up JQuery jTable plugin in Java web application” and “Ajax based curd operation in Java web application using JQuery jTables plugin”, I will recommend that you read that article first because first one explains how you can integrate the JTable plugin in Java web application and in second article explains on how to implement ajax based curd operation. This article will assume that the code for the integration of jQuery JTable plugin is implemented, and only the code required for implementing pagination in Java web application using jTable will be explained here.
     

    Setup

     
    Now download the sample application of my previous tutorial and import the project in eclipse. Now follow the steps in previous tutorial to create table in database and make sure you have atleast 5 records in the table.
     
    Now on running this application, you will see a table displaying records without pagination such as the one shown below.
     
    Integrating-jQuery-jTable-plugin-with-Struts2-framework
    Now the following steps are needed to be followed to enable paging feature in jTable
     

    Changes from the browser perspective: jTable

     
    To enable paging, paging option must set to true. You can also set pageSize option (default value is 10) in jQuery Script code.

    $('#StudentTableContainer').jtable({
        //...
        paging: true, //Set paging enabled
        pageSize: 3, //Set page size
        actions: {
            //...
        },
        fields: {
            //...
        }
    });
    

     
    Note: pageSize sets the initial number of records to be displayed per page.
     
    Modified Jsp page is shown below
     

    
    
    
    Pagination in Java Web Applications using jTable plugin
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    Pagination in Java Web Applications jTable

     

    Changes from the server’s perspective: Servlet

     
    If paging is enabled in jsp then jTable sends two query string parameters to the server on listAction AJAX call:
    jtStartIndex: Start index of records for current page.
    jtPageSize: Count of maximum expected records.

    And it expects additional information from server:
    TotalRecordCount: Total count of records.
     
    In our previous example the url specified in the ‘listAction‘ option has business logic to fetch all records from database. Now in order to handle pagination this ‘listAction’ option should return only the part of resultset for each page, So handle this there are two changes that has to be done in the server side .
     
    1. In order to return only a subset of records according to the page offset (jtStartIndex and jtPageSize), sql query used in CRUDDao should be modified with query below,
    In case of Oracle database:
    “SELECT * from (Select M.*, Rownum R from STUDENT M) where r > ” + < jtStartIndex> +” and r <= "+< jtStartIndex + jtPageSize >;
     
    In case of MySql database:

    select * from STUDENT limit ,
    

     
    Changes made in CRUDDao at getAllStudents function
     

    public List getAllStudents(int startPageIndex, int recordsPerPage) 
    {
    	List students = new ArrayList();
    	int range = startPageIndex+recordsPerPage;
    	String query="SELECT * from 
            (Select M.*, Rownum R From STUDENT M) where 
            r > " + startPageIndex +" and r <= "+range;
    	System.out.println(query);
    	try 
    	{
    		Statement stmt = dbConnection.createStatement();
    		ResultSet rs = stmt.executeQuery(query);
    		while (rs.next())
    		{
    			Student student = new Student();
    
    			student.setStudentId(rs.getInt("STUDENTID"));
    			student.setName(rs.getString("NAME"));
    			student.setDepartment(rs.getString("DEPARTMENT"));
    			student.setEmailId(rs.getString("EMAIL"));
    			students.add(student);
    		}
    	} 
    	catch (SQLException e) 
    	{
    		System.err.println(e.getMessage());
    	}
    	return students;
    }
    

     
    2. As mentioned above, jTable need TotalRecordCount to be present in the json response, For which add the following function in CRUDDao which returns total Record Count value present in database.
     

    public int getStudentCount()
    {
    	int count=0;
    	try 
    	{
    	   Statement stmt = dbConnection.createStatement();
    	   ResultSet rs = stmt.executeQuery("SELECT COUNT(*) AS COUNT FROM STUDENT");
    	   while (rs.next()) 
    	   {
    	 	count=rs.getInt("COUNT");
    	   }
    	} 
    	catch (SQLException e) 
    	{
    		System.err.println(e.getMessage());
    	}
    	return count;
    }
    

     

    Changes made in Controller

     
    The following changes where made in the logic inside the if loop -> 'if(action.equals("list"))'

    HashMap JSONROOT = new HashMap();
    
    if (action.equals("list")) {
    	try {				
    	// Fetch Data from User Table
    	int startPageIndex = Integer.parseInt(request.getParameter("jtStartIndex"));
    	int recordsPerPage = Integer.parseInt(request.getParameter("jtPageSize"));
    
    	// Fetch Data from Student Table
    	studentList = dao.getAllStudents(startPageIndex, recordsPerPage);
    	// Get Total Record Count for Pagination
    	int userCount = dao.getStudentCount();
    
    	// Return in the format required by jTable plugin
    	JSONROOT.put("Result", "OK");
    	JSONROOT.put("Records", studentList);
    	JSONROOT.put("TotalRecordCount", userCount);
    
    	// Convert Java Object to Json
    	String jsonArray = gson.toJson(JSONROOT);
    
    	response.getWriter().print(jsonArray);
    	} catch (Exception ex) {
    		JSONROOT.put("Result", "ERROR");
    		JSONROOT.put("Message", ex.getMessage());
    		String error = gson.toJson(JSONROOT);
    		response.getWriter().print(error);
    	}
    }
    

     
    Now on running the application, with the above changes, the final demo looks as shown below:
     
    Pagination-Cover
     
    download
     

    Reference

    jTable official website
    AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in
    Wikipedia : JSON
     

    Read More

    jQuery form validation using jQuery Validation plugin

    Posted by on Sep 29, 2014 in Ajax, jQuery | 2 comments

     
    Jquery
     
    This article discusses client-side validation using jQuery’s validation plugin. This jQuery plugin has a bunch of standard validation methods such as a required field, valid email or URL, minimum and maximum lengths for a field, etc. In addition to that you can customize the look and feel of the error messages and their placement.
     

    Library required

    Let us start with a simple example.
     

    Jsp

     

    
    
    
    
    
    
    
    jQuery form Validation tutorial
    
    
    

     

    Points to be noted

    • Remember to include the the jQuery library and the validation plugin in the head section of JSP.
    • Remember to assign the id attribute of the form and the name attribute of all the fields that you want to validate.

    Fire the jQuery Validation Plugin (userValidation.js File)

     

    $(function() {
       $("#form").validate({
    	rules : {
    		name : {
    			required : true,
    			minlength : 4,
    			maxlength : 20,
    		}
    	},
    	messages : {
    		name : {
    			required : "Please enter a name",
    			minlength : $.format("Minimum {0} characters required!"),
    			maxlength : $.format("Maximum {0} characters allowed!")
    		}
    	}
      });
    });
    

     
    All we are doing here is initializing the validation of the form using the validate() function. It can take several parameters. In the example above, we use only two of them, but you can find a list of all the options for the validate() function at Validate options.
     
    The two parameters we used in validate method are:
     
    rules: allows you to specify which fields you want to validate.
    messages: allows you to specify the error message for a particular field. If you don’t specify it, a default message is provided that says “this field is required”.
     
    In the example above, we only used three validation methods (required, minlength and maxlength). I’ve also introduced the format method in the message. This lets us replace the argument given for minlength and maxlength, such that we don’t need to hard-code that value if they ever change.
     
    There are several other methods that can be used here. You can find list of built-in validation methods at Validation Methods.
     

    Custom Validation Rules:

     
    Suppose if you cant find any suitable built-in method for certain situation, then you can write your own validation methods. For example, there is no built-in method to validate Alpha character, we need to define our own method.
     

    $(function() {
    	$("#form").validate({
    		rules : {
    			name : {
    				customvalidation : true
    			}
    		}
    	});
    	$.validator.addMethod("customvalidation", function(value, element) {
    		return /^[A-Za-z\_ -]+$/.test(value);
    	}, "Alpha Characters Only.");
    });
    

     
    Here I have defined our own validation method by calling the jQuery.validator.addMethod() method. This method takes three parameters:

    • name: The name of the method, used to identify and referencing it, must be a valid javascript identifier.
    • method: the actual method implementation, returning true if an element is valid.
    • message: The default message to display for this method.

     
    You may also like …

     

    jQuery Validation CSS

     
    Note: the jQuery Validation Plugin adds class error to the inputs/labels. You only style them!
     

    #form label.error {
    	color: red;
    }
    #form input.error {
    	border: 1px solid red;
    }
    

     

    Caution:

     
    This validation happens only on the client side. So if there is a JavaScript error, the browser could ignore the remaining validation and submit the form to the server. So it would be better to validate the data again on the server side.
     

    Demo

     
    jquery Validation demo
     
    download

    Read More

    Autocomplete in Struts 2 using Jquery

    Posted by on Sep 27, 2014 in Ajax, jQuery, Struts-2 | 9 comments

     
    I have already written a detailed post on Autocompleter Textbox & dropdown in Struts 2 using struts2-dojo-plugin.jar. In this post, I am going to describe how to implement Ajax based autocomplete in Struts 2 web application using jQuery plugin. jQuery Autcomplete is part of the jQuery UI library which allows converting a normal textbox into an autocompleter textbox by providing a data source for the autocompleter values.
     
    struts 2 autocompleter_2
     
    Here when user types a character in text box, jQuery will fire an ajax request using autocomplete plugin to Struts 2 action class, which in turn call the dao class which connects to the database and returns the required data back as an array list, this list should be returned in json format to the success function of ajax call. So to handle this you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute (which has getter and setter) into a JSON object. This guide will teach you on how to implementation AJAX in Struts 2 using JQuery and JSON
     

    Library

     
    struts2-json-plugin-2.x.x.jar
    ojdbc14.jar
    jquery-1.10.2.js
    jquery-ui.js
    jquery-ui.css
     
    Now create a dynamic web project in eclipse and add the above jars in classpath of the project and the project structure should look like shown below.
     

    Project Structure


     
    struts 2 autocompleter
     

    Jsp page

    We are done with the setup. Now create a new jsp file under WebContent folder to display the data fetched from database into autocomplete textbox. Now to implement this page with Autocompleter feature and make sure that you referred the jQuery core and jQueryUI libraries.
     

    <%@ taglib prefix="s" uri="/struts-tags"%>
    
    
    
    
    Autocomplete in Struts 2 using Jquery and JSON
    
    
    
    
    
    
    
    
    	

    Autocomplete in Struts 2 using Jquery and JSON



     

    Js file

     
    Here we get data from database via ajax and apply autocompleter
     

    $(document).ready(function() {
    	$(function() {
    		$("#search").autocomplete({
    		source : function(request, response) {
    			$.ajax({
    				url : "searchAction",
    				type : "POST",
    				data : {
    					term : request.term
    				},
    				dataType : "json",
    				success : function(jsonResponse) {
    					response(jsonResponse.list);
    				}
    			});
    			}
    		});
    	});
    });
    

    When a user types a character in text box ,jQuery will fire an ajax request to the controller, in this case controller is SearchController as mentioned in the above js file.
     
    Recommended reading :

  • AJAX implementation in Struts 2 using JQuery and JSON
  •  

    Business class

     
    Next step is to create a class that would fetch data from database.

    package com.dao;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    
    public class DataDao {
    	private Connection connection;
    
    	public DataDao() throws Exception {
    		connection = DBUtility.getConnection();
    	}
    
    	public ArrayList getFrameWork(String frameWork) {
    		ArrayList list = new ArrayList();
    		PreparedStatement ps = null;
    		String data;
    		try {
    			ps = connection
    					.prepareStatement("SELECT * FROM JAVA_FRAMEWORK  WHERE FRAMEWORK  LIKE ?");
    			ps.setString(1, frameWork + "%");
    			ResultSet rs = ps.executeQuery();
    			while (rs.next()) {
    				data = rs.getString("FRAMEWORK");
    				list.add(data);
    			}
    		} catch (Exception e) {
    			System.out.println(e.getMessage());
    		}
    		return list;
    	}
    }
    

     

    Data Access object

     
    Connecting To Database Using JDBC

    package com.dao;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    
    public class DBUtility {
    private static Connection connection = null;
    
    public static Connection getConnection() {
    	if (connection != null)
    		return connection;
    	else {
    		// database URL
    		String dbUrl = "jdbc:oracle:thin:@localhost:1521:XE";
    		try 
    		{
    		Class.forName("oracle.jdbc.driver.OracleDriver");
    		// set the url, username and password for the database
    		connection = DriverManager.getConnection(dbUrl, "system", "admin");
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return connection;
    	}
    	}
    }
    

     

    Action class

     
    Now Create the action class to handle Ajax call; in action class you need to create instance variables and its respective getter and setter methods since all the variables which have a setter can be set to the values as which are passed as parameters by jQuery and all the variables that have a getter method can be retrieved in the client javascript code.

    package com.action;
    
    import java.util.ArrayList;
    
    import com.dao.DataDao;
    import com.opensymphony.xwork2.Action;
    
    public class AutoCompleteAction implements Action {
    	// Received via Ajax request
    	private String term;
    	// Returned as responce
    	private ArrayList list;
    
    	public String execute() {
    		try {
    			System.out.println("Parameter from ajax request : - " + term);
    			DataDao dataDao = new DataDao();
    			list = dataDao.getFrameWork(term);
    		} catch (Exception e) {
    			System.err.println(e.getMessage());
    		}
    		return SUCCESS;
    	}
    
    	public ArrayList getList() {
    		return list;
    	}
    
    	public void setList(ArrayList list) {
    		this.list = list;
    	}
    
    	public String getTerm() {
    		return term;
    	}
    
    	public void setTerm(String term) {
    		this.term = term;
    	}
    }
    

     
    As mentioned in the code, the action class will call the business service class which in turn creates the necessary connection and returns the data back as an array list.
     
    Also read :

  • Gridview in Struts2 using jQuery DataTable
  • CRUD Operations in Struts 2 using jTable jQuery plugin via Ajax
  •  

    struts.xml

     
    In struts.xml, create a package that extend json-default and specify the result type of your action class inside this package to be json. This package component is present in struts2-json-plugin-2.x.x.jar

    Please read the article on AJAX implementation in Struts 2 using JQuery and JSON to understand about “json-default” package better.
     

    
    
    
      	
    		
    			
                     	   true
                	           UTF-8
     	                  true
                           
    		
    	
    	
    
    

     

    web.xml

     
    Make sure you have done mapping in web.xml file as given below,

    
       struts2
    
       org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
    
    
    
      struts2
      /*
    
    
      index.jsp
    
    

     

    Demo

     
    struts 2 autocompleter_2
     
    download
     
    If you have any other suggestion on above topic, do let me know via comments.

    Read More