Question

While trying to load content from an xml file using ajax, it shows me “undefined” onload. As soon as I refresh the page the content is displayed.

Here is my code

$.ajax({
        type: "GET",
        url: "xml/FIB.xml",
        dataType: "xml",
        success: function(xml){
            var titletext=$(xml).find('Quiz').children().attr("name");
            $(".title_text").append(titletext);
            $(xml).find('question').each(function(){
                     nooffib=$(this).find("ques").length;

                        for(var a=0;a<nooffib;a++){
                        n=$(this).find('ques').eq(a).text();
                        questionarray[a]=n.replace("[blank]","<input id='"+a+"'type='text' class='blanktextbox' onkeyup='btnvisible()'/>");

                    }
            })
        }
    });     

Answer 1

Perhaps undefined means that the dom element you are referencing has not yet been created when you make your ajax call, after you refresh, the element “#your_selector” will have been created. Try executing when the document is ready or after a certain event, e.g. the click of a button, in other words check if #your_selector has been created before making the ajax call:

$("#your_selector").on("click", function(event){
//execute your ajax call
});

or

$("#your_selector").live("click", function(){
    //execute your ajax call
 });

or

 $(document).ready(function() {
      //execute your ajax call
 });

A full example would be:

function test(){
    $.ajax({
    type: "GET",
    url: "xml/FIB.xml",
    dataType: "xml",
    success: function(xml){
        var titletext=$(xml).find('Quiz').children().attr("name");
        $(".title_text").append(titletext);
        $(xml).find('question').each(function(){
                 nooffib=$(this).find("ques").length;

                    for(var a=0;a<nooffib;a++){
                    n=$(this).find('ques').eq(a).text();
                    questionarray[a]=n.replace("[blank]","<input id='"+a+"'type='text' class='blanktextbox' onkeyup='btnvisible()'/>");

                }
        })
    }
}); 
}

 $("#your_selector").live("click", function(){
    test();
 });