Prevent method from returning 'undefined'

Question

I'm new to callbacks and trying to get this working. I don't want my getCustomerIdDescription returning anything to my popover until my post has returned data, but I get an error on the 'callback(supplierId)' line at the bottom that says 'callback is not a function' How do I write my callback so that nothing gets returned from getCustomerIdDescription until I have my post data?

Here is my code

scope.showCustomerIdList = function(value) {
  $('#{0}'.format(value)).popover({
    html: true,
    container: 'body',
    content: function() {
      return scope.getCustomerIdDescription(value);
    },
    title: function() {
      return 'Customer ID - Description';
    }
  }).popover('show');
};

scope.getCustomerIdDescription = function(supplierId, callback) {
  var model = {};
  model.clientId = scope.contextClientId;
  model.supplierId = supplierId;
  $.post(scope.enumControllers.GetCustomerIdsForSupplier, model, function(response) {
    if (response.error == false) {
      var ids = JSON.parse(response.ids);
      var list = '';
      _.each(ids, function(result) {
        list += '<li>' + result.CustomerId + ' - ' + result.CustomerDescription + '</li>';
      });
      return '<ul>' + list + '</ul>';
    } else {
      return "Cound't Fetch Customer Ids";
    }
  }).fail(function() {
    return "Cound't Fetch Customer Ids";
  });
  callback(supplierId);
};

no, I'm a newbie to callbacks. I'm just trying to prevent my function returning undefined before the data comes back! — chuckd, Jul 23 '15 at 17:23
@user1186050 — You can't prevent the function from returning before the Ajax response arrives. Ajax is asynchronous. Hence the name. — Quentin, Jul 23 '15 at 17:25
ok understood, but what do I need to change so that the function doesn't return undefined and only returns after the data has been sent back to the client? — chuckd, Jul 23 '15 at 17:31

score 3 · Answer 1 · answered Jul 23 '15 at 17:16

3

You call:

scope.getCustomerIdDescription(value);

But you define:

scope.getCustomerIdDescription = function(supplierId, callback) {

Since you don't pass it a value, callback is undefined.

Then you:

callback(supplierId);

… without testing to see if callback is a function or not.

Either:

Remove that line or
Wrap it in a test that makes sure a function is passed or
Always pass a function as the second argument when you call getCustomerIdDescription

Incidentally, there isn't much point in passing a callback function there if you call it as soon as the Ajax request is sent. It normally makes more sense to put it inside the callback functions you set up on the request.

answered Jul 23 '15 at 17:16

Quentin

914,110
126
1,211
1,335

if I remove the line 'callback(supplierId)' then the function returns before the post has the data sent back. – chuckd Jul 23 '15 at 17:24
@user1186050 — Yes, but if you don't remove it, then the function throws an error and never returns. See also the last paragraph of the answer which discusses the proper place to have a callback. – Quentin Jul 23 '15 at 17:25
can you please give me an example of what you would modify? I tried removing callback(supplierId) but it still doesn't work. – chuckd Jul 23 '15 at 17:41
http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Quentin Jul 23 '15 at 17:45

score 1 · Answer 2 · edited May 23 '17 at 12:14

Just to make your code work try below approach and for understanding the approach and the concept of Asynchronicity, Please Visit Asynchronicity

scope.showCustomerIdList = function(value) {
 scope.getCustomerIdDescription(value, function(content){
  $('#{0}'.format(value)).popover({
    html: true,
    container: 'body',
    content: function() {
            return content;
    },
    title: function() {
      return 'Customer ID - Description';
    }
    }).popover('show');
 });
}

scope.getCustomerIdDescription = function(supplierId, callback) {
  var model = {};
  model.clientId = scope.contextClientId;
  model.supplierId = supplierId;
  $.post(scope.enumControllers.GetCustomerIdsForSupplier, model, function(response) {
    if (response.error == false) {
      var ids = JSON.parse(response.ids);
      var list = '';
      _.each(ids, function(result) {
      list += '<li>' + result.CustomerId + ' - ' + result.CustomerDescription + '</li>';
      });
      callback('<ul>' + list + '</ul>');

    } else {
      return "Cound't Fetch Customer Ids";
    }
  }).fail(function() {
    return "Cound't Fetch Customer Ids";
  });     
};

Prevent method from returning 'undefined'

2 Answers2