Barrie Reader
Barrie Reader

Reputation: 10713

Optimising my Javascript/jQuery XML function

I have the following XML file:

<?xml version='1.0' encoding='utf-8'?>
<Answers>
    <Question1  q="What is your favourite colour?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>purple</a2>
        <a3>Green</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="1">0</c>
        <d value="0">0</d>
    </Question1>
    <Question2  q="What is the colour of the grass?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>Green</a2>
        <a3>Purple</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="1">0</b>
        <c value="0">0</c>
        <d value="0">0</d>
    </Question2>
    <Question3  q="What is the average air speed of an unladen swallow?&lt;br /&gt;">
        <a1>10mph</a1>
        <a2>15mph</a2>
        <a3>30mph</a3>
        <a4>European or African swallow?</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="0">0</c>
        <d value="1">0</d>
    </Question3>
</Answers>

And I am parsing it with the following code:

function runQuiz(whichQ) {
            if (window.XMLHttpRequest) { 
                xmlhttp = new XMLHttpRequest(); 
            } else { 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //If browser == IE, get ActiveX object
            } 
            xmlhttp.open("GET", whichQ, false);  //Open the file using the GET routine
            xmlhttp.send();  //Send request
            xmlDoc = xmlhttp.responseXML;  //xmlDoc holds the document information now

            var atext,btext,ctext,dtext = 0;

            $(xmlDoc).find("Question1").each(function() {           
                var a = xmlDoc.childNodes[0].children[0];

                $('#form').prepend( $(xmlDoc).find("Question1").attr('q') ); //Append Question

                $(a).find("a1").each(function() {
                    $('#form').append('<input type="radio" name="answer1" class="a1" value="15mph"> 15mph<br />');
                    atext = $(this).parent().children('a').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a2").each(function() {
                    $('#form').append('<input type="radio" name="answer2" class="a2" value="20mph"> 20mph<br />');
                    btext = $(this).parent().children('b').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a3").each(function() {
                    $('#form').append('<input type="radio" name="answer3" class="a3" value="15mph"> 30mph<br />');
                    ctext = $(this).parent().children('c').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a4").each(function() {
                    $('#form').append('<input type="radio" name="answer4" class="a4" value="eurofrican"> European or African Swallow?<br />');
                    dtext = $(this).parent().children('d').text();
                });

                $('.label, .cu-mid p').fadeOut(150); //Fade out the letters on the bars and the overhead labels
                $('.cu-mid','.cuboid.'+'green1').animate({ height: atext*2 }, 550,'easeOutBounce'); //animate 1
                $('.cu-mid','.cuboid.'+'green2').animate({ height: btext*2 }, 550,'easeOutBounce'); //animate 2
                $('.cu-mid','.cuboid.'+'green3').animate({ height: ctext*2 }, 550,'easeOutBounce'); //animate 3
                $('.cu-mid','.cuboid.'+'green4').animate({ height: dtext*2 }, 550,'easeOutBounce', function() { //animate 4 then...
                    $('.label1').html(atext+'%'); //Set all four labels
                    $('.label2').html(btext+'%');
                    $('.label3').html(ctext+'%');
                    $('.label4').html(dtext+'%');
                    $('.label, .cu-mid p').fadeIn(150); //Fade it all back in
                });
            });
        }

So my question is: Is there a better/more efficient/elegant way of doing this?
I am iterating through the XML document and retrieving the child nodes of other elements.

Any and all ideas welcome! :D

Upvotes: 1

Views: 201

Answers (2)

gertas
gertas

Reputation: 17145

  1. $(a), $('#form') is called multiple times - use variables.
  2. var a = xmlDoc.childNodes[0].children[0] called multiple times - why?
  3. Do you need these animations?!
  4. Generally you append some info as input tags with hardcoded text. Why you don't use text from XML?
  5. This code is binded to data too much. What if there are 5 questions? If you have control over this XML I would suggest redesign.

Upvotes: 3

Hersheezy
Hersheezy

Reputation: 1234

As for simplicity, if you are using jQuery might as well use the $.get() instead of XMLHttpRequest directly: http://api.jquery.com/jQuery.get/

Upvotes: 1

Related Questions