Html return from .ajax call

Question

I get undefined for some reason when I try to return html via a callback function:

function getDataFromUrl(urlWithContent) { // jQuery async request $.ajax( { url: urlWithContent, dataType: "html", success: function(data) { return $('.result').html(data); }, error: function(e) { alert('Error: ' + e); } }); } 

I know that I get the data back, I see this in firebug in the response, and also when I warn the data, I see that the contents of the entire page appears in the warning window.

When I call my function, I do the following:

 var divContent = getDataFromUrl(dialogDiv.attr("href")); if(divContent) dialogDiv.innerHTML = divContent; 

when I warn divContent (before the if statement), I get undefined. Maybe I'm just mistaken in how I return the data?

I also tried just to return the data; The same thing, I get undefined after calling this method when setting my variable.

Updated for replies:

Tried this while still getting undefined:

 function getDataFromUrl(urlWithContent, divToUpdate) { $.ajax( { url: urlWithContent, aSync: false, dataType: "html", success: function(data) { divToUpdate.innerHTML = data; }, error: function(e) { alert('Error: ' + e); } }); } 

I called it from another function, for example:

 var divContent = ""; if (dialogDiv.attr("href")) { getDataFromUrl(dialogDiv.attr("href"), divContent); } 

Answer 1

You cannot return data from a callback - because there is no guarantee that the data will be returned back from the function at the time the function exits (since this is an asynchronous call.)

What you need to do is update the content in the callback, for example:

 success: function(data) { $('#dialogDiv').html(data); }, 

where your DIV dialog is attached id="dialogDiv" .

I think you can also change your function so that the object is updated when the call completes as follows:

 function getDataFromUrl(urlWithContent, divToUpdate) { // jQuery async request $.ajax( { url: urlWithContent, dataType: "html", success: function(data) { divToUpdate.innerHTML = data; }, error: function(e) { alert('Error: ' + e); } }); } 

Then call it like this (where dialogDiv is the object representing the DIV to update, as in your example.)

 getDataFromUrl(dialogDiv.attr("href"), dialogDiv); 

Answer 2

Ajax call is performed asynchronously. Therefore, your function returns (dropping from the end of the block) until your ajax call completes. You have two ways to handle this. Add the aSync: false parameter to make the ajax call work synchronously or use your function callback, which can be executed when the ajax call ends. I would prefer the latter.

 function setDataFromUrl(urlWithContent,callback) { // jQuery async request $.ajax( { url: urlWithContent, dataType: "html", success: function(data) { callback(data); }, error: function(e) { alert('Error: ' + e); } }); } setDataFromUrl(dialogAnchor.attr("href"), function(data) { dialogDiv.html(data); }); 

or even better if you do not use this code in many places:

 var dialogDiv = $('div.dialog'); var dialogAnchor = dialogDiv.find('a'); // jQuery async request $.ajax( { url: dialogAnchor.attr('href'), dataType: "html", success: function(data) { dialogDiv.html(data); }, error: function(e) { alert('Error: ' + e); } }); 

Answer 3

Why aren't you trying to do this:

 function getDataFromUrl(urlWithContent) { // jQuery async request $.ajax( { url: urlWithContent, dataType: "html", success: function(data) { $('#dialogDiv').html(data); }, error: function(e) { alert('Error: ' + e); } }); } 

And just call the function and do not assign it to any variable.

NTN