title: How to properly showing progressbar with ajax php and mysql
body: <p>I am trying to query a large data from the database and I wish to display a progress bar. The code below returns data info from the server but the progress bar just jumps to 100% while the Ajax is still querying data.</p>
  
  <p>I guess the proper way is to fake the progress bar timer or possibly make a timely ajax call eg per seconds to update the progress bar. Can someone help me out with my issue? Thanks</p>
  
  <p>Below is the working code so far</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function (e) {
   function pf(event) {
                                  if (event.lengthComputable) {
  
                                  var percentComplete = Math.round((event.loaded/event.total)*100);
  
                                  $(".progressbar").width(percentComplete + '%');
                                  $(".progressbar").html('&lt;span&gt;' + percentComplete +' %&lt;/span&gt;')
                                  $(".progressbar").html('&lt;span&gt; ' + percentComplete +'% Completed&lt;/span&gt;')
                                  }
                              };
      $("#sForm").on('submit',(function(e) {
          e.preventDefault();
  
  
  
                     $('.progressbar').css('width', '0');
          $.ajax({
  
              url: "qdata.php",
              type: "POST",
              data:  new FormData(this),
              contentType: false,
              cache: false,
              processData:false,
  
                          xhr: function () {
                              var xhr = new window.XMLHttpRequest();
                              xhr.upload.addEventListener("progress", pf, false);
                              return xhr;
                          },
  
              success: function(data)
              {
  
      if(data.trim() == "good"){
  alert('completed now');
  }
              },
              error: function() 
              {
              }           
         });
      }));
  });
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class="progressbar"&gt;&lt;/div&gt;
  &lt;form id="sForm" action="qdata.php" method="post"&gt;
  &lt;div id="resultdata"&gt;&lt;/div&gt;
  
  &lt;input type="submit" value="Submit now" /&gt;
  &lt;/form&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>qdata.php</strong></p>
  
  <pre><code>  // This is just sample db
  
      //dbconfig.php
      $result = $db-&gt;prepare('SELECT fullname FROM users');
      $result-&gt;execute(array());
  
      $count = $result-&gt;rowCount();
  
      while ($row = $result-&gt;fetch()) {
  
      $name=htmlentities($row['fullname'], ENT_QUOTES, "UTF-8");
  
      }
  
  echo 'good';
  </code></pre>