여러 div 아약스로드

Question

콘텐츠가 아약스를 통해로드되는 페이지에 여러 div가 있습니다. 다음을 수행하는 로딩 gif를 보여주고 싶습니다. 기본적으로 ajax_load_comments와 pics는 ajaxStart에 표시되고 ajacstop에서 숨기는 애니메이션 gif 배경 (주석 및 사진 컨테이너에 각각 있음)이있는 div입니다.

업데이트 할 컨테이너에 관계없이 둘 다 표시되는 문제가 있습니다. 특정 컨테이너의 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; 
    }); 

이것은 DOM을 여행하고 로딩 사업부를 찾아서 보여 closest를 사용합니다. Ajax 콜백은 그것을 숨 깁니다. 여러 통화에 대해 독립적 인 상태를 찾고 있다면 수동으로 관리해야합니다. 이 마크 업으로로드 된 div를 넣어 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; 
     });