Fading in AJAX loaded content

[nicky77]

Hi, I'm trying to create a fade effect for content loaded via AJAX. The fade effect works, however, the script is not fetching the content correctly and keeps failing the test for status 200, showing the "Error: bad request" error message.

Grateful if anyone could see where I'm going wrong?

The Javascript.....

function solidMe(subobjstr, op)
{
var subobj = document.getElementById(subobjstr);
subobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + op + ");";
subobj.style.opacity = op / 100;
}
function callAHAH(url, pageElement, callMessage, errorMessage)
{
document.getElementById(pageElement).innerHTML = callMessage;

try
{
req = new XMLHttpRequest(); /* e.g. Firefox */
}
catch(e)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP"); /* IE */
}
catch (e)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP"); /* IE */
}
catch (E)
{
req = false;
}
}
}

req.onreadystatechange = function() { responseAHAH(pageElement, errorMessage); };
req.open("GET", url, true);
req.send(null);
}

function responseAHAH(pageElement, errorMessage)
{
var output = '';

var subobj = document.getElementById(pageElement);
op = 0;
subobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + op + ")";
subobj.style.opacity = op;
while(op < 100) {
op = op + 10;
setTimeout("solidMe('" + pageElement + "', " + op + ")", op * 5);
}

if(req.readyState == 4)
{
if(req.status == 200)
{
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
else
{
document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
}
}
}

function makeactive(tab)
{
callAHAH(tab, 'spec_content', '<p class="loading">Loading...</p>', 'Error: bad request.');
}


the html call...
<a href="javascript:makeactive('taylor_hend.html')">Home</a>
<a href="javascript:makeactive('classes.html')">Contact</a>

[A1ien51]

a tool like Fiebug [www.getFirebug.com] and look to see what is coming back in the Ajax call.

You probably want to alert what the status and statusText inside the else statement so you know what the real error message is.

Eric

[nicky77]

Thanks for the reply, I've just downloaded Firebug - very handy tool!

When i alert the req.status inside the else block, status is showing as 0. req.statusText is showing as blank when i check that, so I'm not sure what the problem is. There is no problem retrieving the content to be loaded, as I checked the req.responseText which displays the correct content.

here's where i'm testing for req.status etc...

if(req.readyState == 4)
{
if(req.status == 200)
{
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
else
{
alert(req.statusText);
document.getElementById(pageElement).innerHTML = errorMessage+"\n"+req.responseText;
}
}

Any ideas?

[A1ien51]

If you are getting a sttsus of 0, that means someone is testing on the local file system and not on a server enviornment.

that means you need to do:

if(req.status == 200 || req.status == 0)

Now is the page element correct?

Eric

[nicky77]

Thanks Eric, that resolved the issue. I didn't actually realise that AJAX might behave differently in a local environment but then I'm new to AJAX so it's another part of the learning curve!