title: Can't stop ajax call by clicking cancel button
body: <p>I have a jQuery script. The concept is, when I am clicking a button, it's first calling an AJAX function to count the no. of rows from a particular query. Then on successful call it stores the number of rows in a jQuery variable.</p>
  
  <p>Then it calls an AJAX function which runs repeatedly to call data from server with 10 rows per time, during this process there is a progress bar which increases or fills gradually each time some data is fetched from the db. when a chunk of data is received, its getting pushed in a global array. When the last ajax call returns blank no. or rows, then the process terminates.</p>
  
  <p>Besides there is a button along with the progress loader, which when will be clicked, will terminate the AJAX process to stop the call and display the data received till now in a data-table.</p>
  
  <p>Here's my script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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() &amp;&amp; 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 &gt; 0)
                      {
                          for(var i = 0; i &lt; 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 &lt; final_data.length; i++) 
      {
          if(i&gt;0)
              break;
          keycolumns = Object.keys(final_data[i]); 
          for(j = 0; j &lt; keycolumns.length; j++)
          {
              if($.inArray(keycolumns[j],aColumns.sTitle)&lt;=0)
              {
                  aColumns.push({sTitle: keycolumns[j]}) //Checks if
                  columns.push(keycolumns[j]) //Checks if
              }                                  
          }
  
      }
  
      var oTable = $('#jsontable').dataTable({
          "columns":aColumns,
          "sDom": 'T&lt;"clear"&gt;lfrtip',
              "oTableTools": {
                  "aButtons": [
                      {
                              "sExtends": "csv",
                              "sButtonText": "CSV",
                       }
                  ]
              }
      });
      oTable.fnClearTable();
      var row = []
      for(var i = 0; i &lt; final_data.length; i++) 
      {
          for(var c = 0; c &lt; columns.length; c++) 
          {
                  row.push( final_data[i][columns[c]] ) ;
          }
          oTable.fnAddData(row);
          row = [];
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem, is that I can't stop the AJAX when clicking on the cancel button.</p>