This is my first time asking for help in any forum and I am not that good with AJAX. I would really appreciate any comments or suggestions.
Here is the problem.
I am trying to create one dependent dynamic list first it loads category from database(DB) then based on category selected it will pull subcategory list from DB and same for product name. Well I finished all parts including server side coding and Javascript coding and worked perfectly in Firefox as well Opera but not in IE. Here is the code.

Javascript
-------------------------------------------
<script type="text/javascript">
var xmlHttp;
var loader = "Loading.......";

function showSubCat(str)
{
  if (str.length==0)
  {
    document.getElementById("subcat").innerHTML=""
    return
  }

  xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
  {
    alert ("Browser does not support HTTP Request")
    return
  }

  var url="sendproduct.php"
  url=url+"?q="+str
  url=url+"&sid="+Math.random()
  xmlHttp.onreadystatechange=stateChanged
  xmlHttp.open("GET",url,true)
  xmlHttp.send(null)
}

function stateChanged()
{
  if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading")
  {
    document.getElementById("subcat").innerHTML=loader ;
    document.getElementById("subcategory").style.displ ay = '';
  }

  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  {
   document.getElementById("subcat").innerHTML=xmlHtt p.responseText;
  }
}

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;
}
------------------------------------------------------------
HTML
------------------------------------------------------------
<?php
$product = new Product;
$array = $product->getSubCategoryInfo ();
?>
<div id="category" class="subsubcategory">
<span class="normalnotice"><p>Select Category</p></span>
<select name="category" id="cat" size="6" onchange="showSubCat(document.getElementById('cat' ).value+'@subcat')">
<?php
$counter = 0;
foreach ($array as $cur)
{
    echo '<option value="'.$array[$counter][0].'">'.$array[$counter][1].'</option>';
    $counter++;
}
?>
</select>
</div>

<div id="subcategory" class="subsubcategory" style="display:none">
<span class="normalnotice"><p>Select Sub-category</p></span>
<select name="subcategory" id="subcat" size="6">
</select>
</div>

<div id="product" class="subsubcategory" style="display:none">
<span class="normalnotice"><p>Select Product</p></span>
<select name="product" id="product" size="6">
    <option>Too Many Choices</option>
</select>
</div>
---------------------------------------------------------------
SERVER SIDE SCRIPT WHICH AJAC CALLS
sendproduct.php
---------------------------------------------------------------
<?php
$data = $_GET["q"];

list($realdata, $case) = split("@", $data);//split

$product = new Product;

if ($case == "subcat")
{
    $product = new Product;
    $array = $product->getSubSubCategoryInfo($realdata);

    $counter = 0;
    foreach ($array as $cur)
    {
       echo '<option value="'.$array[$counter][0].'">'.$array[$counter][1].'</option>';
        $counter++;
    }
}

if ($case == "product")
{

}

?>
----------------------------------------------------------
Please note that product has been completed yet.
It seems like there's probelm in XMLHTTP variable since it works in Firefox that's why. Please give me any suggestion.

Well if it works in other browsers then your web service is okay. My guess is that it's because you use: which redeclares the variable xmlHttp, meaning it's a different one to the var xmlHttp declared outside the function. Try removing the var. If this is the case then I believe IE is actually correct in its behaviour.

On a separate note IE 7 also supports new XMLHttpRequest() so don't assume that it's Mozilla if this part of the code works, it's often better to try new ActiveXObject first and then fall back to the built in object. You should also try to create IE's objects with the following class IDs in order:
 

• MSXML2.XMLHttp.6.0
• MSXML2.XMLHttp.3.0
• Microsoft.XMLHTTP

that way you'll get the best and most reliable object available.

--

Joe (Microsoft MVP - XML)

First of all I would like thank you for spending valuable time of yours for my problem.
I made some changes like you suggested but still problem is same.

JAVASCRIPT
-----------
xmlHttp;
var loader = "Loading.......";

function test (str)
{
    alert(str);
}

