CODEWITHSUNDEEP
javascriptjqueryajax
Ed Shee
Ed Shee

Reputation: 971

display contents after ajax load

I have a function which currently calls an ajax request and then I display the contents on my page in the following way:

$.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp',
        success: function (data) {
            //insert data to page
        }

This works fine but I'd like to separate these out into separate functions - one to fetch the data and one to display it. That way I can store the data in a global variable and switch between displaying it and other data without having to call the ajax request every time.

I've looked around but can't find how to wait for the first function's Ajax request to finish before I execute my display function. Anyone able to help?

Thanks

EDIT:

I want to avoid calling the display function in the success because I want this same function to be able to run in the background - storing data for future use. I do - however want to store it in a global variable. Is there a way of "listening" to that variable to detect if "attribute-x" exists yet?

Upvotes: 0

Views: 2194

Answers (2)

Terry
Terry

Reputation: 66228

Acutally, the jqXHR.success() function has been deprecated. $.ajax() comes natively with promise in the form of a deferred object, which you can chain the .done() anywhere in the document to listen to a success call.

// Make AJAX call
var ajaxCall = $.ajax({
    type: 'GET',
    url: dataURL,
    dataType: 'jsonp'
});

// Can be anywhere else (upstream or downstream, doesn't matter)
ajaxCall.done(function(data) {
    console.log(data);

    // Do whatever you want, will be called upon completion of AJAX call
});

The reasons of using deferred objects are simple — you don't have excessive nesting of functions, and you can place the function(s) that deal with AJAX complete anywhere in your code. A few months ago I have written an article on writing AJAX in a clearer, cleaner and more efficient way—would be considered shameless self-plug but I feel it's relevant to your case.

If you want to dynamically vary the URL you are making calls to, simply return the $.ajax() function:

// Make AJAX call
var ajaxCall = function(dataURL) {
    return $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp'
    });
}

// Can be anywhere else (upstream or downstream, doesn't matter)
ajaxCall('/path/to/url').done(function(data) {
    console.log(data);

    // Do whatever you want, will be called upon completion of AJAX call
});

Here's a fiddle, albeit modified to use JSON, that demonstrate the legitimacy of the logic above: http://jsfiddle.net/teddyrised/hw89td47/

Even better: you can make multiple AJAX calls with the same handle, and evaluate them all at the same time using $.when() and $.then():

// Make AJAX call
var ajaxCall = function(dataURL) {
    return $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp'
    });
}

// Can be anywhere else (upstream or downstream, doesn't matter)
var call1 = ajaxCall('/path/to/url/1'),
    call2 = ajaxCall('/path/to/url/2'),
    call3 = ajaxCall('/path/to/url/3');

$.when(call1, call2, call3).then(function(p1, p2 ,p3) {
    console.log(p1.data);
    console.log(p2.data);
    console.log(p3.data);
});

Upvotes: 1

Zze
Zze

Reputation: 18865

If i've understood you correctly, couldn't you just do something such as...

var xContent;

$.ajax({
        type: 'GET',
        url: dataURL,
        dataType: 'jsonp',
        success: function (data) {      
            xContent = data; // this stores the ajax data
            LoadXContent();
        }
});

function LoadXContent(){
    $(".class").html($(xContent).html());
}

Upvotes: 0

Related Questions