I'm trying to have a progress bar until ajax request has ended (this is text field + a canvas image captured from laptop webcam). But there is no progress on my bar... It appears then, when it finished, it disappear, but no visual progression on...
$("#FormSubmitPhotoCapture").click(function (e) {
e.preventDefault();
if($("#form_titre_photo_capture").val()==="")
{
alert("Veuillez saisir un titre");
return false;
}
var canvas = document.getElementById('canvascapt');
var context = canvas.getContext('2d');
var dataURL = canvas.toDataURL();
document.getElementById('imagecaptimg').src = dataURL;
var myData = {titre : $("#form_titre_photo_capture").val(), image_capture : "" + dataURL + ""}
jQuery.ajax({
beforeSend:function(x){
$('#progression').html("<progress id='bar' value='0' max='100'></progress>").show();
},
type: "POST",
url: "captureimg",
dataType:"text",
data:myData,
success:function(response){
$('#bar').val(100);
$("#responds").before(response);
$("#form_titre_photo_capture").val('');
$("#webcam_photo_capture").empty();
$('#FormSubmitPhotoCapture').hide();
},
complete: function() {
$('#bar').hide();
}
});
});
Any idea please?