title: Why the Ajax responses are getting mixed up in this case
body: <p>When I click on <code>prev</code> button, I have the following call:</p>
  
  <pre><code>$(document).on('click', '#prev', function(event ) {
      var query=  fecthDocumentData(document_id_prev,'prev');
      query.done(function() {
          $("#BrandNames").trigger('change');
      });
  });
  </code></pre>
  
  <p>Which actually triggers an event on a drop down box:</p>
  
  <pre><code>$("select#BrandNames").change(function() {
      showT1(vendor_brand_id, '');
  });
  
  function showT1(vendor_brand_id, t1categorytext) {
      if(vendor_brand_id)
      {
          var ajaxq = $.ajax({
              type: 'GET',
              url: url + '/OMS/admin/categorylevelservice?vendor_brand_id=' + vendor_brand_id + '&amp;reqstr=' + t1categorytext,
              jsonpCallback: 'jsonCallback',
              dataType: 'jsonp',
              jsonp: false,
              beforeSend: function() {
                  $('#T1').html('&lt;img src="input-spinner.gif" alt="" width="24" height="24"&gt;');
              },
              success: function(response) {
                  displayT1(response, t1categorytext)
              },
          });
      }
  }
  </code></pre>
  
  <p>This is the code for fecthdocument </p>
  
  <pre><code>function fecthDocumentData(document_id, btnname)
  {
  
  return $.ajax({
          type: 'GET',
          url: url + '/OMS/admin/document?document_row=' + document_id + '&amp;btnName=' + btnname,
          jsonpCallback: 'jsonCallback',
          dataType: 'jsonp',
          jsonp: false,
          success: function(response) {
           var res = response;
           var document_id_loc = res.data.document_id;
  
  
             if(document_id_loc)
             {
  
  }
  
  }
  </code></pre>
  
  <p>The problem I am facing is that the two ajax responses are getting mixed up.</p>
  
  <p>Could anybody please let me know how to resolve this??</p>