title: jQuery display server realtime response text while waiting ajax to finish
body: <p>I'm trying to create a function to display server response while waiting the ajax to finish, the case is like this:</p>
  
  <ol>
  <li>I checked several checkboxes, let's say it 10 checkboxes</li>
  <li>Submit button is clicked and ajax is triggered</li>
  <li>In the server side, there's a looping to execute every values from checkboxes, and this could take a long time per loop (now there will be 10 loop iterations)</li>
  <li>Now while waiting the ajax to finish, I want to get the response from server (by the loop number), like <code>Getting data 1 of 10, (total) details obtained...</code></li>
  <li>After the ajax done, a response from server will be 'Operation succeeded, redirecting to result page'</li>
  </ol>
  
  <hr>
  
  <p>Currently only other than number 4 working, and my current approach is:</p>
  
  <ol>
  <li>I created 2 functions in CI, function A to loop and do the operation, function B to display the message set inside function A</li>
  <li>I created 2 ajax functions, ajax X and ajax Y. X is used to get json response from B, while Y is used to submit and send the form to A.</li>
  <li>I call ajax X first with setInterval 1 second, this <strong><em>works</em></strong> only once because it gets overridden by the ajax Y as soon as I start it. And when I tried to open function B in new tab (while ajax is still running), it just loading and only show the message after function A/ajax finished. Fortunately in Chrome I got this message while trying to open function B: <code>Waiting for active connection</code></li>
  </ol>
  
  <hr>
  
  <p>So how do I achieve this? Because my client is not an IT based and I want to show some progress text so that he knows how much data are being processed.</p>
  
  <p>By the way currently I use only loading GIF and hide it while the ajax is done.</p>
  
  <p>Any help or clues will be very appreciated, thank you.</p>