Ajax loading icon

[zibizibi]

Hi everyone,

Here I have four dynamic lists : http://baiadesign.com/files/tuts/tutorial_01/

The first list CATEGORY1 contains items of the database table CATEGORY1.

Selecting one of those items reloads the second list CATEGORY2 with subcategories belonging to the selected CATEGORY1. I hope that makes sense .. !

And the same with the following lists.

My problems is that I want an Ajax loading icon appearing on all lists below the one the user just selected. If a CATEGORY1 is selected I want a loading icon appearing on CATEGORY2, 3 and 4.

If CATEGORY2 is selected I want a loading icon on CATEGORY3 and 4.

For now I have this code :


$('#category1').ajaxStart(function() {
$('#x2').show();
}).ajaxComplete(function() {
$('#x2').hide();
});

$('#category2').ajaxStart(function() {
$('#x3').show();
}).ajaxComplete(function() {
$('#x3').hide();
});

$('#category3').ajaxStart(function() {
$('#x4').show();
}).ajaxComplete(function() {
$('#x4').hide();
});

It works only when selecting CATEGORY1 and only once !

Any ideas ?