Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax Drop Down Revisited (IE trouble!)

    Hi everyone,

    I hae created a dropdown menu using ajax where each option is populated dynamically based on the previous choice. It works great on Firefox thanks to help I got on this forum.

    It doesn't work on IE however. I believe this is because IE doesn't recognise the innerHTML property when applied to a select tag?

    The dropdown option simply fails to populate alhough the AJAX seems to work.

    I've changed the id and name properties on the form and tried wrapping each select tag in div tags but no luck so far.

    I'm looking for an easy solution to this problem as I've already put an enormous amount of effort into this!

    Here's some of my code. Any help much appreciated.

    Code:
    function GetXmlHttpObject(){
          var xmlHttp = false;
          
    	  try{
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")//For Old Microsoft Browsers
          }
    	  
          catch(e){
          try{
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
          }
          catch(e2){
         
    	 xmlHttp = false;
          }
          }
      
          if (!xmlHttp && typeof XMLHttpRequest != 'undefined') 
    	  {
          xmlHttp = new XMLHttpRequest();//For Mozilla, Opera Browsers
          }
          if(!xmlHttp) { alert("Browser does not support HTTP Request"); }
          
    	  return xmlHttp;
      
          }
    	  
    	 
      
          function getSchool1(langID){
      
          var xmlhttp = GetXmlHttpObject();
      
          if(!xmlhttp){ return; }
      
          var url = "findcity.php" +
          "?language=" + langID +
          "&sid=" + Math.random();
    	  alert(url);
      
          xmlhttp.onreadystatechange = function(){
      
          if(xmlhttp.readyState == 4){
    	  
    
          document.getElementById("school").innerHTML = xmlhttp.responseText;
          document.getElementById("school").disabled = 0;
      
          }
      
          };
      
          xmlhttp.open("GET",url,true);
          xmlhttp.send(null);
      
          }
    form

    Code:
    <head>
    	  <script type = text/javascript src = getschool1.js></script>
    	  <link rel="stylesheet" type="text/css" href="form.css"
    	  </head>
    	  <body>
          <form id = 'prices' action="process.php" method="post">
          <table>
          <td align="right">Language of interest:</td>
          <td>
          <select id="language" name="language" onChange="getSchool1(this.value)">
          <option value="none selected"> --- select --- </option>
          <option value="french">French</option>
          <option value="german">German</option>
          <option value="italian">Italian</option>
          <option value="spanish">Spanish</option>
          <option value="russian">Russian</option>
          </select>
          </td>
          <tr>
          <td align="right">School</td>
          <td>
          <select id ="school" name ="school" onChange="getAge(this.value)" disabled>
          <option value="none selected">Select Language First</option>
          </select>
          </td>
          </tr>
    	  <tr>
          <td align="right">Course Type</td>
          <td>
          <select id = "age" name="age" onChange="getLevel(this.value)" disabled>
          <option value="none selected"> Select School First </option>
          </select>
          </td>
          </tr>
          <tr>
          <td align="right">Class Type</td>
          <td>
          <select id="level" name="level" onChange="getDuration(this.value)" disabled>
          <option value="none selected">Select Course Type First</option>
          </select>
          </td>
          </tr>
          <tr>
          <td align="right">Duration</td>
          <td>
          <select id="duration" name="duration" onChange="getPlace(this.value)" disabled>
          <option value="none selected">Select Class Type First</option>
          </select>
          </td>
          </tr>
    	  <tr>
          <td align="right">Accommodation</td>
          <td>
          <select id ="place" name ="place" onChange = "getBoard(this.value)" disabled>
          <option value="none selected">Select Duration First</option>
          </tr>
    	  <tr>
          <td align="right">Board</td>
    	  <td>
    	  <select id ="board" name="board" onChange = "getRoom(this.value)" disabled>
    	  <option value="none selected">Select Acc First</option>
    	  </tr>
    	  <td align="right">Room Type</td>
    	  <td>
    	  <select id ="room"  name="room" onChange = "getSeason(this.value)" disabled>
    	  <option value="none selected">Select Board First</option>
    	  </tr>
    	  <tr>
    	  <td align="right">Season</td>
    	  <td>
    	  <select id ="season"  name="season" disabled>
    	  <option value="none selected">Select Room First</option>
    	  </tr>
    	  </br>
    	  
    <td align="right">Currency</td>
    <td>
    <select name="currency" >
    <option value="none selected"> --- select --- </option>
    <option value="euro">Euro</option>
    <option value="sterling">Sterling</option>
    <option value="dollar">Dollar</option>
    </tr>
    <tr>
    <td>
    <input type="submit" value="submit">
    </tr>
    </td>
          </table>
    	  </body>

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    can you please post the result of the following:
    Code:
    xmlhttp.responseText

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi thanks for the reply. Is this what you mean?

    Code:
    <?php
    
    
    $language = $_GET["language"];
    $school = $_GET["school"];
    
    
    mysql_connect("localhost", "root", "") or die(mysql_error());
      
      mysql_select_db("buu_jos") or die(mysql_error());
    
    
    $query = mysql_query("SELECT s.school
    FROM ssa_schoolid AS s, ssa_lang AS l, ssa_course AS c
    WHERE l.langtype = '$language'
    AND l.langid = c.langid
    AND s.schoolid = c.schoolid
    GROUP BY s.school")
    or die (mysql_error()); 
    ?>
    <option value ="none selected">Select School</option>
    <? while($row = mysql_fetch_array($query)) {
     ?>
       <option value = <?=$row['school']?>><?=$row['school']?></option>
       
    <? 
    } 
    ?>

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    I meant that before this line:
    Code:
    document.getElementById("school").innerHTML = xmlhttp.responseText;
    add the following line:
    Code:
    alert(xmlhttp.responseText);
    I need to see what the result that arrived to the browser.

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again for the reply. Sorry I'm new to all this. Heres the alert that comes up in Mozilla and Internet Explorer.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    <html>
    
    <head>
    
    
    
    </head>
    
    <body>
    
    
    
    <option value ="none selected">Select School</option>
    
       <option value = Berlin>Berlin</option>
    
       
    
       <option value = Constance>Constance</option>
    
       
    
       <option value = Freiburg>Freiburg</option>
    
       
    
       <option value = Lindenberg>Lindenberg</option>
    
       
    
       <option value = Meersburg>Meersburg</option>
    
       
    
       <option value = Zug>Zug</option>
    
       
    
    
    
    
    
    <body/>
    
    <html/>
    Last edited by daved83; 08-24-2009 at 04:55 PM.

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    I see that you are using the doctype for xhtml and you do not have a well formed xhtml.

    Let us start by removing the doctype line:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK I've removed the doctype line

  • #8
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    does it work now after removing the line?

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No luck I'm afraid. I think the problem is the innerhtml element but not sure?????
    I've read alot about using a DOM alternative for IE but not really sure??


  •  

    Tags for this Thread

    Posting Permissions

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