title: jQuery.ajax request progress bar
body: <p>Okay, this is the same post as my last post which got downvoted and marked as duplicate. Here's the post again but now with the explaination why the questions from <a href="https://stackoverflow.com/questions/19126994/what-is-the-cleanest-way-to-get-the-progress-of-jquery-ajax-request/">What is the cleanest way to get the progress of JQuery ajax request?</a> didn't work.</p>
  
  <p>I have an AJAX request in where I insert stuff in the database and send 2 
  emails. I'd like to show the progress of the AJAX request.</p>
  
  <p>Currently I tried:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      url: '/ajax/submit_order_form.php',
      data: form_data,
      xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                  $('title').html((100 * e.loaded / e.total) + '%');
              }
          });
          return xhr;
      },
      complete: function() { /*here some stuff*/ }
  });
  </code></pre>
  
  <p>However, it doesn't change the title during the request, but after the request it sets it to 100%. Is there any way I can get what I want? So that when 50% in the AJAX file is executed it shows 50% and does the progress like that.</p>
  
  <p>The next thing I tried is:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      url: '/ajax/submit_order_form.php',
      data: form_data,
      chunking: true,
      xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                  var percentComplete = evt.loaded / evt.total;
                  $('title').html(percentComplete);
                  //Do something with upload progress here
              }
          }, false);
  
          xhr.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                  var percentComplete = evt.loaded / evt.total;
                  $('title').html(percentComplete);
                  //Do something with download progress
              }
          }, false);
  
          return xhr;
      },
      complete: function (result){}});
  </code></pre>
  
  <p>However then I only get a 1 in the title, and immediately when I click my button and the AJAX gets called.</p>
  
  <p>Last, I tried the second answer:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      url: '/ajax/submit_order_form.php',
      data: form_data,
      chunking: true,
      complete: function (result) {}
  }).progress(function(e, part) {
      console.log(part);
  }).progressUpload(function()
  {
  
  });
  </code></pre>
  
  <p>However this gives:</p>
  
  <pre><code>jq-ajax-progress.min.js:1 Uncaught TypeError: Cannot read property 'upload' of undefined
  at Function.e.ajax (jq-ajax-progress.min.js:1)
  at a.validator.submitOrderForm (checkout.js:108)
  at d (jquery.validate.min.js:4)
  at HTMLFormElement.&lt;anonymous&gt; (jquery.validate.min.js:4)
  at HTMLFormElement.dispatch (jquery.min.js:3)
  at HTMLFormElement.r.handle (jquery.min.js:3)
  </code></pre>
  
  <p>I tried a lot of things already but none seem to work.</p>