표시 로딩 스피너 및 페이지의 다른 동작 방지

Question

나는 asp.net MVC3 웹 응용 프로그램에서 특정 기준을 검색하고 그리드의 검색 결과를 그리드에 표시합니다. 결과를 새 페이지에로드하십시오. 그 사이에 내가 테이블의 행을 클릭하면 테이블 상단에 로딩 이미지가 표시됩니다. 행 선택에 스피너가 표시됩니다.

function onRowSelected(e) { 
    var grid = $(this).data('tGrid'); 
    // populate some data here 
    $("#spinner").show(); 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/Search/GetResults", 
     data: populate the data to be sent, 
     dataType: "text json", 
     success: 
     function (data, textStatus) { 
      if (data != "Success") { 
       ShowError(data); 
      } 
      else { 
       window.location.href = "/Search/Test/"; 
       } 
     }, 
     error: 
     function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Error Occured!"); 

     } 

    }); 
} 

및 회 전자에 대한 코드는 다음과 같습니다

<div id='spinner' style='display:none;'><center><img alt='' src='../../Images/loading.gif' title='Loading...' /><b>Loading...</b></center> </div> 

내 문제는, 사용자가 하나 개의 행을 선택하고 로딩 기호가 표시 될 때, 그는 다른 행을 클릭 할 때. 로드 스피너가 표시되면 사용자가 페이지에서 아무 것도 클릭하거나 선택하지 못하도록하고 싶습니다. 어떤 도움

UPDATE :

내 문제는 페이지 뒤에 사용자가 수 회색으로 표시 될 수 있도록 내가 그것을 오버레이 또는 그 종류의 무언가로 표시 할 ... 로딩 이미지 위치하지입니다 '이 t은

Answer 1

당신은 자바 스크립트 변수를 정의 할 수 있습니다 작동 기본 false으로하지만 회가 표시 될 때 true로 설정하고, 데이터가로드 된 후 false로 다시 설정됩니다있는 bool_spinner을 말한다.

그러면 함수 내에서이 변수를 테스트하여 (onRowSelected 내부와 같은) 회 전자의 상태에 따라 발생하는 상황을 제어 할 수 있습니다.

$("body").click(function(e) { 
    if (bool_spinner) e.preventDefault(); 
} 

편집 : 당신이 페이지를 클릭하면

그런 다음 당신은 아마 반응에서 다른 활성 HTML 요소 방지 (링크 등이 버튼을 제출 양식)을 (검증되지 않은) 같은 것을 사용할 수 있습니다 당신이 할 수있는 당신이 할 수있는, 사실, 당신도 새 스크립트 변수를 설정할 필요가 없습니다 만 직접 test the state하여 회 전자의 :

var target = $(e.target); 
    if (target.is("#tGrid")) { 
     etc.   
    } 

UPDATE : 또한 다음과 같이 필요한 경우 클릭 된 정확히 확인

if ($('#spinner').is(':hidden')) { 
    etc. 
} 

Answer 2

에 한번 당신의 #spinner에 CSS 스타일을 추가 (높이와 너비 속성이 필요하지 않을 수) 아무것도 선택

#spinner { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 99999; // puts your div on top on others 
} 

Answer 3

그냥 CSS를 추가

#spinner 
    { 
     background: url("image") repeat scroll #AAA; 
     opacity: 0.3; 
     height: 100%; 
     left: 0; 
     position: absolute; 
     top: 0; 
     width: 100%; 
     z-index:2000; 
    } 

희망이