I am developing a website that uses AJAX to change the content on the page. Everything is working fine in Firefox, but I cannot get the links to change anything in Internet Explorer. Here is the AJAX code:

var loader = null;

function Onload()
{
   try { loader = new XMLHttpRequest(); }

   catch (e)
   {
      try { loader = new ActiveXObject('Msxml2.XMLHTTP'); }
      
      catch (e)
      {
         try { loader = new ActiveXObject('Microsoft.XMLHTTP'); }
         
         catch (e)
         {
            alert('We are terribly sorry, but your browser does not support AJAX and will not work with this website.');
            return false;
         }
      }
   }
   
   // Took out a few lines of irrelevant coding
}


function LoadContent(value)
{
   if (value == 0)
      url = 'UI/Default/index.php';
   else if (value == 1)
      url = 'index.html';
   
   loader.onreadystatechange = ContentStateChanged;
   loader.open('GET', url, true);
   loader.send(null);
}


function ContentStateChanged()
{
   if (loader.readyState == 4 || loader.readyState == 'complete')
      document.getElementById('content').innerHTML = loader.responseText;
}

It's pretty easy. Here is how I am setting the links:

<a href='#' onClick='javascript:LoadContent(0)'>Link</a>

Again, this works in Firefox, but when I click on the link in Internet Explorer, nothing happens. I've done about 2 hours worth of testing and I cannot figure this out. I do know that the 'content' element is being found in both Firefox and IE.

I figured it out... The problem was that I was placing the loader.onreadystatechange before loader.open. I'm not sure why that makes a difference especially since it worked when loading the page using AJAX in <body onload>. It just wouldn't work with links. Strange.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.