jQuery ajax success anonymous function scope

Question

How do I update the returnHtml variable from within the anonymous success function?

function getPrice(productId, storeId) {
  var returnHtml = '';

  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    cache: false,
    dataType: "html",
    success: function(html){
      returnHtml = html;
    }
  });

  return returnHtml;
}

Answer 1

That's the wrong approach. The first A in AJAX is Asynchronous. That function returns before the AJAX call returns (or at least it can). So this isn't an issue of scope. It's an issue of ordering. There are only two options:

1. Make the AJAX call synchronous (not recommended) with the async: false option; or
2. Change your way of thinking. Instead of returning HTML from the function you need to passin a callback to be called when the AJAX call succeeds.

As an example of (2):

function findPrice(productId, storeId, callback) {
  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    cache: false,
    dataType: "html",
    success: function(html) {
      callback(productId, storeId, html);
    }
  });
}

function receivePrice(productId, storeId, html) {
  alert("Product " + productId + " for storeId " + storeId +
    " received HTML " + html);
}

findPrice(23, 334, receive_price);

Answer 2

Your anonymous function there does have access to the returnHtml variable in its scope, and so the code there is actually working as you'd expect. Where you're probably going wrong is in your return statement.

Remember that the A in AJAX stands for asynchronous, which means that it doesn't happen at the same time. For that reason, the line returnHtml = html is actually happening after you call return returnHtml;, so returnHtml is still an empty string.

It's hard to say what you should do to get this working as you want without seeing the rest of your code, but what you could do is add another callback to the function:

function getPrice(productId, storeId, callback) {
  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    cache: false,
    dataType: "html",
    success: callback
  });
}

getPrice(5, 1, function(html) {
    alert(html);
});

Answer 3

Short answer, you can't, the a in ajax stands for Asynchronous, which means the request is still going when you get to the return statement.

You can do it with an async request, but it's generally a Bad Thing

Something like the following oughta return the data.

function getPrice(productId, storeId) {
  var returnHtml = '';

  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: false,
    cache: false,
    dataType: "html",
    success: function(html){
      returnHtml = html;
    }
  });

  return returnHtml;
}

---

BUT

Unless you really really need to be able to use the return value from test straight away, you'll be much better off passing a callback into test. Something like

function getPrice(productId, storeId, callback) {
  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: false,
    cache: false,
    dataType: "html",
    success: function(html){
      callback(html);
    }
  });
}

//the you call it like
getPrice(x,y, function(html) {
    // do something with the html
}

Edit Sheesh, you guys are quicker to say what I said :-)

Answer 4

I'd just like to add, the A in Ajax, it stands for...Asynchronous. I think.