Question

Can someone tell why my object img is not accepting its value outside the ajax call? I’ve also used a constructor function to create the object but that did not work as well. And the xml parsed values work, I’ve tested this. If i move the alert(img.location) inside the success event the correct value will show, but it will not outside the ajax function..

Help please…

function getImage(){
        img = new Object();
        $.ajax({
            type: "GET",
            url: "hvimage.xml",
            dataType: "xml",
            success: function(xmlData){
                var randImageId = Math.floor(Math.random()*3);
                $(xmlData).find("image").each(function(index, e){
                    if(index == randImageId){
                        img.id =  $(this).attr("id");
                        img.location = $(this).find("location").text();
                        img.answer = $(this).find("answer").text();
                    }
                });
            },
            error: function(xmdData){
                alert("error");
            }
        });
        alert("test");
        alert(img.location); //Keep getting undefined here..
    }

Thanks again,

Wenn

Answer 1

Because your AJAX request is asynchronous, so the code that comes after it does not wait for the response before it runs.

Any code that relies on the successful response needs to be placed in, or invoked from within the success: callback.

function getImage(){
    img = new Object();  // 1. create object

      // 2. send request
    $.ajax({
        type: "GET",
        url: "hvimage.xml",
        dataType: "xml",
        success: function(xmlData){

                // 4. response is received, and callback runs
            var randImageId = Math.floor(Math.random()*3);
            $(xmlData).find("image").each(function(index, e){
                if(index == randImageId){
                    img.id =  $(this).attr("id");
                    img.location = $(this).find("location").text();
                    img.answer = $(this).find("answer").text();
                }
            });
        },
        error: function(xmdData){
            alert("error");
        }
    });

      // 3. fire alerts
    alert("test");
    alert(img.location); //Keep getting undefined here..
}