2014-12-04 4 views
-1

jQuery 스크립트가 있습니다. 개념은 버튼을 클릭 할 때 AJAX 함수를 호출하여 번호를 계산하는 것입니다. 특정 검색어의 행 수 그런 다음 호출이 성공하면 jQuery 변수에 행 수가 저장됩니다.취소 버튼을 클릭하여 아약스 통화를 중지 할 수 없습니다.

그런 다음 AJAX 함수를 호출하여 시간당 10 개의 행을 사용하여 서버에서 데이터를 호출합니다.이 과정에서 db에서 일부 데이터를 가져올 때마다 점진적으로 증가하거나 채우는 진행률 막대가 나타납니다. 데이터 청크가 수신되면 전역 배열로 푸시됩니다. 마지막 아약스 호출이 빈 no. 또는 행을 선택하면 프로세스가 종료됩니다.

진행로드 로더와 함께 버튼을 클릭하면 AJAX 프로세스가 종료되어 호출을 중지하고 데이터 테이블에 수신 된 데이터를 표시합니다.

여기,

<script type="text/javascript"> 
var oTable; 
var outer_start_row = 0; 
var outer_limit = 1; 
var final_data = []; 
var cancel = false; 
var total_data = 0; 
$(document).ready(function() { 
    window.prettyPrint() && prettyPrint(); 
    $('#load').click(function() 
    { 
     var v = $('#drp_v').val(); 
     var cnt = $('#drp_cnt').val(); 
     var ctg = $('#drp_ctg').val(); 
     var api = $('#drp_api').val(); 
     var nt = $('#drp_nt').val(); 
     alert("version :"+v+" category :"+ctg+" country :"+cnt); 
     $.post("ajax.php", 
       { 
        'version':v,'category':ctg, 
        'country':cnt,'network_id':nt, 
        'api':api,'func':'total_data' 
       }, 
       function(data) 
       { 
        total_data = data; 
        $("#progress_bar_container").fadeIn('fast'); 
       }); 

     load_data_in_datatable(); 
    }); 
}); 

function stop_it() 
{ 
    cancel == true; 
} 


function load_data_in_datatable() 
{ 
     if(cancel == true) 
     { 
      alert(cancel); 
      return; 
     } 
     else 
     { 
     var v = $('#drp_v').val(); 
     var cnt = $('#drp_cnt').val(); 
     var ctg = $('#drp_ctg').val(); 
     var api = $('#drp_api').val(); 
     var nt = $('#drp_nt').val(); 
     $.post("ajax.php", 
       { 
       'version':v,'category':ctg, 
       'country':cnt,'network_id':nt, 
       'api':api,'func':'show_datatable', 
       'start_row':outer_start_row,'limit':outer_limit 
       }, 
       function(response) 
       { 
        var data = response.data; 
        var limits = response.limits; 
        outer_limit = limits.limit; 
        outer_start_row = limits.start_row; 
        if(data.length > 0) 
        { 
         for(var i = 0; i < data.length; i++) 
         { 
          final_data.push(data[i]); 
         } 
         var current = parseInt(final_data.length); 
         percent_load = Math.round((current/parseInt(total_data))*100); 
         $(".progress-bar").css("width",percent_load+"%"); 
         $(".progress-bar").text(percent_load+"%"); 
         load_data_in_datatable(); 
        } 
        else 
        { 
         create_datatable(); 
         cancel = true; 
         return; 
        } 
       },'json'); 
     }  
} 

function create_datatable() 
{ 
    $("#progress_bar_container").fadeOut('fast'); 
    var aColumns = []; 
    var columns = []; 
    for(var i = 0; i < final_data.length; i++) 
    { 
     if(i>0) 
      break; 
     keycolumns = Object.keys(final_data[i]); 
     for(j = 0; j < keycolumns.length; j++) 
     { 
      if($.inArray(keycolumns[j],aColumns.sTitle)<=0) 
      { 
       aColumns.push({sTitle: keycolumns[j]}) //Checks if 
       columns.push(keycolumns[j]) //Checks if 
      }         
     } 

    } 

    var oTable = $('#jsontable').dataTable({ 
     "columns":aColumns, 
     "sDom": 'T<"clear">lfrtip', 
      "oTableTools": { 
       "aButtons": [ 
        { 
          "sExtends": "csv", 
          "sButtonText": "CSV", 
        } 
       ] 
      } 
    }); 
    oTable.fnClearTable(); 
    var row = [] 
    for(var i = 0; i < final_data.length; i++) 
    { 
     for(var c = 0; c < columns.length; c++) 
     { 
       row.push(final_data[i][columns[c]]) ; 
     } 
     oTable.fnAddData(row); 
     row = []; 
    } 
} 
</script> 

내 스크립트 문제의 취소 버튼을 클릭 할 때 내가 AJAX를 중지 할 수 있다는 것입니다.

답변

0

check link ajax 요청을 중단하는 방법을 설명합니다 (중지/cancle).

Jquery를 사용하면 .abort() 메소드를 사용하여 아약스 요청을 중지 할 수 있습니다.

Aborting an AJAX request

+0

왜 아래로 투표 하시겠습니까? 아약스 요청을 중단하는 것은 jquery meothod입니다. –

+0

방금 ​​링크를 보냈습니다 ..... 중단하는 법을 알고 있습니다 .... 어떻게 작동하는지에 대한 논리를 알고 싶었습니다. – Saswat

+0

괜찮 았지만 질문에 대해서는 언급하지 마십시오. 아약스를 멈추고 싶니? 귀하의 질문을 확인하십시오. –

1
function stop_it() { 
    cancel == true; 
} 

이 기능은 잘못된 것 같다, 대신 그것이 있어야 당신은 변수 취소에 사실를 할당해야하지만 당신은 실수 (/ == 같음) 비교 연산자를 작성했습니다 :

function stop_it() { 
    cancel = true; 
} 

나는 프로세스 사이에서 AJAX를 중지하면서이 함수를 호출한다고 생각합니다.

관련 문제