Question

I have a page where the visitor initiates a function that executes click() on numerous elements throughout the page. Each click() in turn causes data to load from the server and display throughout the DOM.

What is the best way to see if each particular element has finished loading data? Suppose my method of testing loaded vs not loaded is “elementAlpha”.length: 1 == NOT loaded, else OK.

EDIT: Once all my data loads, I want the page to automatically execute another function without any further user input – which is why I need to automate the test for all elements before executing said function. So my end game is:

user executes clickAll()

function clickAll:
(1) click click click…
(2) has everything finished loading? NO->keep waiting, YES-> execute nextStep()

I understand using event listeners is the way to go, but I cannot seem to figure that out (looping the wait, according to my CPU fan, is the wrong way to go).

Answer 1

Well you could enclose your loading elements in an .ajaxComplete()

$('.log').ajaxComplete(function() {
$(this).text('Triggered ajaxComplete handler.');
});

Thus you trigger the behavior of your extra function when all ajax events are done on a specific container/selector.

EDIT:

In this case you can still make use of jQuery.ajaxStop(). It will fire when all your ajax events have completed.

http://api.jquery.com/ajaxStop/

$('.log').ajaxStop(function() {
$(this).text('Triggered ajaxStop handler.');
});