I am encountering an issue with my simple ajax request to load XML data when a value in a dropdown is selected. The XML contains image paths that I need to switch based on the user's selection. Everything works perfectly fine in Firefox without any JavaScript errors, but strangely nothing happens in Chrome. Below is the code snippet I've been working on:
<script type="text/javascript">
function loadXMLDoc(url) {
var xmlhttp;
var txt, txtBase, txtOverlay1, txtOverlay2, txtBlack, name, img;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, & Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.overrideMimeType("text/xml");
}
else {
// code for IE6 & IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
txtBase='<img id="original"';
txtOverlay1='<img id="overlay1" class="overlay"';
txtOverlay2='<img id="overlay2" class="overlay"';
txtBlack='<img id="opacity" class="overlay"';
img=xmlhttp.responseXML.documentElement.getElementsByTagName("IMG");
name=img[0].getElementsByTagName("NAME");
txtBase = txtBase + name[0].firstChild.nodeValue + '/>';
txtOverlay1 = txtOverlay1 + name[1].firstChild.nodeValue + '/>';
txtOverlay2 = txtOverlay2 + name[2].firstChild.nodeValue + '/>';
txtBlack = txtBlack + name[3].firstChild.nodeValue + '/>';
txt = txtBase + txtOverlay1 + txtOverlay2 + txtBlack;
document.getElementById('inner_container').innerHTML = txt;
$(".red").css({"font-size":"2.0em"});
$(".blue, .green").css({"font-size":"1.0em"});
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
To trigger the above function, I use this.
<select>
<option id="selected">Select a car</option>
<option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/nissan.xml')">Nissan</option>
<option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/mazdaspeed3.xml')">Mazdaspeed3</option>
</select>
If anyone could provide insights on why it doesn't work in Chrome and suggest improvements to the code, especially since I'm new to ajax, it would be highly appreciated.