ajax 호출을하고 응답을 기다리고 페이지를 차단할 때 스피너 표시

Question

응답에서 파트를로드하기 위해 여러 개의 아약스 호출이있는 페이지가 있습니다 ... 이제 해당 파트의 스피너를 표시해야합니다. 어떤 콘텐츠를 기다리는 아약스 호출을 만들고 있는데 ... 어떻게하면 아약스 호출을하고 페이지 배경을 차단하고있는 부분에 대한 선택기로 매개 변수를 취할 일반적인 메서드를 사용할 수 있습니까?

제안과 도움에 감사드립니다. 그것에 대해

Answer 1

내 코드 : 그것은 부모 요소 (CSS에서 배경 스피너 이미지와 함께 설명) 클래스 스피너를 추가

$.fn.ajaxConvertLink = function() { 
    $(this).click(function() { 
     var wrap = $(this).parent(); 
     if (!wrap.hasClass('spinner')) { 
      wrap.addClass('spinner'); 
      $.ajax({ 
       type: 'GET', 
       url: $(this).attr('href'), 
       success: function(data) { 
        $('#content_for_layout').html(data); 
       }, 
       complete: function() { 
        wrap.removeClass('spinner'); 
       } 
      }); 
     } 
     return false; 
    }); 
}; 

(하지만 easly 변경 될 수는 a 자체 또는 완전히 다른 요소를 변경하기)

<a href="/foo/bar" id="xxx'>YYY</a> 

실행 :

$('#xxx').ajaxConvertLink(); 

01,

Answer 2

jQuery.ajax 메소드를 사용하여 프록시를 작성할 수 있습니다. 요청이 완료되면 우리는 내용을로드하는 요소에 대한 몇 가지 간단한 마크 업을 (다른 곳 스타일 수) 추가 할 것, 다음에서 responseText와 마크 업을 대체 :

jQuery.fn.extend({ 

    // usage: $(<selector>).spinnerload(); 
    spinnerload: function(url, options) 
    { 
     var self = this; 
     var options = options || {}; 
     var success = options.success || function() {}; 

     options.success = function(responseText, status, jqXHR) 
     { 
      self.html(responseText); 
      success(responseText, status, jqXHR); 
     } 

     self.html('<div class="loading"></div>'); 
     jQuery.ajax(url, options); 
    } 

});