XHR progress not working

Hosting Support
1

This request works correctly, but the element #progress-bar does not change its width at all, although I made sure that the code works in the visual studio code

        $.ajax({
            url: link,
            type: "GET",
            dataType: "html",
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.addEventListener("progress", function(event) {
                    if (event.lengthComputable) {
                        // Problem Is Here
                        $("#progress-bar").css({"width":`${(event.loaded / event.total) * 100}%`});
                    }
                }, false);
                return xhr;
            },
            success: function(data) {
                setTimeout(function(){
                    document.title = `${ $(data).filter("title").text() }`;
                    var parsedData = $.parseHTML(data);
                    var bodyContent = $(data).filter(".body").html();
                    $("body").html(bodyContent);
                },200);
                history.pushState(null,null,link);
            },
            error: function() {
                console.log("Error")
            }
        });
2

Could you please share your site url? So we could better help you :grinning:

Currently I have no idea why this isn’t working, especially that you said it worked in local environment.

Also make sure that it is actually working. I know we have a security system

But mormally ajax shouldn’t be affected…

3

I know what the problem is, the problem is that the event.total value is 0 and I am trying to solve it. Do you have any idea how to solve it?

4

Again, please share your site url, so we can look at the console and source to see whether things are actually good. Sometimes our security system breaks the code (but rare) , and might cause some nasty things.

5

Is it possible the value of event.loaded being 0 is correct? The information about this on MDN suggest to me it basically tells you how much of the data has been downloaded yet. But if the request has been started but the download hasn’t started yet because the request is still being processed on the server, the value of loaded will still be 0.

Do you see in the Network tab in the browser that the download has actually started?