jQuery.ajax request progress bar

Question

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 What is the cleanest way to get the progress of JQuery ajax request? didn't work.

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.

Currently I tried:

$.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*/ }
});

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.

The next thing I tried is:

$.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){}});

However then I only get a 1 in the title, and immediately when I click my button and the AJAX gets called.

Last, I tried the second answer:

$.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()
{

});

However this gives:

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.<anonymous> (jquery.validate.min.js:4)
at HTMLFormElement.dispatch (jquery.min.js:3)
at HTMLFormElement.r.handle (jquery.min.js:3)

I tried a lot of things already but none seem to work.