Home/ Questions/Q 6943385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:08:56+00:00

I am trying to do a simple ajax request to load in some XML

  • 0

I am trying to do a simple ajax request to load in some XML when a value in a dropdown is selected. The XML contains image paths that I switch based on what the user selects. It works great in Firefox (I don’t get any Javascript errors), but for some reason nothing happens in Chrome. This is what i have so far:

        <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>

And i call it using 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>

Any help to get this to work in Chrome would be greatly appreciated, also any hints at making the code better. I’m a beginner at ajax.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please check the status-code. It may happen that the xml-file has been requested before and the server sends another status-code, e.g. 304

    jQuery automatic appends a random-parameter to the url to prevent from this(you may do this too).

    Edit:

    It seems that the click-handler didn’t fire.
    Use this markup for the select instead:

    <select onchange="if(this.value)loadXMLDoc(this.value)">
  <option value="0" id="selected" selected="selected">Select a car</option>
  <option value="/files/nissan.xml">Nissan</option>
  <option value="/files/mazdaspeed3.xml">Mazdaspeed3</option>
</select>
    • 0