Skip navigation

Tag Archives: Ajax

So you want your page to have an ajax paging for your comments page or tabular data. Ajax paging means that every time you select a page (from page navigator) it will not reload or refresh the whole web page, instead it is only change the comments or tabular data area.

This article is only one from many techniques to accomplish this, we are going to make ajax paging using Java (Hibernate + Spring MVC) and JQuery.

The way for getting data for the selected page is actually simple, for example if selected page is 2 and page size is 10 you can make SQL query like:
MYSQL


select * from app_user limit 10,10;

Notes: In Mysql,  zero (0) is first index. The query will get records 11-20 from table “app_user

ORACLE


select * from (SELECT rbt_config.*, ROWNUM r FROM rbt_config) where r between 11 and 20;

Fortunately we are going to use Hibernate and dont have to create specific query for each databases.
Just use code like below and Hibernate will take care how he will make queries for the database we choose.

HIBERNATE

protected List listByPage(Class clazz, int firstResult, int maxResult) {
        String strQry = "from " + clazz.getName() + " c order by c.id desc";

        Query query = this.sessionFactory.getCurrentSession().createQuery(strQry);
        query.setFirstResult(10);
        query.setMaxResults(10);

        return query.list();
    }

After you get the data you simply display it on the page, that’s it. But the tricky part from paging is how do you want the page navigator to look like, there are page navigator with first and last page link/button, there are page navigator with previous and next page link/button, also page navigator with sequences of numbers link to select a page, etc.
It’s up to you how the page navigator will look like, for these example just see it by your self 🙂 .

I don’t put much code here, so just download the code and see it. Here is some of the screenshots:

Home

Comments Page 1

Comments Page 2

Tabular Data 1

Tabular Data 2

There are two examples I provide:  Comments page look a like and tabular data sample.
Every time we select a page from page navigator it will make ajax request to server (using JQuery) and replace/change the comments or tabular data area with new result without reload whole area. Also during make ajax request to server it will display loading ajax image.

Loading Ajax Image

You can download the code from here or here. It’s Java project using Maven, i’m usually open it using IntelliJ IDEA. To set up the data just run “com.ajax.paging.dao.SetUpData” from “src/test” folder, using IntelliJ IDEA  I just right click the file –> RUN, It will save arround 20 records to table “COMMENT” and “USER” for testing ajax paging.

Dont forget to edit “src/resources/hibernate.properties” to match your environtment.
In the “src/resources/app.properties” there two important keys:
app.page.size.default –> change the page size
If “app.page.size.default=6” it will display 6 records every page, and so on.

app.page.nav.trail –> change the page navigator trail
If “app.page.nav.trail=2” and selected page is 3 page navigator will look like 1 2 [3] 4 5 (two previous page and two next page) and so on.

Please build, package, and run in your favourite web server / servlet container. Download from here and here.

Ajax is revolusioner method in building web application, it’s used javascript XMLHttpRequest object to communicate with server without have to reloading the page.

I am new to Ajax, this is my “hello world” application to show how using Ajax with Java.

(ajaxHello.jsp)

<html>
<head>
    <title>Hello Ajax</title>
</head>
<body>
    <script type="text/javascript">
        function ajaxFunction()
        {
        var xmlHttp;

        try
          {
          // Firefox, Opera 8.0+, Safari
          xmlHttp=new XMLHttpRequest();
          }
        catch (e)
          {
          // Internet Explorer
          try
            {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
          catch (e)
            {
            try
              {
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            catch (e)
              {
              alert("Your browser does not support AJAX!");
              return false;
              }
            }
          }

          xmlHttp.onreadystatechange=function()
            {
                if(xmlHttp.readyState==4)
                {
                    //document.myForm.time.value=xmlHttp.responseText;
                    document.getElementById("timeInfo").innerHTML=xmlHttp.responseText;
                }
            }

            xmlHttp.open("GET","time.jsp",true);
            xmlHttp.send(null);
        }
    </script>
<form name="aForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" /> <br/>
Hi, you are typing the text at
<span id="timeInfo" STYLE="font-family: sans-serif; color: red; font-size: 12pt"></span>
</form>
</body>
</html>

(time.jsp)

<%= new java.text.SimpleDateFormat("dd MMM yyyy, hh:mm:ss").format( new java.util.Date() ) %>

This is the source, rename it to AjaxWithJavaHello.war and plug into your web server.