function showProduct(str)
{
    if (str.length==0)
      {
          document.getElementById("product").innerHTML=""
          return
      }

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)
      {
          alert ("Browser does not support HTTP Request")
          return
      }

    var url="sendproduct.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChangedforProduct
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

function stateChangedforProduct()
{
    if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading")
     {
         document.getElementById("product").innerHTML=loade r;
        document.getElementById("productpart").style.displ ay = '';
     }

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
        document.getElementById("product").innerHTML=xmlHt tp.responseText;
    }
}


function showSubCat(str)
{
    if (str.length==0)
      {
          document.getElementById("subcat").innerHTML=""
          return
      }

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)
      {
          alert ("Browser does not support HTTP Request")
          return
      }

    var url="sendproduct.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

function stateChanged()
{
    if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading")
     {
         document.getElementById("subcat").innerHTML=loader ;
        document.getElementById("subcategory").style.displ ay = '';
        document.getElementById("productpart").style.displ ay = 'none';
        document.getElementById("product").innerHTML='';
     }

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
        document.getElementById('subcat').innerHTML= xmlHttp.responseText;
    }
}

function GetXmlHttpObject()
{
   xmlHttp = null;
   var success = false;

   // List of MS XMLHTTP versions - newest first
   var MSXML_XMLHTTP_PROGIDS = new Array(
       'MSXML2.XMLHttp.6.0',
       'MSXML2.XMLHTTP.5.0',
       'MSXML2.XMLHTTP.4.0',
       'MSXML2.XMLHTTP.3.0',
       'MSXML2.XMLHTTP',
       'Microsoft.XMLHTTP'
   );

   for (var i = 0; i < MSXML_XMLHTTP_PROGIDS.length && !success; i++)
   {
      try
      {
         xmlHttp = new ActiveXObject(MSXML_XMLHTTP_PROGIDS[i]);
         success = true;
         return xmlHttp;
      }
      catch (e)
      {
         xmlHttp = false;
      }
   }

   if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
   {
      try
      {
         xmlHttp = new XMLHttpRequest();
      }
      catch (e)
      {
         xmlHttp = false;
      }
   }

   return xmlHttp;
}
------------------------------------------------------
SERVER SIDE SCRIPT CALLED BY AJAX
------------------------------------------------------
<?php
$data = $_GET["q"];

list($realdata, $case) = split("@", $data);//split

$product = new Product;

if ($case == "subcat")
{
    $array = $product->getSubSubCategoryInfo($realdata);

    $counter = 0;
    foreach ($array as $cur)
    {
        echo '<option value="'.$array[$counter][0].'">'.$array[$counter][1].'</option>';
        $counter++;
    }
}

if ($case == "product")
{
    $arrayag = $product->getProductIDandName($realdata);

    $counter = 0;
    foreach ($arrayag as $cur)
    {
    echo '<option value="'.$arrayag[$counter][0].'">'.$arrayag[$counter][1].'</option>';
        $counter++;
    }
}

?>
---------------------------------------------------------------
HTML CODE WRAPPER FRONTEND
---------------------------------------------------------------
<div id="category" class="subsubcategory">
<span class="normalnotice"><p>Select Category</p></span>
<select name="category" id="cat" size="6" onchange="showSubCat(this.value+'@subcat')">
<?php
$counter = 0;
foreach ($array as $cur)
{
    echo '<option value="'.$array[$counter][0].'">'.$array[$counter][1].'</option>';
    $counter++;
}
?>
</select>
</div>

<div id="subcategory" class="subsubcategory" style="display:none">
<span class="normalnotice"><p>Select Sub-category</p></span>
<select name="subcategory" id="subcat" size="6" onchange="showProduct(this.value+'@product')">
</select>
</div>

