Tiempo ejecución

[emeotero]

hola,
estoy enviando un formulario por Post usando un script de ajax para que no se me recargue la pagina y ejecutar una funcion de javascript que hace un reload sobre un grid. no se como hacer un tipo barra de progreso o reloj de progreso contando el tiempo real en que se ejecuta el script en el servidor y devuelve la respuesta.
este es mi escript

Código:

function modelo(){
	var model = document.getElementById("model");
	dia = document.getElementById('dias');
	proba_dia = dia.value;
	espe = document.getElementById('especie');
	meti = document.getElementById('espacio');
	proba_meti = meti.value;
	var txt='';
	var i;
	var count = 0;
	for (i=0; i<espe.options.length; i++) {
	    if (espe.options[i].selected) {
	      if (count==0)
		  	txt+= "'"+espe.options[i].value+"'";
			else
			 txt+= "#'"+espe.options[i].value+"'";
	    }
	count++;
	}
	if(txt == ""){
		alert("<?php echo $lang['text_170']; ?>");
		} else {
			url_espe='dias='+proba_dia+'&especie='+txt+'&espacio='+proba_meti;
	}
	xhr3(url_espe);
}
var xmlhttp; 
function xhr3(model){ 
		if (window.XMLHttpRequest)
  			{
  				xmlhttp=new XMLHttpRequest();
	  		}
		else
	  		{
  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.onreadystatechange = RespuestaModel; 
		xmlhttp.open("POST", "run_modelo.php", true); 
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.setRequestHeader("Content-length", 3);
		xmlhttp.setRequestHeader("Connection", "close");
		xmlhttp.send(model);
		}
function RespuestaModel(){
		if(xmlhttp.readyState == 4) {
      		if(xmlhttp.status == 200) {
				storemodelado.load();
				alert("<?php echo $lang['text_186']; ?>");
			}
    	}
}

le digo que cuando se ejecute, cargue el store y haga el alert. lo que quiero es mostrar un progreso o controlar de algun modo desde que pincho el boton hasta que el servidor devuelve el resultado.
Gracias por la ayuda. Un saludo.

[fjrueda]

emeotero, Buenos dias.

De las barras de progreso ya se ha hablado en el foro muchas bcs, podria buscar alguno, de todas formas le indico una web en la que explican de forma bien sencilla con Jquery aqui.

Ya usted tendra que manejar los porcentajes de crecimiento con las cantidades de los ciclos en su for (Por otro lado yo veo como raro ese ajax).

me cuenta como le va.

[emprear]

Iniciado por emeotero

hola,
estoy enviando un formulario por Post usando un script de ajax para que no se me recargue la pagina y ejecutar una funcion de javascript que hace un reload sobre un grid. no se como hacer un tipo barra de progreso o reloj de progreso contando el tiempo real en que se ejecuta el script en el servidor y devuelve la respuesta.
este es mi escript

Código:

function modelo(){
	var model = document.getElementById("model");
	dia = document.getElementById('dias');
	proba_dia = dia.value;
	espe = document.getElementById('especie');
	meti = document.getElementById('espacio');
	proba_meti = meti.value;
	var txt='';
	var i;
	var count = 0;
	for (i=0; i<espe.options.length; i++) {
	    if (espe.options[i].selected) {
	      if (count==0)
		  	txt+= "'"+espe.options[i].value+"'";
			else
			 txt+= "#'"+espe.options[i].value+"'";
	    }
	count++;
	}
	if(txt == ""){
		alert("<?php echo $lang['text_170']; ?>");
		} else {
			url_espe='dias='+proba_dia+'&especie='+txt+'&espacio='+proba_meti;
	}
	xhr3(url_espe);
}
var xmlhttp; 
function xhr3(model){ 
		if (window.XMLHttpRequest)
  			{
  				xmlhttp=new XMLHttpRequest();
	  		}
		else
	  		{
  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.onreadystatechange = RespuestaModel; 
		xmlhttp.open("POST", "run_modelo.php", true); 
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.setRequestHeader("Content-length", 3);
		xmlhttp.setRequestHeader("Connection", "close");
		xmlhttp.send(model);
		}
function RespuestaModel(){
		if(xmlhttp.readyState == 4) {
      		if(xmlhttp.status == 200) {
				storemodelado.load();
				alert("<?php echo $lang['text_186']; ?>");
			}
    	}
}

le digo que cuando se ejecute, cargue el store y haga el alert. lo que quiero es mostrar un progreso o controlar de algun modo desde que pincho el boton hasta que el servidor devuelve el resultado.
Gracias por la ayuda. Un saludo.

Esto no es necesariamente una barra de progreso, pero te permitiría controlar el tiempo de ejecución

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Timer Respuesta Ajax</title>
 
<style type="text/css">
/*<![CDATA[*/
 
#tiempo_carga{
    height: 10px;
    line-height: 10px;
    display: inline-block;
    font-size: 10px;
    font-family: arial, sans-serif;
}
#barra_carga{
    height: 10px;
    width: 0;
    background: lime; 
    display: inline-block;
    margin-right: 5px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var milisegundos = 0;
var segundos = 0;
var timer;
 
function mostrar(){
if (milisegundos>=9){
milisegundos=0;
segundos+=1;
}else{
milisegundos+=1;
}
document.getElementById('tiempo_carga').innerHTML = segundos + "." + milisegundos + ' segs.';
document.getElementById('barra_carga').style.width = (segundos*4) + "px";
timer = setTimeout("mostrar()",100);
 }
 
function iniciar() {
if (timer > 0){
return;
}
mostrar(); 
// emulamos el tiempo de respuesta de Ajax
// es decir, al recibir la respuesta se llama simplemente a la función detener();
setTimeout('detener()', 7200); 
}
 
 
function detener() {
clearTimeout(timer);
timer = 0;
milisegundos = 0;
segundos = 0;
}
//]]>
</script>
</head>
<body>
<form action="#">
<!-- cuando llamamos la función Ajax y hacemos el post se debe de llamar la función iniciar() 
en el ejemplo la llamamos desde el input button -->
<p>
<input type="button" value="llamar Ajax" onclick="iniciar()" />
<br/>
</p>
</form>
<div id="barra_carga"><!-- muestra tiempo de ejecución --></div><div id="tiempo_carga" ><!-- muestra tiempo de ejecución --></div>
</body>
</html>
 

Saludos

[emeotero]

Hola,
antes de nada gracias a los dos fjrueda y emprear. Fjrueda, echare un ojo por el foro, gracias.
Emprear, me gusta el script, pero el problema es que controlas tu manualmente el tiempo de ejecución, tienes que hacer una previsión del tiempo que le va a llevar al servidor ejecutar el script, no?, no se puede coger automaticamente?
gracias de nuevo

[emprear]

Iniciado por emeotero

Hola,
antes de nada gracias a los dos fjrueda y emprear. Fjrueda, echare un ojo por el foro, gracias.
Emprear, me gusta el script, pero el problema es que controlas tu manualmente el tiempo de ejecución, tienes que hacer una previsión del tiempo que le va a llevar al servidor ejecutar el script, no?, no se puede coger automaticamente?
gracias de nuevo

No, eso es solo para la demo, fijate un ejemplo real

http://foros.emprear.com/ajax/ajax_t..._ajax_fdw.html
Mira el código fuente y el de cargarAjax.js para ver dónde llamé las funciones iniciar(), detener(). Por supuesto que si la carga es muy rápida no es mucho lo que vas a ver de la barra de progreso (fake), el valor de los segundos es real

SAludos

[emeotero]

Gracias emprear!!! mi pagina php corre un modelo de predicción, con lo que, entre que envia la consulta ejecuta el script y devuelve el resultado pasan sobre 14/15 segundos, siendo optimistas pq depende de la cantidad de datos que tenga que obtener de la base de datos.

Gracias de nuevo. voy a trabajar en ello.

[fjrueda]

Bueno, si va a hacer uso del ejemplo de @emprear (me parece bien) puede modificarlo y agregar la barra de progreso, la barra debe crecer segun "dato procesado y datos total consultados", con mysql o postgres (o cualquier motor de bd) usted puede saber cuantos datos resuelve la consulta antes de procesarlos y de esa forma va haciendo que cresca la barra de progreso.

No es complicado, pero de todas formas si no le funciona postee lo que tenga modificaco y lo resolvemos.