JavaScript not returning value, scope and variable confusion i think?

Question

I'm making an ajax call with JQuery to read some XML and return some data. I successfully found my file, read stuff, and did some alerts and successful found the data i want. I want to now return this data to the function that's calling it, but not sure how.

Here's my function:

function getDialogParams(id, folderName) {

var dialogNode; // set variable here to open scope for return statement

$.ajax({
    type: "GET",
    url: "/" + folderName + "/dialog-params.xml",
    dataType: "xml",
    success: function (xml) {

        alert("champions!"); // runs

        $(xml).find('dialog').each(function () {

            if ($(this).find('id').text() == id) { // finds my node i want
                // runs once
                dialogNode = $(this); // seems like im declaring a new variable instead of assigning my variable i instantiated above?
                alert("width = " + dialogNode.find('width').text()); // alerts proper width
                alert("height = " + dialogNode.find('height').text()); // alerts proper height
                return;
            }

        });
    },
    error: function () { alert("fail whale!") }
});

alert("width2 = " + dialogNode.find('width').text()); // error dialogNode is undefined, wth, i declared this variable up-scope?
return dialogNode; // should be returning same object as above that alerts correct data
}

Then im using this function like this:

var params = getDialogParams(515, "AN0500-ASN"); // get param values

Where am i going wrong? Here's the XML in case someone wants to have it all to debug.

<?xml version="1.0" encoding="utf-8" ?>
<dialogs>
    <!-- SHIPMENT SCREEN -->
    <dialog>
        <id>515</id>
        <width>1000</width>
        <height>700</height>
    </dialog>
    <!-- ORDER SCREEN -->
    <dialog>
        <id>516</id>
        <width>900</width>
        <height>600</height>
    </dialog>
    <!-- CARTON SCREEN -->
    <dialog>
        <id>517</id>
        <width>800</width>
        <height>500</height>
    </dialog>
</dialogs>

Look like that famous AJAX dup http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jan 27 '14 at 23:11

score 0 · Answer 1 · answered Jan 28 '14 at 16:19

Ok, thanks guys. That other post helped. Below is the the answer for my specific case if it helps someone to see my example through to the end.

There were a few options that post provided, i don't fully understand the pros and cons on which was the best solution for me, but using the callback function seemed the easiest for me to wrap my head around, and using the differed method with .done() didn't work because it said my object didn't support that property or method.

So here's my function:

function getDialogParams(id, folderName, callback) {

$.ajax({
    type: "GET",
    url: "/" + folderName + "/dialog-params.xml",
    dataType: "xml",
    success: function (xml) {

        alert("champions!"); // runs

        $(xml).find('dialog').each(function () {
            if ($(this).find('id').text() == id) { // finds my node i want
                return callback($(this));
            }
        });
    },
    error: function () { alert("fail whale!") }
});
}

And here's me calling it:

getDialogParams(515, "AN0500-ASN", function (result) {
    alert("screen width = " + result.find('width').text());
    alert("screen height = " + result.find('height').text());
});

JavaScript not returning value, scope and variable confusion i think?

1 Answers1