Seems that something has changed in Ajax-land; a process that worked well for years to let the user know the server was actually chewing through its work has stopped working.
I've distilled it down as best I can to the following:
Client-side:
function start () {
var jsonResponse = '', lastResponseLen = false;
$.ajax({
url: getAjaxUrl(),
method: 'POST',
data: {
REQ_TYPE: 'Misc_Action',
SUB_TYPE: 'Misc_TestComms'
},
xhrFields: {
onprogress: function(e) {
var thisResponse, response = e.currentTarget.response;
if(lastResponseLen === false) {
thisResponse = response;
lastResponseLen = response.length;
} else {
thisResponse = response.substring(lastResponseLen);
lastResponseLen = response.length;
}
jsonResponse = JSON.parse(thisResponse);
document.getElementById('messages').innerHTML = 'Processed '+jsonResponse.count+' of '+jsonResponse.total;
}
},
success: function(text) {
console.log('done!');
document.getElementById('messages').innerHTML = 'Process completed successfully';
}
});
}
(note that the url is correctly formed)
Server-side:
function Misc_TestComms () {
$runs = 25;
$i = 0;
echo json_encode(array('progress' => 0, 'count' => $i);
flush();
ob_flush();
while ($i < $runs) {
$i++;
echo json_encode(array('progress' => (($i/$runs)*100), 'count' => $i);
flush();
ob_flush();
sleep(1);
}
}
The client-side receives no progress messages until the script has completed, at which point both the onprogress and success sections are triggered.
Suggestions?