Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Professional Ajax ISBN: 978-0-471-77778-6
This is the forum to discuss the Wrox book Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett; ISBN: 9780471777786
Important: For the new 2nd edition of this book, please post here instead: [url="http://p2p.wrox.com/forum.asp?FORUM_ID=307"]http://p2p.wrox.com/forum.asp?FORUM_ID=307[/url]
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Ajax ISBN: 978-0-471-77778-6 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old August 22nd, 2007, 12:10 PM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Problem with IE

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.

Reply With Quote
  #2 (permalink)  
Old August 23rd, 2007, 02:27 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well if it works in other browsers then your web service is okay. My guess is that it's because you use:
Code:
function GetXmlHttpObject()
{
  var xmlHttp=null;
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)
Reply With Quote
  #3 (permalink)  
Old August 23rd, 2007, 09:50 AM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

Reply With Quote
  #4 (permalink)  
Old August 23rd, 2007, 11:04 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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
Code:
document.getElementById('subcat').innerHTML= xmlHttp.responseText;
 of the xmlHttp.responseText?

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #5 (permalink)  
Old August 23rd, 2007, 01:45 PM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Reply With Quote
  #6 (permalink)  
Old August 23rd, 2007, 01:49 PM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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>


Reply With Quote
  #7 (permalink)  
Old August 23rd, 2007, 02:36 PM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
Reply With Quote
  #8 (permalink)  
Old August 23rd, 2007, 05:27 PM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 nick4u1lee@yahoo.com

Reply With Quote
  #9 (permalink)  
Old August 24th, 2007, 03:11 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off



All times are GMT -4. The time now is 01:50 PM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.