SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading in AJAX loaded content

    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.....
    Code:
    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...
    Code:
    <a href="javascript:makeactive('taylor_hend.html')">Home</a>
    <a href="javascript:makeactive('classes.html')">Contact</a>

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code seems to be OK. check if the url 'taylor_hend.html'
    I guess you need to append the context path + relative location also.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    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...
    Code:
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •