jq ajax xhrfields,Can onprogress functionality be added to jQuery.ajax() by using xhrFields?
This is a bit of a hack of another answer elsewhere on Stack Overflow, but I think answers your question. I have doctored it to my own needs of pumping "streamed" data from the server to a scrollable div (which I can then force to always scroll to the bottom thus showing progress over time and thus not waiting for the entire record set to complete).
The client side code below adds the resulting content to a predefined div with id "scrollable_area" (which can then be scrolled)...
Auto Scroll
var last_response_len = false;
var auto_scroll = null;
var scrollable_area = null;
$().ready(function() {
auto_scroll = document.getElementById("auto_scroll");
scrollable_area = document.getElementById("scrollable_area");
$.ajax("your_api_call.php", {
xhrFields: {
onprogress: function(e) {
var this_response, response = e.currentTarget.response;
if(last_response_len === false) {
this_response = response;
last_response_len = response.length;
} else {
this_response = response.substring(last_response_len);
last_response_len = response.length;
}
scrollable_area.innerHTML += this_response;
if(auto_scroll.checked) {
scrollable_area.scrollTop = scrollable_area.clientHeight + scrollable_area.scrollHeight + 500;
}
}
}
})
.done(function(data) {
console.log("Completed response");
})
.fail(function(data) {
console.log("Error: ", data);
});
console.log("your_api_call.php Request Sent!");
});
The server side "your_api_call.php" file call would need to then flush its output (per data row so as to see progress over time) which can then be displayed immediately
within the above "scrollable_area" div...
// Do Db loop
while ($record = $recordset->fetch(PDO::FETCH_ASSOC)) {
set_time_limit(10); // Don't timeout on large data sets seeing as this is a big task that we are wanting to watch progress!
echo 'Do what you gotta do... ' . $record["register_id"] . '
';
flush(); // Push to the client / ajax
ob_flush(); // As above
}
Short answer... YES. Hope this helps :-)