Parsing XML with jQuery

Question

Ok, so I can parse the XML with jQuery but it only seems to work in FireFox and not IE.

My XML file:

<?xml version="1.0" encoding="utf-8" ?>
<Answers>
    <Question>
        <question-title>Question One - Title</question-title>
        <a>24</a>
        <b>36</b>
        <c>10</c>
        <d>30</d>
    </Question>
</Answers>

My code that parses the XML:

var xmlType = 'xml';
        if ($.browser.msie) {
            xmlType = 'text/xml'
        }
$.ajax({
            type: "GET",
            url: "answers.xml",
            dataType: xmlType,
            success: function(xml) { //if the XML exists
                $(xml).find('Answers').each(function(){ //go inside answers
                    $(this).find('Question').each(function(){ //for each question...
                        var moo = $(this).find('question-title').text();
                        $('.question-title').append(moo); //append the question title
                        
                        var a = $(this).find('a').text();
                        var b = $(this).find('b').text();
                        var c = $(this).find('c').text();
                        var d = $(this).find('d').text();
                        
                        $('.label1').html(a+'%');
                        $('.label2').html(b+'%');
                        $('.label3').html(c+'%');
                        $('.label4').html(d+'%');
                        
                        $('.input1').val(a);
                        $('.input2').val(b);
                        $('.input3').val(c);
                        $('.input4').val(d);
                        
                        $('.cu-mid','.cuboid.'+'green1').animate({
                            height: a
                        }, 550);
                        $('.cu-mid','.cuboid.'+'green2').animate({
                            height: b
                        }, 550);
                        $('.cu-mid','.cuboid.'+'green3').animate({
                            height: c
                        }, 550);
                        $('.cu-mid','.cuboid.'+'green4').animate({
                            height: d
                        }, 550, function() {
                            
                            $('.cu-mid').animate({
                                height: '+='+50
                            }, 550);
                            
                        });
                    });
                });
            }
        });

The output in FireFox is the correct - heights on the required elements. But in IE - nothing... zip... nada...

I thought at first that this could be the dataType, so I added an if statement... That didn't help either.

Any ideas?!

Cheers.

edit: I get the following errors in IE:
Invalid Argument line 66 - the ending brace in: $(xml).find('Answers').each(function(){
Object expected line 1 - ???

Are you getting an error of any sort? Also, just for kicks, try commenting out the title lines and see if it makes a difference. — Nick Craver
– Nick Craver, Commented Dec 10, 2010 at 11:45
Edited my question, included two errors (oh, and commenting out the title lines didn't change anything) — Barrie Reader
– Barrie Reader, Commented Dec 10, 2010 at 11:48
@Neurofluxation - just curious, does $(xml).filter('Answers') have any effect in IE? (instead of .find())? — Nick Craver
– Nick Craver, Commented Dec 10, 2010 at 11:52
Can you temporarily change the name of your "title" element to something else, and see if it makes a difference? I'm vaguely remembering something about XML being processed at HTML hiding elements that have the same names as HTML element that would normally appear in an HTML <head>... — Matt Gibson
– Matt Gibson, Commented Dec 10, 2010 at 11:53
Curiousity killed the cat! .filter() didn't get IE working either (and stopped FireFox from parsing the XML too). — Barrie Reader
– Barrie Reader, Commented Dec 10, 2010 at 11:54

Barrie Reader · Accepted Answer · 2010-12-10 15:29:47Z

1

Nevermind, I figured it out:

function runQuiz(whichQ) {
            if (window.XMLHttpRequest) { 
                xmlhttp = new XMLHttpRequest(); 
            } else { 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
            } 
            xmlhttp.open("GET", whichQ, false); 
            xmlhttp.send(); 
            xmlDoc = xmlhttp.responseXML; 

            var a = xmlDoc.getElementsByTagName("a");
            var a2 = $(a).text();
            var b = xmlDoc.getElementsByTagName("b");
            var b2 = $(b).text();
            var c = xmlDoc.getElementsByTagName("c");
            var c2 = $(c).text();
            var d = xmlDoc.getElementsByTagName("d");
            var d2 = $(d).text();

            $('.label').fadeOut(350);
            $('.cu-mid','.cuboid.'+'green1').animate({ height: a2   }, 550);
            $('.cu-mid','.cuboid.'+'green2').animate({ height: b2   }, 550);
            $('.cu-mid','.cuboid.'+'green3').animate({ height: c2   }, 550);
            $('.cu-mid','.cuboid.'+'green4').animate({ height: d2   }, 550, function() {
                $('.cu-mid').animate({
                    height: '+='+50
                }, 550, function() {
                    $('.label1').html(a2+'%');
                    $('.label2').html(b2+'%');
                    $('.label3').html(c2+'%');
                    $('.label4').html(d2+'%');
                    $('.label').fadeIn(350);
                }); 
            });
        }

$(document).ready(function() {
   runQuiz('question1.xml');
});

answered Dec 10, 2010 at 15:29

Barrie Reader

10.7k11 gold badges77 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Paulukonis Over a year ago

So the solution is to use an ActiveX object when in IE? (ie, feature detection)

Barrie Reader Over a year ago

Indeed, it seemed to make more sense to have the entire function as non-jQuery

Michael Paulukonis · Accepted Answer · 2010-12-10 16:36:34Z

0

There are differences in how to best obtain an xmlHttpRequest object in Internet Explorer versions.

See MSDN notes on XMLHttpRequest Object

answered Dec 10, 2010 at 16:36

Michael Paulukonis

9,1615 gold badges52 silver badges69 bronze badges

Collectives™ on Stack Overflow

Parsing XML with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related