Successfully received the response from the server, It would be better if you can show that status to end-user. Used the property opacity for fading out the color., Depends on browser the opacity property is different.
Firefox browser supports property opacity:x - value x range from 0.0 to 1.0 (lower value makes more transparent).
IE browser uses filter: alpha(opacity=x) – value x range from 0 to 100.
The logic for fading out is set the time interval for periodically reduce the value of opacity property , so that the color gets transparent then it looks like a fading out.
Javascript functions setInterval & clearInterval are used for setting and clearing the time intervals respectively. Lets see the below example.
Example
fadeout.jsp
<html>
<body>
<script src=”fadeout.js” language=”javascript”></script>
<!– div to show the status message of ajax response –>
<div id=”statusmsg” style=”background-color:green;opacity:.30;filter: alpha(opacity=30);”></div>
<a href=”#” onclick=”javascript:sendAjaxRequest(‘/storedb.do?prodid=1200&productname=ajax’, ’statusmsg’);”>click to save</a>
</body>
</html>
fadeout.js
function processResponse(req, divid)
{
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById(divid).innerHTML=”Data Saved Successfully”;
setTimeout(“FadeOut(‘”+divid +”‘)”,5000); // added code for showing status message after 5 seconds.
}
}
}
/*
function for finding browser name. Because IE browser rendering a page differently. So this method will be useful for finding & writing browser specific javascript code
*/
function isIEBrowser()
{
var browsername = navigator.appName;
if( browsername == “Microsoft Internet Explorer” )
{
return true;
}
return false;
}
/*
method for calling fadeout
set the time interval for reducing the opacity value periodically.
*/
var intervalid;
function FadeOut(divid)
{
if(isIEBrowser()){
intervalid = setInterval(“decreaseOpacityForIE(‘”+divid+”‘)”,100);
}else{
intervalid = setInterval(“decreaseFading(‘”+divid+”‘)”,100);
}
}
// for IE Browser only
function decreaseOpacityForIE(divid)
{
var divobj = document.getElementById(divid);
if(divobj ){
divobj .filters.alpha.opacity=parseFloat(divobj .filters.alpha.opacity)-2;
if (divobj .filters.alpha.opacity <= 0 ){
clearInterval(intervalid);
}
}
}
// for other browsers – Firefox/Netscape
function decreaseOpacity(divid)
{
var divobj = document.getElementById(divid);
if(divobj ){
divobj.style.MozOpacity=parseFloat(divobj.style.MozOpacity)-0.02;
if (divobj.style.MozOpacity <= 0){
clearInterval(intervalid);
}
}
}
setTimeout(javascript stmt, milliseconds) - execute that javascript statement after specified milliseconds intervals.
If you are new to Ajax see the below links to learn basics.
Ajax Basics – http://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax GET request – http://manikandanmv.wordpress.com/2008/09/29/ajax-example/
Tags: AJAX, fade out, status message fade out, ajax response status message, opacity, setInterval, clearInterval, alpha opacity, isIE, isIEBrowser, find browser name
