CODEWITHSUNDEEP
javascriptjqueryajaxobject
Wenn
Wenn

Reputation: 349

JavaScript object construction and assignment not working

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

Upvotes: 0

Views: 180

Answers (2)

Tom
Tom

Reputation: 9127

The reason you've having problems is that the code doesn't run in the sequence it seems you think it will.

The success function runs when the async request returns, whereas the last two alerts are triggered immediately after the request is sent. The data you want to use in those last two alerts simply isn't available to the browser yet.

Upvotes: 1

user113716
user113716

Reputation: 322502

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..
}

Upvotes: 6

Related Questions