Problem with undefined variable

Question

I am trying to run this:

function loadApp() {
    var content = getContent("content.xml");
    createMap(content);
}

function getContent(file) {
    $.ajax({
        type: "GET",
        url: file,
        dataType: "xml",
        success: parseXml
    });

    function parseXml(xml) {
        var content = [];
        $("element", xml).each(function () {
            var var1 = $(this).children("var1").text(),
            content.push(var1)
        });

        return content;
    }
}

    function createMap(content) {
        alert(content);
    }

But when I open the page the alert says my content variable is undefined. getContent() works fine and gives content a string value when I delete createMap(content); from loadApp(). It seems that createMap() is running before getContent() and that is why the variable is not defined yet, any idea why this happens and how can I solve it?

Thanks in advance.

Maybe you should show us getContent() method. Maybe it has a callback. — Raghuram
– Raghuram, Commented Dec 24, 2010 at 5:23
I guess that your getContent function does an asynchronous action (like an Ajax request)... — Christian C. Salvadó
– Christian C. Salvadó, Commented Dec 24, 2010 at 5:23

user113716 · Accepted Answer · 2010-12-24 05:33:19Z

2

I'd assume that getContent() makes an asynchronous AJAX call. If so, the createMap() function is called before the response is received.

If that's the case, I'd modify getContent() function so that you can pass the createMap() function to it, and call it at the right time.

function loadApp() {
    getContent( "content.xml", createMap );
}

function getContent( file, fn ) {
    $.ajax({
        type: "GET",
        url: file,
        dataType: "xml",
        success: parseXml
    });

    function parseXml(xml) {
        var content = [];
        $("element", xml).each(function () {
            var var1 = $(this).children("var1").text(),
            content.push(var1)
        });
          // Call "fn" instead of returning "content"
        fn( content );
    }
}

edited Dec 24, 2010 at 5:33

answered Dec 24, 2010 at 5:26

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VerizonW Over a year ago

Thanks this works! but is there another way for my function to run only when the first one is finished and has returned a value?

user113716 Over a year ago

@VerizonW: The only way would be to set the ajax request to async:false, which is typically a bad idea. Ultimately, your getContent function is going to exit long before the AJAX request returns. Because of this, any code that relies on the response from the AJAX, must wait to run until the response has been received. If createMap is in a scope accessible to getContent, you could get by without passing the function, and just calling it directly in parseXML. But calling it in loadApp() won't work.

Collectives™ on Stack Overflow

Problem with undefined variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related