несколько div ajax load

Question

У меня есть несколько divs на странице, содержимое которой загружается через ajax. Я хотел бы показать загрузочный gif, который делает следующее, в основном ajax_load_comments и pics - это divs с анимированными gif-фонами (в комментариях и контейнерах pics соответственно), которые отображаются на ajaxStart и скрываются на ajacstop.

Проблема в том, что они оба отображаются независимо от того, какой контейнер обновляется. Как я могу привязать их к ajaxStart конкретного контейнера? Мне нравится привязка одного времени в основном файле js, вместо того, чтобы делать несколько привязок на разных страницах.

$("#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. 
      }); 
    }); 

Хорошо, вот что я делаю сейчас, но я действительно не вижу загрузочный 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 за путаницу:

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

Это использует closest путешествовать вверх DOM и найти загрузки DIV и показать его. Обратный вызов ajax скрывает его. Если вы хотите иметь независимый статус для разных вызовов, вам нужно управлять ими вручную.

Это предполагает, что вы положите загрузку дивы в разметке и скрыть их с помощью CSS, такие как

<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> 

Если вы действительно хотите создать элементы вручную:

$('.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; 
     });