There are two drop-down lists on my website, where the options in one depend on the selection in the other. The Ajax code works perfectly fine in Chrome and Mozilla, but it's not functioning correctly in Internet Explorer (specifically IE9). I need some assistance in fixing this issue.
Here is the Ajax code snippet-
<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 is the main jsp page that contains the dropdown lists--
<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>
Below is the subcategory jsp file 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);
}
%>
Oddly, changing the parameter in the following Ajax function from "subcat" to "subcategory", which is the ID of the div containing the second dropdown list, allows it to work properly in IE and other browsers.
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("subcat").innerHTML=xmlHttp.responseText
}
If I go with the above solution, I face challenges with JavaScript form validation for the 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;
}
}
I hope I have explained my question clearly. Please let me know if you need any further clarification. Thank you.