asked on

Ajax Return Issue

Hi all,

I am trying to return values from an ajax return but am having difficulty, I assume I am missing something regarding the .promise or async of the method.

function addFontField(element) {
    var fonts = runAjax('/Public/AdminServices.asmx/GetFonts', null);
    alert("fonts" + fonts); //is alerting undefined

}

function getFonts() {

    runAjax('/Public/AdminServices.asmx/GetFonts', null)
        .done(
            function (__exists) {

                if (__exists.d) {
                    alert(__exists.d); // alerts the [Object object, Object object] array as expected
                    return __exists.d;
                }
                else {
                   alert(__exists.d);
                   return false;
                }
            }
        )
        .fail(
            function (jqXHR, textStatus, errorThrown) {
              alert(errorThrown + ':' + textStatus + ':' + jqXHR.responseText);
              return false;
            }
        );

}

function runAjax(webmethod, fields) {

    //stringify passed field array
    if (fields !== null) {
        var jsonObject = {};

        for (var i = 0; i < fields.length; i++) {
            jsonObject[fields[i].fieldname] = fields[i].fieldtext;
        }

        return $.ajax({
            type: "POST",
            url: webmethod,
            data: JSON.stringify(jsonObject),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
    }
    else {
        return $.ajax({
            type: "POST",
            url: webmethod,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
    }  
}

Open in new window

Now I am returning a List<KeyValuePair<String, String>> from my c# function. It appears to be getting to the .success method, but when i return it to the var in getfonts() it is undefined at this point?

guru_sami

I think your alert("fonts" + fonts) is executed even before the ajax call is finished.
You can test it by setting changing your async call to sync.

pass async:false to your .ajax method.

If you get the values with above setting, it means you will have to rethink your code flow...

flynny

ASKER

Hi guru.

I did try adding this (although I would rather not set async false) but got the same behaviour. Do I not cover for this with my runajax method? As u thought I was implementing a promise with this code

SOLUTION

mccarl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Miguel Oz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

flynny

ASKER

Hi all,

thanks for the help. I have the following code;

function addFontField(element) {

    runAjax('/Public/AdminServices.asmx/GetFonts', null)
    .done(function (fonts) {
        alert(fonts);
        alert(Object.keys(fonts).length);

        var html = "<ul class='fontList'>";

        for(var i=0; i<fonts.length; i++)
        {
            html += "<li data-url='" + fonts[0][0] + "'>" + fonts[0][1] + "</li>";
        }

        html += "</ul>";
    });
}

Open in new window

now the first alert is returning Object object and the second alert is giving 1? From testing server side I am sending back

List<KeyValuePair<String, String>>

with 2 rows in it? Do I need to convert the return to an array?

flynny

ASKER

Ok,

after googling I apologise i access the .d for return data;

However, I am facing a further issue. How do I access the string in the array as

        for(var i=0; i<fonts.d.length; i++)
        {
            html += "<li data-url='" + fonts.d[i][0] + "'>" + fonts.d[i][1] + "</li>";
        }

Open in new window

is returning undefined for both elements?

mccarl

Try this...

        for(var i=0; i<fonts.d.length; i++)
        {
            html += "<li data-url='" + fonts.d[i]['Key'] + "'>" + fonts.d[i]['Value'] + "</li>";
        }

Open in new window