Check if jquery (or ajax) function is done

Question

I am currently running this code:

$("document").ready(function() {
    $(".tableCourses td:first").trigger('click');
    setTimeout(function() {
        $(".tableTutors tr:eq(1) td:eq(0)").trigger('click');
        setTimeout(function() {
            $(".tableForms tr:eq(1) td:eq(0)").trigger('click');
            setTimeout(function() {
                $(".tableDivision tr:eq(2) td:eq(3)").trigger('click');
            }, 800);
        }, 700);
    }, 600);
});

What this basically does is activate my onclick events for every first cell of every table I have.

Don't judge.. It's what I need. The setTimeout is kind of ugly, and it only works half of the time.

The problem is that every table has to be loaded with ajax, which can take some time. When I use this code:

$("document").ready(function() {
    $.when($(".tableCourses td:first").trigger('click')).then(function() {
        $.when($(".tableTutors tr:eq(1) td:eq(0)").trigger('click')).then(function() {
            $.when($(".tableForms tr:eq(1) td:eq(0)").trigger('click')).then(function() {
                $(".tableDivision tr:eq(2) td:eq(3)").trigger('click');
            });
        });
    });
});

the page only executes the first click handler, which is loading the next table. Am I using $.when and $.then wrong? Is my syntax wrong?

I normally never touch jquery or ajax, so I'm kind of in the dark.

Another note: the first click has to load two tables from two seperate php pages, so that one takes longer.

EDIT : I just realised that the $.when and $.then just work for the click activation, not the entire ajax loads. Any way to detect when those are done?

EDIT 2 : This is the onclick event, it is almost the same for every click:

<script>
    function courseToTutor(id) {
        var clickedCourse = document.getElementById("course" + id).value;
        $.post('loadTutors', {postname: clickedCourse}, function() {
            $('#loadTutors').load('loadTutors.php');
            $('#loadForms').load('loadForms.php');
        });
        ;
        window.scrollTo(0, 0);
    }
</script>

It is complicated.. lol. I need to somehow check when these functions are done, before I start my next onclick event on page load?

Answer 1

jQuery ajax has callbacks for done , error and always .

Check out the docs

These functions are activated when call is ended successfully, with error, or eitherway (respectively).

Answer 2

you can use promise

var promise = $.ajax({
  url: "/ServerResource.txt"
});

promise.done(successFunction);
promise.fail(errorFunction);
promise.always(alwaysFunction);

kindly check for clear explanation of making-promises-with-jquery-deferred

Answer 3

In order for then to be triggered you need to use a function that returns an appropriate response. When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by jQuery.ajax() is a Promise-compatible object. Trigger does not return a Promise-compatible, so you should manually return a success Promise-compatible object. For example:

var myResponse = $.Deferred();
$(".tableTutors tr:eq(1) td:eq(0)").trigger('click');
myResponse .resolve( "clicked" );
$.when(myResponse ).then(function() {
  $(".tableForms tr:eq(1) td:eq(0)").trigger('click')
});
....