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.

Answer 1

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 );
    }
}