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 :-)