<div id="productpart" class="subsubcategory" style="display:none">
<span class="normalnotice"><p>Select Product</p></span>
<select name="product" id="product" size="6">
</select>
</div>
------------------------------------------------------------
Like I said it works in firefox and Opera it just IE which is not co-operating. There's several things which I want to point out
Notice that in Server Side CODE or service I am using foreach loop to populate options in select list
foreach ($array as $cur)
{
     echo '<option value="'.$array[$counter][0].'">'.$array[$counter][1].'</option>';
    $counter++;
}
it seems that IE does not understand this part like other.
also in JAVASCRIPT CODe I am using

document.getElementById('subcat').innerHTML= xmlHttp.responseText;
 I think some of wrong in these part somewhere. It's been two days and I am still working on this problem.
Once Again thanks a lot for your help.

As you don't really state what exactly isn't working it's hard to say. I imagine it might be that IE doesn't like you setting the innerHTML of a select box, you may have to create each option separately and add it to the dropdown. Can you add an alert just before  of the xmlHttp.responseText?

--

Joe (Microsoft MVP - XML)

Thanks for quick reply. Just like you said I check with alert it seems that it is getting value from web service. But I didn't get the part where you said set OPTION differently. For your question what is not working here is the scenario.
I am trying to get the list of category, subcategory and then product.
First of all you can see is category then based on category you select it shows you you sub-category and same for product.
It works perfectly in Firefox but in IE it just shows empty select list. rest you can figure out from code itself.
I am extremely sorry if I confused you in any way. Thank you

One more thing like you said what I get using alert here is this output.
<option value="1">Shoes</option><option value="2">Shirt</option>

Well it looks like IE won't accept innerHTML as a way to create a select box. You need to parse the return text, loop through options and add new options individually. You may need to add a root element to the options and parse it as XML.

--

Joe (Microsoft MVP - XML)

Thanks a lot very helping I really appreciate your help. Well like you said I parse the string but I did in slight different way like I said I am new to AJAX. So, I took advantage from PHP side since I am good in that. Now just in case if you are wondering here's how I did it.
instead of returning string in this format from server
<option value="1">Shoes</option>

I modified my server output to return string in this format
1@Shoes@2@Clothes

Now all I did was split with @
and for every values I added it as option like this

function removeOptions (optionMenu)
{
  for (var i=0; i < optionMenu.options.length; i++)
  {
    optionMenu.options[i] = null;
  }
}

function popoulate(valuearray, optionMenu)
{
  var breakdown = valuearray.split("@");
  var reallength = (breakdown.length-1)/2;
  var i = 0;
  var forvalue = 0;
  var forlabel = 1;
  removeOptions (optionMenu);

  while (i < reallength)
  {
    optionMenu[i] = new Option(breakdown[forlabel],breakdown[forvalue]);
    i++;
    forvalue = forvalue + 2;
    forlabel = forlabel + 2;
   }
}

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
         popoulate(xmlHttp.responseText, document.getElementById("subcat"));//xmlHttp.responseText;
    }

----------------------------------------------------------------
That's it
----------------------------------------------------------------
I am very sorry if you are Microsoft person but I really hate IE in many terms. I don't know whether you have ever heard about FLEX or not. But this is one kind of situation where I prefer Flex over AJAx because in Flex you don't fall around this kind of problem. But by saying this I am not trying to say that AJAX is bad. Sure it have many good sides. Long discussion short; lastly I would like thank you for your help.... if you ever decided to contact me [email protected]

No I'm not a Microsoft person so you won't upset me :)

Your way was easier as you have the luxury of altering the web service format, obviously you now have to change the Firefox client-side code...

Unfortunately IE uses a windowed select box which doesn't behave too well, it doesn't respond well to z-index for example. Some of this stuff was supposed to be fixed in IE 7 but most wasn't.

On the other hand Firefox has some notable missing features, its XSLT is a bit limited by not having a node-set function. I hear that's in the next release due out in January.

Ajax of course is still developing, one of the main problems is debugging it when it goes wrong, there are so many layers and cross overs between server and client that it can be very difficult.

Glad I could help in some way.

--

Joe (Microsoft MVP - XML)