CODEWITHSUNDEEP
javascriptxmlajaxgoogle-chrome
Src1988
Src1988

Reputation: 193

Ajax XML request not working properly

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.

Upvotes: 2

Views: 916

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117314

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>

Upvotes: 1

invalidsyntax
invalidsyntax

Reputation: 640

Does any piece of this code work in Chrome on your site for you? If so, how far does it go? If you aren't already, you should use the Chrome developer's tools and set breakpoints in your javascript and step through the code until it stops working as intended.

If I had to take a guess at what is happening -- Chrome probably doesn't like the fact that you're using

xmlhttp.onreadystatechange

This line should likely be, instead:

xmlhttp.onload

EDIT CONTENTS:

After looking at your code (based on your comment response), it seems that you will never be able to fire the onclick event of your option. I played around with the code to test this, ensuring it will not run. The following simply will not happen because this event will not fire.

<option onclick="alert('test');">Nissan</option>

INSTEAD, do not use events from options. Use onchange events from the select.

<select onchange="alert(options[selectedIndex].text);">

Please try this and tell me if it pleases you. You can use this information to then trigger your xmlhttp logic.

Upvotes: 2

Related Questions