CODEWITHSUNDEEP
javascriptjqueryajaxasynchronous
TWGerard
TWGerard

Reputation: 895

Double Asynchronous AJAX Function

So I am trying to write a javascript script to dynamically load pages on my site without refreshing the page. Basically I have a function which fades out the content div, loads the new content, switches the content, then fades it in. The content is loaded using an asynchronous AJAX request, which on success calls the function that fades the content in. The fadein function should not run until the load function AND the fadeout function are both done. I want the page to be loading the whole time the content is fading out, but right now my fading animation is frozen. I've tried a bunch of different ways to figure this out but nothing is working so far...

Any ideas?

Upvotes: 4

Views: 695

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

This is just a matter of waiting for two events to complete and, when they're both complete, taking action. See my answer to this other question. Basically:

Have a flag for each event, initially false. Hook the two events in question (the completion callback on the animation, and the ajax success). Each event sets its flag and calls a function. That function checks the flags: If both are set, it does something (in your case, sets the new content). See the link for a code example.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707158

You just need to set a flag and have both completion functions check to see if both events are done. Whichever completion function finds both are done, triggers the next action.

You haven't give us any specifics of your code, but here's the general idea:

function loadNewPage(args) {

    var fadeDone = false;
    var ajaxData;

    function processAjaxDataWhenReady() {
        // if both have completed, then process the ajaxData and start the fadeIn
        if (fadeDone && ajaxData) {
            // process the ajaxData here
            $("#myContent").fadeIn();
        }
    }

    // start the fadeOut
    $("#myContent").fadeOut(function() {
        fadeDone = true;
        processAjaxDataWhenReady();
    });

    // start the ajax call
    $.ajax({...}, function(data) {
        ajaxData = data;
        processAjaxDataWhenReady();
    })

}

Upvotes: 1

David
David

Reputation: 218808

I have a site which does something similar. The function to slide out, replace content, and slide in is as follows:

var loadAnAjaxArticle = function (url) {
    var removeParentArticle = function () {
        // I don't like doing this, but so far haven't found a
        // particularly elegant way to replace the article
        // when calling load(), only append it.
        $('article').first().html($('article').last().html());
    };

    var showArticle = function (response, status, xhr) {
        if (status == "error") {
            $('article').first().html('<h2>There was an error processing your request.</h2>');
            $('article').first().slideDown('slow');
        } else {
            removeParentArticle();
            $('article').first().slideDown('slow');
        }
    };

    var loadArticle = function () {
        $('article').first().load(url + ' article', showArticle);
    };

    $('article').first().slideUp('slow', loadArticle);
}

Basically, it calls .slideUp to hide the content, providing a call-back to another function. That function calls .load to refresh the content, providing a call-back to another function. That function does a little manipulation of the DOM to make it look right (it's early in development, I haven't made it more elegant yet), and calls .slideDown to show the content again.

This is easy to do in this case because each function I'm using accepts a call-back. If the functions you're using have the same capability, you should be able to chain them in this manner.

Upvotes: 1

Related Questions