I am in a form where I make a query by date, those parameters are passed by ajax, what it does is pass it to a controller to generate a list.
It would be something like this:
$.ajax ({
url: './consultar',
type: 'get',
data:{fechadesde:$fechadesde, fechahasta:$fechahasra},
dataType:'html',
Success: function (data)
{
$mostrarlista.html(data);
},
Error: function (xhr)
{
Console.log(xhr.resposivetext);
}
});
What I need is to know if there is something that allows me to obtain some data to be able to feed the progressbar
Now I managed to do a beforeSend that in a certain way allows me to show a gif image while I'm doing the query.
My complete function is this:
$buscarpor.change(function(){
$buscar.off();/*Se elimina el evento clic al hacer change ya que esta dentro de
un evento repetitivo, en este caso se va acumulando y por ello repite el evento
El evento clic funcionara de nuevo ya que abajo se esta asigando con el on*/
var $opcion=$buscarpor.val();
/*Este Switch hace que la vista todopedidos sea completamnete adaptatiba ademas de hacer validacion de los campos
* y buscara en la base de datos para lista*/
limpiarCambiar();
switch ($opcion)
{
/*Validar y buscar fecha*/
case '1':
$curriertienda.hide();
$ordenreferencia.hide();
$fechad.show();
$btnbuscar.show();
$fecha.attr('class','col-lg-8 col-md-8 col-sm-8 col-xs-8');
$btnbuscar.attr('class','col-lg-4 col-md-4 col-sm-4 col-xs-4');
$buscar.on("click",function(){
$.ajax
({
url:'./validarConsulta',
type:'get',
dataType:'json',
data:{fechadesde:$fechadesde.val(),fechahasta:$fechahasta.val(),opcion:$opcion},
success: function (data)
{
var $bandera=data.bandera;
if($bandera===1)
{
location.reload();
limpiar();
}
else
if(validarFecha($fechadesde.val(),$fechahasta.val())===1)
{
alert("El campo fecha desde es mayor que el campo fecha hasta");
}
else {
$alert.hide();
$.ajax
({
xhr: function () {
//Creamos el xhr
var xhr = new window.XMLHttpRequest();
//Añadimos el evento upload
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
//El porcentaje completado será lo subido entre el total
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
//Actualizamos la barra de JQuery-UI
$( ".progressbar" ).progressbar("value",percentComplete*100);
$(".ui-progressbar-value").html(Math.round(percentComplete*100) + '%');
//Actualizamos el div
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$( ".progressbar" ).progressbar("value",percentComplete*100);
$(".ui-progressbar-value").html(Math.round(percentComplete*100) + '%');
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
url:'./consultarPedidos',
type:'get',
data:{opcion:$opcion,fechadesde:$fechadesde.val(),fechahasta:$fechahasta.val()},
dataType:'html',
beforeSend: function () {
$cargando.show();
},
complete: function () {
$cargando.hide();
},
success: function(data)
{
$mostrarpedidos.html(data);
},
error: function(xhr, ajaxOptions, thrownError)
{
alert("Hubo un error por favor revise la consola");
console.log(xhr.responseText);
console.log(thrownError);
}
});
}
},
error: function(xhr)
{
alert("Hubo un error por favor revise la consola");
console.log(xhr.responseText);
}
});
});
break;