I was in a trouble for 2 days, How I can ajaxify the display table pagination,
I used Struts2 framework, after looking around and using other codes, and integrate it together, I do this, it works.
1: add this javascript code, and edit the ["insert your form name here"] where you find it with the form name you have
<script language="JavaScript" type="text/JavaScript">
var formToUpdate;
function ajaxifyDisplayTag(targetId) {
stopEvent(event);
if(typeof(event.target.href)!= "undefined"){
formToUpdate=targetId;
var url = event.target.href;
showReport(url);
}
}
//This function will prevent the reloading
//it will kill the event fired by selecting the anchor in the pagination
function stopEvent(e) {
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
var xmlHttp;
function showReport(url)/*Passing two param, one is any user input you need, next one is page number.When you call the function in jsp page(calling page), just
pass 0 for the second argument.This is how i designed this code.*/
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
//alert("Your browser does not support AJAX!");
return;
}
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
var results = xmlHttp.responseText;
if(results!=0)
{
//Displaying results in a DIV tag...You may also use SPAN to display the results.
//alert('Displaying results in a DIV tag');
document.getElementById("insert your form name here").innerHTML=xmlHttp.responseText;
}
else
{
//alert('else Displaying results in a DIV tag');
document.getElementById("insert your form name here").innerHTML="No records in the database";
}
}
}
//Normal code for Browser detection
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
2:in the jsp page, define this div around display:table tag
<div id="ajaxifyDiv" onclick="ajaxifyDisplayTag(ajaxifyDiv)">
----------------------------
IE make some problems with this code, it works well with chrome, to solve the problem , replace the following code:
if (typeof event.srcElement === 'undefined') {
target = event.target;
} else {
target =event.srcElement;
}
var nodeName= target.nodeName;
function stopEvent(e) {
//alert("Yes Yes stopEvent");
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
