Returning the html from .ajax call

Question

I\'m getting undefined for some reason when I try to return the html via the callback function:

function getDataFromUrl(urlWithContent)
{  
    // jQuery asy         


        

Answer 1

Why dont you try 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 not assign it to any variable.

HTH

Answer 2

You cannot return data from the callback - because there's no guarantee that the data will have been returned back from the function at the time the function exits (as it's an asynchronous call.)

What you have to do is update the content within the callback, like:

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

where your dialog DIV has id="dialogDiv" attached to it.

I think you can also modify your function to take the object to update when the call completes like so:

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 so (where dialogDiv is the object representing the DIV to update like in your example.)

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

Answer 3

The ajax call runs asynchronously. Therefore your function returns (by dropping out of the end of the block) before your ajax call completes. You have two ways to handle this. Add the aSync: false option to force the ajax call to run synchronously or use a callback to your function that can be executed when the ajax call completes. I'd 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, unless you're sharing this code in lots of 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); 
    } 
});