Question

this should be a simple question, but the answer has eluded me for some time now. I seem to have an error in this code, either a scripting typo, or an error in my logic. Could you kindly clarify my problem?

Here’s the code:

function GetQuestion() {
        $.ajax({
            type: "GET",
            url: "questions.xml",
            dataType: "xml",
            success: function(xml) {
                x = 0;
                x = $(xml).find('Question').length;

                var questionID = $.random(x);

                $(xml).find('Question').each(function(){
                    if(this.ID == questionID) {
                        var text = $(this).find('BODY').text();
                        $('#questionBody')[0].innerHTML = text;
                    }
                }); //close each
            } //close success
        });//close ajax
    }; //close function GetQuestion

It’s meant to read in an XML file, search it for a specific item with a random ID, and plug the contents of BODY into a <p> I have in my HTML file. However, it isn’t working as expected. Where have I made an error?

Thanks, Elliot Bonneville

Answer 1

This is just a general observation and not really an answer, but it may help you in the future:

//notice that this function is much easier to consume in one glance
function GetQuestion() {

    $.ajax({
        type: "GET",
        url: "questions.xml",
        dataType: "xml",
        success: GetQuestionSuccess
    });//close ajax

}; //close function GetQuestion  // <-superfluous semicolon?



//notice that this function is much easier to consume in one glance
function GetQuestionSuccess(xml) {

    //let's quit querying each time we need them
    var questions = $(xml).find('Question');  //bonus, it's a jQuery object!

    //x = 0; // <-unnecessary assignment. It gets obliterated on the next line.
    x = questions.length; //the count of all "Question"s found

    var questionID = $.random(x);

    //but wait, read my next comments below
    questions.each(function(){
        if(this.ID == questionID) {
            var text = $(this).find('BODY').text();
            $('#questionBody')[0].innerHTML = text;
        }
    }); //close each

    //since you seem to be looking for the index questionID of all the questions, 
    //why not jump to that one instead of looping?
    //also, if you only have one "#questionbody" in your document you can do this more "jquery"ish.
    $('#questionBody')[0].innerHTML = questions[questionID].find('BODY').text();

    //only one:
    $('#questionBody').html( questions[questionID].find('BODY').text() );

} //close success

so to clarify :\

//I shredded it down to a reasonable number of lines. Could be shorter still, albeit less readable.
//but I think this is pretty readable.
function GetQuestionSuccess(xml) {

    var questions = $(xml).find('Question');

    var questionID = $.random(questions.length);

    $('#questionBody').html( questions[questionID].find('BODY').text() );

} //close success