Question

I have two drop down list in my webpage and one is dependent on the other. The Ajax code i am using is working fine in Chrome, Mozilla but not in IE (i am using IE9). Can someone please help me in getting this corrected.

This is the Ajax code-

 <script language="javascript" type="text/javascript">  
  var xmlHttp  
  var xmlHttp

  function showSubCategory(str){
      if (typeof XMLHttpRequest != "undefined"){
      xmlHttp= new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="jsp/subcategory.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange1;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }

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

This the main jsp page where the drop down lists are.–

 <table>
     <tr>
<td align="right" width="10%">Category </td>
<td>
   <select id='category' name="adv.categoryNo" onchange="showSubCategory(this.value)">  
       <option >Select the Category</option>  
     <%
Class.forName("com.mysql.jdbc.Driver").newInstance();  
Connection con1 = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","user","pwd");  
Statement stmt1 = con1.createStatement();  
ResultSet rs1 = stmt1.executeQuery("Select * from categories");
while(rs1.next()){
    %>
    <option value="<%=rs1.getString(2)%>"><%=rs1.getString(2)%></option>  
    <%
}
    %>
    </select>                                  
     </td>
    </tr>

   Second drop down list 


    <tr>
      <td align="right" width="10%">Subcategory <span class="mandatory">*</span>: </td>
       <td>
         <div id='subcategory'>  
         <select id='subcat'  name='subcategory'>  
         <option >Select the Subcategory</option>  
         </select>  
         </div>
    </td>
    </tr>

Here is the subcategory jsp file which is called by Ajax.

<%@page import="java.sql.*"%>
 <%
  String category=request.getParameter("count");  
   String buffer="<select name='adv.subCategoryNo'><option >Select the Subcategory</option>";  
 try{
  Class.forName("com.mysql.jdbc.Driver").newInstance();  
  Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","user","pwd");  
  Statement stmt = con.createStatement();  
  ResultSet rs = stmt.executeQuery("Select * from subcategories where     categoryName='"+category+"' ");  
   while(rs.next()){
   buffer=buffer+"<option value='"+rs.getString(3)+"'>"+rs.getString(3)+"</option>";  
   }  
    buffer=buffer+"</select>";  
    response.getWriter().println(buffer); 
    }
   catch(Exception e){
    System.out.println(e);
    }
   %>

Strange thing is if i change the getElementById param in the following function of the Ajax code from “subcat” to “subcategory” which is the div id covering the second drop down list, it works fine in IE and other browsers.

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

If i follow the above approach i am not able to do any javascript form validation for that Subcategory select box using the following JS code.

 function madeSelectionCity(){
  var subcat = document.getElementById('subcat');
if(subcat.value == "Select the City name"){
    alert("Please select a subcategory first");
    subcat.focus();
    return false;
}else{
    return true;
}
 }

Hope i am clear in my question. Please let me know if any more explanation is required. Thanks

Answer 1

Change the below line of code( in subcategory.jsp called by ajax code)

 String buffer="<select name='adv.subCategoryNo'><option >Select the Subcategory</option>";  

to

 String buffer="<select id='subcat' name='adv.subCategoryNo'><option >Select the Subcategory</option>";  

and also add this line of code ( in subcategory.jsp called by ajax code)

response.setContentType("text/html");

on the webpage(main page) , the html should be

 <div id='subcategory'>
 </div>

and ajax(main page) code should be

function stateChange1(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("subcategory").innerHTML=xmlHttp.responseText   
      }