Can't pass data to function (jQuery)

Question

I'm trying to successfully pass the result to another function and it's simply returning an undefined value:

function tagCustomer(email, tags) {
   var o = new Object();
   o.tags = tags;
   o.email = email;
   o.current_tags = getCustomerTags(email);
   o.new_tags = tags;
   console.log(o);
   return true;
}

function returnData( data ) {
    return data;
}

function getCustomerTags(email) {
   $.ajax({
      url: "xxx.io/index.php",
      type: "POST",
      dataType: "json",
      data: {email: email, "action": "getCustomerTags"},
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      success: function (data) {
      returnData( data );
         return data;
      }     
   });
}

o.current_tags should get the result of getCustomerTags.

If you add `async: false,` to your AJAX options then this would work exactly how you think it should. Otherwise you need to get into promises and callbacks and stuff — MonkeyZeus, Mar 09 '14 at 18:08

dfsq · Answer 1 · 2014-03-09T18:57:58.263

1

You should change getCustomerTags to something like this since it makes an asynchronous request:

function getCustomerTags(email) {
    return $.ajax({
        url: "xxx.io/index.php",
        type: "POST",
        dataType: "json",
        data: {
            email: email,
            action: "getCustomerTags"
        },
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
    });
};

and then use it like this:

getCustomerTags(email).done(function(data) {
    console.log(data)
});

You normal approach will not work here, because you try return before response comes back from server. Instead you use callback function or promises.

edited Mar 09 '14 at 18:57

answered Mar 09 '14 at 18:07

dfsq

191,768
25
236
258

success() is deprecated, you should use `.done()` – A. Wolff Mar 09 '14 at 18:48
@A.Wolff Good point, thank you! – dfsq Mar 09 '14 at 18:58

score -1 · Answer 2 · answered Mar 09 '14 at 18:02

-1

You are dependent on ajax response to return data from the function. But ajax by default is asynchronous and does not wait for the server response. therefore your function does not return anything.

answered Mar 09 '14 at 18:02

Shovan

185
7

Shay Elkayam · Accepted Answer · 2014-03-09T18:25:50.047

Try this (It's not good for UI, but with your current code it will work, also, look at the "BETTER PRACTICE" on the bottom of my answer):

function getCustomerTags(email) {
    var result = null;
    $.ajax({
        url: "xxx.io/index.php",
        type: "POST",
        dataType: "json",
        async: false,
        data: {
            email: email,
            "action": "getCustomerTags"
        },
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        success: function (data) {

            result = data;
        }

    });
    return result;
}

The reason your code didn't work, is that the $.ajax success function is returning the data var, but getCustomerTags isn't returning anything. Also, pay attention to the "async: false", because if you use it as async, the function will return null because it will return before the ajax completes.

BETTER PRACTICE
The ajax function has a callback (success), USE IT! design your code not as a method waiting for the ajax request result, but as an ajax request that does something upon it's completion!

EXAMPLE

function tagCustomer(email, tags, data) {
   var o = new Object();
   o.tags = tags;
   o.email = email;
   o.current_tags = data
   o.new_tags = tags;
   console.log(o);
   return true;
}

function getCustomerTags(email, tags) {
   $.ajax({
      url: "xxx.io/index.php",
      type: "POST",
      dataType: "json",
      data: {email: email, "action": "getCustomerTags"},
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      success: function (data) {
          tagCustomer(email, tags, data);
      }     
   });
}

If you have any further questions, don't hesitate to comment.

`async:false` is bad because it locks up the browser, and I've never seen a good reason to use it. — Jason P, Mar 09 '14 at 18:06
I know, this is why I've added the "better practice" section on bottom of my answer. — Shay Elkayam, Mar 09 '14 at 18:07
This worked, thank you. Is this the correct way to do this though or should there be another function to pass the data w/o having to use async -- Update: Sorry I didn't see above, how would I apply a more correct way to my code? — user3399125, Mar 09 '14 at 18:08
@user3399125 look at my updated answer. The good way is to call the ajax and then invoce whatever function upon its completion — Shay Elkayam, Mar 09 '14 at 18:09
@user3399125, you can look at the code on the end of my answer. — Shay Elkayam, Mar 09 '14 at 18:19

Can't pass data to function (jQuery)

3 Answers3