AJAX Tooltip in Java Web Application using qTip2 jQuery plugin

 
This article discusses AJAX Tooltip in Java Web Application using qTip2 jQuery plugin. This library is used for creating Asynchronous display of tool tip.
 

Library required

• jQuery Library
• qTip2
• Google gson

Project Structure

 
Now Create a dynamic web project in Eclipse with following folder structure
 

 

Set up from browser perspective: jQuery qTip2

 
Jsp form which ToolTip via ajax
 

Qtip2 Demo With Ajax Call

Student Details
	

		Mohaideen 

		Ameer 

		Badru 

		Prabhu

The JQuery code written on the head section of the jsp page is responsible for the AJAX call made to the servlet.
 
Another must read:
 
jQuery form validation using jQuery Validation plugin
jQuery Tutorial for Beginners
 

From the server’s perspective: Servlet

 
In Servlet, I’m going to use a GSON library to convert Java objects to JSON strings that will be parsed by JQuery in the JSP page and will be displayed on the web page and note that I have returned the response back to jsp based on the value of ‘id’ parameter which i pass to the servlet via jQuery’s ajax() method.
 

Servlet implementation

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.Student;
import service.StudentService;
import com.google.gson.Gson;

public class Qtip2StudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
  	    HttpServletResponse response) throws ServletException, IOException {

		String id = request.getParameter("id");
		Student student = StudentService.getStudentWithId(id);

		String json = new Gson().toJson(student);
		response.setContentType("application/json");
		response.getWriter().write(json);
	}
}

Model class

package model;

public class Student {

	private String name;
	private String mark;
	private String id;
	private String address;
	private String phoneNo;

	public String getName() {
		return name;
	}

	public String getMark() {
		return mark;
	}

	public String getId() {
		return id;
	}

	public String getAddress() {
		return address;
	}

	public String getPhoneNo() {
		return phoneNo;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setMark(String mark) {
		this.mark = mark;
	}

	public void setId(String id) {
		this.id = id;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public void setPhoneNo(String phoneNo) {
		this.phoneNo = phoneNo;
	}
}

Business class

 
This Business Service class which provides static data using model class.

package service;

import java.util.ArrayList;
import java.util.List;

import model.Student;

public class StudentService {

	public static List getStudentList() {

		List listOfStudent = new ArrayList();

		Student s1 = new Student();
		s1.setName("Mohaideen");
		s1.setMark("98");
		s1.setAddress("Chennai India");
		s1.setPhoneNo("+91- 123456789");
		s1.setId("1");
		listOfStudent.add(s1);

		Student s2 = new Student();
		s2.setName("Ameer");
		s2.setMark("90");
		s2.setAddress("Kolkatta India");
		s2.setPhoneNo("+91- 542789");
		s2.setId("2");
		listOfStudent.add(s2);

		Student s3 = new Student();
		s3.setName("Badru");
		s3.setMark("97");
		s3.setAddress("Bangalore India");
		s3.setPhoneNo("+91- 123456");
		s3.setId("3");
		listOfStudent.add(s3);

		Student s4 = new Student();
		s4.setName("Prabhu");
		s4.setMark("88");
		s4.setAddress("Vizag India");
		s4.setPhoneNo("+91- 6789012");
		s4.setId("4");
		listOfStudent.add(s4);

		return listOfStudent;

	}

	public static Student getStudentWithId(String id) {

		List listOfStudent = getStudentList();

		Student targetStudent = null;

		for (Student student : listOfStudent) {

			if (student.getId().equalsIgnoreCase(id)) {
				targetStudent = student;
				break;
			} else {
				continue;
			}
		}
		return targetStudent;
	}
}

web.xml

 
Make sure you have done servlet mapping properly in web.xml file. An example of this is given below,
 

	Qtip2Servlet
	servlet.Qtip2StudentServlet


	Qtip2Servlet
	/Qtip2Servlet


	index.jsp

Demo

 
While loading tooltip from server side, a simple loading image gets displayed as below.
 

 
Once the data is loaded from server side via ajax, that data is displayed in the browser as shown below.