How to create event triggered after a some ajax calls completed?

Question

Please, help me create right event for my situation. I believe there is true way to do it, without any counters (like this: How to know when all ajax calls are complete)

HTML:

<ul id="links">
    <li><a href="1.html">What is Yoda's first name?</a></li>
    <li><a href="2.html">Why does Padme die?</a></li>
    <li><a href="3.html">Who is Darth Rage?</a></li>
</ul>
<div id="content"></div>

jQuery:

$('#links a').each(function (index, el) {
    url = $(el).attr('href');
    $('<div class="article" />').appendTo('#content')
        .load(url, function(){
            filterOneArticle(this);
        });
});

// I want this function run after all articles will be loaded and filtered 
$.bind('yepAllArticlesHaveBeenLoaded', filterAllArticles);

filterAllArticles = function() {};
filterOneArticle = function(el) {};

Answer 1

There an ajaxStop global event for this:

$(document).ajaxStop(filterAllArticles);

To unbind it so it doesn't run when the next ajax batch finishes (if there is any more ajax activity later), you can just call .unbind() in your filterAllArticles method:

$(document).unbind("ajaxStop", filterAllArticles);

Answer 2

jQuery supports this behavior. you can use jQuery to do the ajax call as show below. this method has two call back functions for success and for failure.

function loadData()
{
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: 'methodurl',
        success: methodSuccedded,
        error: methodFailure
    });
}

function methodSuccedded()
{}

function methodFailure()
{}