Ajax Components

1) Div pop-up relative to link.
divId - Id for the Div to be used as popup
lnk - Id for the link to be used as reference for popup position
xOffset - xOffset from the topleft of the ref link
yOffset - yOffset from the topleft of the ref link
function showPopUp(dispatch,lnk,xOffset, yOffset)

function showPopUp(divId,lnk,xOffset, yOffset)
{
var el = document.getElementById(lnk);
var ol=el.offsetLeft;
while ((el=el.offsetParent) != null) { ol += el.offsetLeft; }
var el = document.getElementById(lnk);
var ot=el.offsetTop;
while((el=el.offsetParent) != null) { ot += el.offsetTop; }

var x = ol+xOffset;
var y = ot+yOffset;
showMe(divId,x,y);
}


2) Div pop-up absolute.
divId - Id for the Div to be used as popup
xOffset - xOffset from the topleft
yOffset - yOffset from the topleft
function showMe(dispatch,xOffset,yOffset)

function showMe(divId,xOffset,yOffset){
var elm = document.getElementById(divId);
elm.style.top=yOffset;
elm.style.left=xOffset;
elm.style.display="";
elm.style.zIndex = 200;

}

3) Hide the div .
divid - Id for the div.
function hideMe(divid)

function hideMe(divid){
document.getElementById(divid).style.display="none";
}

4) Make an ajax request
url - URL of the server resource
data - Data to be used in case of post else empty string. Data passed is in the form of querystring.
method - get or post for ajax request submission
function serverData(url,data,method)

function serverData(url,data,method)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

try {
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(method,url,true);
xmlHttp.send(data);
showInProcess()
} catch (e) {
alert("Error Sending the Ajax Request."+e);
document.getElementById('inProcess').style.display = "none";
document.getElementById('processStatus').style.display = "none";
document.getElementById('result').style.display = "none";
}
}

5) Default response method which calls onAjaxResponse(responseText) on xmlHttp.readyState==4 and http_request.status == 200
function stateChanged()

function stateChanged()
{
if (xmlHttp.readyState==4)
{
if (xmlHttp.status == 200) {
onAjaxResponse(xmlHttp.responseText);
document.getElementById('inProcess').style.display = "none";
document.getElementById('processStatus').style.display = "none";
document.getElementById('result').style.display = "none";
} else {
alert('There was a problem with the request.');
document.getElementById('inProcess').style.display = "none";
document.getElementById('processStatus').style.display = "none";
document.getElementById('result').style.display = "none";
}
}
}

6) Gets the XmlHttp object based on the browser
function GetXmlHttpObject()

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;
}

7) Shows the inProcessScreen
function showInProcess()

function showInProcess()
{
screenheight=window.screen.height;
screenwidth=window.screen.width;

document.getElementById('processStatus').style.top=(screenheight/2)-150;
document.getElementById('processStatus').style.left=screenwidth/2-100;
document.getElementById('processStatus').style.zIndex = 150;
document.getElementById('processStatus').style.display = "";


if (window.innerHeight && window.scrollMaxY) {// Firefox
screenheight = window.innerHeight + window.scrollMaxY;
screenwidth = window.innerWidth + window.scrollMaxX;
}
else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
screenheight = document.body.scrollHeight;
screenwidth = document.body.scrollWidth;
} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
screenheight = document.body.offsetHeight;
screenwidth = document.body.offsetWidth;
}
document.getElementById('inProcess').style.top=0;
document.getElementById('inProcess').style.left=0;
document.getElementById('inProcess').style.height=screenheight;
document.getElementById('inProcess').style.width=screenwidth;

document.getElementById('inProcess').style.zIndex = 100;
document.getElementById('inProcess').style.display = "";

}

8) Hides the inProcessScreen
function hideInProcess()

function hideInProcess()
{
document.getElementById('processStatus').style.display = "none";
document.getElementById('inProcess').style.display = "none";
}

9) Initializes the in process screen
processingColor - Color for the processing text message
filmColor - Color for the processing film to protect parent screen activities during processing
processingText - Color of the Text for Processing message
processingImgSrc - processing Img
function initScreenBlur(processingColor,filmColor,processingText,processingImgSrc)

function initScreenBlur(processingColor,filmColor,processingText,processingImgSrc)
{
document.write("");
document.write("

"+processingText+"

");
document.write("

");
document.write("

");
}

10) Replaces the processing text message and image with the specified content
function replaceProcessingText(replaceText)

function replaceProcessingText(replaceText)
{
document.getElementById('processStatus').style.display = "none";
document.getElementById('result').style.top=document.getElementById('processStatus').style.top;
document.getElementById('result').style.left=document.getElementById('processStatus').style.left;
document.getElementById('result').style.zIndex = 150;

document.getElementById('result').innerHTML=replaceText;
document.getElementById('result').style.display = "";
}

usage
--------
initScreenBlur("red","gray","PROCESSING...","processing1.gif")
function onAjaxResponse(responseText)
{
//add your code here
}

test.jsp
---------
<% Thread.sleep(5000);//Some processing %>

This is the Ajax response