Search code examples
javascriptjqueryxmlinternet-explorercross-browser

Parsing XML with jQuery


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


Solution

  • 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');
    });