I'm having issues with the <progress> tag in Chrome (using it in the indeterminate state). It animates perfectly fine at first, until I shoot off an XMLHttpRequest, at which point the progress element stops animating. Once the XMLHttpRequest is finished, the progress element starts animating again.
This issue doesn't happen in Firefox - in Firefox the progress element continues to animate during processing of the XMLHttpRequest.
As far as I can tell, this must be a threading issue in Chrome - does anyone know of a workaround for this? Any help would be appreciated, or even just confirmation that I haven't stuffed something up
Here's the relevant code, which works perfectly fine in Firefox, but not Chrome.
The JavaScript portion (using jQuery):
Code:
And the HTML portion:
Code:
This issue doesn't happen in Firefox - in Firefox the progress element continues to animate during processing of the XMLHttpRequest.
As far as I can tell, this must be a threading issue in Chrome - does anyone know of a workaround for this? Any help would be appreciated, or even just confirmation that I haven't stuffed something up
Here's the relevant code, which works perfectly fine in Firefox, but not Chrome.
The JavaScript portion (using jQuery):
Code:
function process() {
$("#start").val("Processing...");
$("#start").attr("disabled", "disabled");
$("#pbar").show();
setTimeout(function() {
if (window.XMLHttpRequest) { // ie7+, firefox, chrome, safari, opera
xmlhttp = new XMLHttpRequest();
} else { // ie6, ie5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/process/generateProdOrders.asp?f=" + $("#from").val() + "&t=" + $("#to").val(), false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var numOrders = parseInt(xmlDoc.getElementsByTagName("orders")[0].childNodes[0].nodeValue);
$("#result").append("<br />" + numOrders + " orders generated");
$("#pbar").hide();
$("#start").val("Done");
}, 50);
}
And the HTML portion:
Code:
<input type="button" id="start" value="Start" onclick="process()"><br />
<progress id="pbar" style="display: none;">Processing orders...</progress><br />
