Paging Through XML Data Using jQuery and HTML

Question

I've got an XML file that contains a list of questions. I'd like to load the first question in the list when an HTML page loads and load the answers as radio buttons. When one of the radio buttons is selected, I'd like to display the results as well as a continue button. The continue button would go to the second element in the XML file.

So, I've got the following thus far:

function generateQuestion(i) {
    $(document).ready(function() {
        $.get('quiz.xml', function(d) {
            alert('Loaded XML');
            $(d).find('question').get(0, function() {
                alert('Loaded Question');
                var $question = $(this);
                var questionContent = $question.attr("content");
                $(questionContent).appendTo("#quizQuestion");
            });
        });
    });
}

However, the content from the question is never loaded in the element. It looks like it hangs when I go to get the first element in the document. My guess is that there is no overload to inject the object into the function.

Am I correct? Anyone have any quick resources that shows a basic quiz-like example like I'm looking to generate?

UPDATE: I've updated the code to the following and it seems to get caught on the attribute property:

function generateQuestion(i) {
    $(document).ready(function() {
        $.get('quiz.xml', function(d) {
            var $question = $(d).find('question').get(i);
            var questionContent = $question.attr('content');
            alert(questionContent);
            $(questionContent).appendTo("#quizQuestion");
        });
    });
}

Any ideas?

Answer 1

the get() function returns the non-wrapped set element in this case it would be the xml element.

$.get('quiz.xml', function(d) {
    var question = $(d).find('question :eq(0)');
    var questionContent = question.attr('content');
    alert(questionContent);
    $(questionContent).appendTo("#quizQuestion");
});

the other alternative is to re-wrap the object

$.get('quiz.xml', function(d) {
    var question = $(d).find('question').get(0);
    var questionContent = $(question).attr('content');
    alert(questionContent);
    $(questionContent).appendTo("#quizQuestion");
});

Also, I'm not sure why your including the $(document).ready inside the function call. When are you calling the function. if its after the document load then you don't really need that.