Foros del Web - Ver Mensaje Individual

emprear · #3 (**permalink**) 31/01/2013, 08:44

Cita:

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:

Ver original<!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