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 is 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 is not an issue of scope. It is 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 pass 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) {
            // Invoke the callback function, passing the html
            callback(productId, storeId, html);
        }
    });

    // Let the program continue while the html is fetched asynchronously
}

function receivePrice(productId, storeId, html) {
    // Now do something with the returned html
    alert("Product " + productId + " for storeId " + storeId + " received HTML " + html);
}

findPrice(23, 334, receivePrice);

Answer 2

Short answer, you can't, the first 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 a synchronous (non-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: true,
    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 3

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);
});