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")
}
});
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.
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?
