Question

I have multiple divs in a page whose content gets loaded via ajax. I would like to show a loading gif that does the following, basically ajax_load_comments and pics are divs with animated gif backgrounds (in comments and pics container respectively), that show up on ajaxStart and hide on ajacstop.

Problem is they both show up regardless which container is being updated. How can I bind them to ajaxStart of a particular container? I like the one time binding in a main js file, rather than doing multiple bindings in different pages.

 $("#ajax_load_pics, #ajax_load_comments").bind("ajaxStart", function(){
        $(this).fadeIn('slow');
        $(this).parent().animate({
            opacity: 0.3
        }, 'slow', function() {
            // Animation complete.
            });

    }).bind("ajaxStop", function(){
        $(this).fadeOut('slow');
        $(this).parent().animate({
            opacity: 1
        }, 'slow', function() {
            // Animation complete.
            });
    });

Ok, well here is what I am doing now, but I don’t really see the loading div.

 $('.pagination a').live("click", function () {
        showLoad($(this).parent());
       /* $.get(this.href, null, function (data) {
            $('#com_prog_loading').fadeOut('slow');
            elem.remove($('#com_prog_loading'));
        }, 'script');*/
        $.get(this.href, null, null, 'script');
        return false;
    });

function showLoad(elem) {
    elem.parent().prepend("<div id='com_prog_loading'></div>");
    $('#com_prog_loading').fadeIn('slow');
}

function hideLoad() {


}

Answer 1

Sry for the confusion:

$('.pagination a').live("click", function () {
        var $loadingDiv = $(this).closest('div.loading').fadeIn(); 
        $.get(this.href, function() {
                            $loadingDiv.fadeOut();
                         }, 'script');
        return false;
    });

This uses closest to travel up the DOM and find your loading div and show it. The ajax callback hides it. If you’re looking to have independent status for different calls, you have to manage them manually.

This assumes you put your loading divs into the markup and hide them via css, such as

<style> div.loading { display: none; } </script>

<div class="pagination">
   <div class="loading" >Loading message or animate gif or something</div>
   <div class="content">Maybe ajax content goes here? not sure about what you're doing exactly</div>
   <a href="url.html">Link</a>
</div>

If you really want to create the elements manually:

$('.pagination a').live("click", function () {
            var $loadingDiv = $('<div>', {
                                     class: 'loading' // be sure to use class, id's are specific to ONE element only
                           }).appendTo( $(this).closet('.pagination') ) // or whatever closest class exists - again, not sure of your markup
                             .html('Loading...'); // but i  think it's just an animated gif, ya?
                             .fadeIn(); 
            $.get(this.href, function() {
                                $loadingDiv.fadeOut('fast', function() {
                                                               $(this).remove();    
                                                           });
                             }, 'script');
            return false;
        });