Strange Behaviour in IE7 - Javascript only refreshes dropdown once

[AthleteTO]

Strange little issue. Using Javascript and AJAX to pull in a drop down box for car models when a car make is chosen. Here's what happens: if I choose Ford, the Ford models appear. I choose Honda, the Honda models appear. But if I choose Ford again - the update doesn't happen. Essentially, anything that's already been selected will not reappear.

Here are the code snippets:

<script type="text/javascript">
function init(Make) {
	httpObject = getHTTPObject();
	if (httpObject != null) {
		httpObject.open("GET", "modeldropdown.asp?Type=<%=Request("Type")%>&Make="+Make.value, true);
		httpObject.send(null);
		httpObject.onreadystatechange = display;
	}
}

function display() {
	if(httpObject.readyState == 4){
		document.getElementById('model').innerHTML = httpObject.responseText;
	}
}

function getHTTPObject(){
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
		else if (window.XMLHttpRequest) return new XMLHttpRequest();
		else {
			alert("Your browser does not support AJAX.");
		return null;
	}
}

var httpObject = null;
</script>

                    <select name="Make" onChange="javascript:init(this)">
                      <option value="">&gt;&gt; Make</option>
                      <option value="Acura">Acura</option>
                      <option value="Audi">Audi</option>
                      <option value="BMW">BMW</option>
... etc...                       
                    </select>

                    <div id="model"><font size="1">Select a Make..</font></div>

<%
	If Request("Make") & "!" = "!" Then
%>
<font size="1">Select a Make..</font>
<%
	Else
	
%>
                    <select name="Model">
                      <option value="">&gt;&gt; Model</option>
                      <option value="">---------------</option>
                      <option value="Undecided">Undecided</option>
<%
		If Request("Type") = "New" Then
		
			sql = "Select * From New Where Make = '" & Request("Make") & "';"
			
		Else
		
			sql = "Select * From Used Where Make = '" & Request("Make") & "';"
			
		End If
		
		rs.open sql, conn
	 
		Do Until rs.EOF
%>
                      <option value="<%=rs("Model")%>"><%=rs("Model")%></option>
<%
			rs.movenext
			
		Loop
		
		rs.close
%>
                    </select>
<%
	End If
%>

Your thoughts on why this is happening are most appreciated!

Cheers..
Drew

[sde]

are you using firefox with firebug? my guess is that something to do with the honda selection is causing an js error and killing your script.

[AthleteTO]

It actually generates no javascript errors, and works correctly in Firefox (but not in IE7).

To be more clear - it doesn't matter which Make is chosen: once selected, it does not work if selected again. Only different Makes that have not already been selected will properly update the list.

Strange eh?

Drew

[sde]

It may be related to your ajax request setup. I always recommend using a JS library like jquery for this.

Here's how the code may look to achieve what you're going for (not tested)

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
// do this when the document is loaded
$(document).ready(function(){
  
  // bind this change function to the #Make select
  $('#Make').change(function(){
    
    // use ajax to get the data
    $.get("modeldropdown.asp", { Type: "<%=Request("Type")%>", Make: $('#Make').val() },
      function(data){
        // place data in  #model
        $('#model').html(data);
      });
  });
});
</script> <select id="Make" name="Make"> <option value="">&gt;&gt; Make</option> <option value="Acura">Acura</option> <option value="Audi">Audi</option> <option value="BMW">BMW</option> </select> <div id="model"><font size="1">Select a Make..</font></div>