ajax loading...

Diablito69 · #1 (**permalink**) 14/05/2006, 19:16

Hola amigos, estoy tratando de implementar algo similar a lo q tiene el gmail, esa ventanita roja q aparece en la parte superior derecha de la pantalla y q dice cargando...

tengo una imagen q la cree en w w w .ajaxload.info y mi idea es q aparezca mi imagen y un mensaje al lado pero no tengo idea como implementarlo. Soy super novato en esto de ajax y estoy usando la libreria xajax.

Ojala alguien me pueda ayudar. Saludos

DjFaramir · #2 (**permalink**) 15/05/2006, 12:08

para eso tendrias que usar el state 1...

Código:

_objeto.onreadystatechange=function(){        
          switch (_objeto.readyState){
                    case 1: 
                              document.getElementById(target).innerHTML="ACA lo del loading"
                              break
                    case 4:
                              if(_objeto.status==200){						
                                    document.getElementById(target).innerHTML="ACA la salida"
                              }
                               break
}
}

Diablito69 · #3 (**permalink**) 25/05/2006, 06:50

No entendi mucho la explicación, sorry pero soy bastante novato en esto de ajax :( haber si me das otra manito con esto pero un poco más claro.

Saludos

sergiold · #4 (**permalink**) 25/05/2006, 08:28

Lo que se refiere es que en un proceso en el que se envia una información mediante ajax y se devuelve un resultado pueden diferenciarse 4 estados (enviando... la verdad es que no me los se

).

El código que te propone es que mires cuando este estado cambia. En el momento en el que el estado cambia y se situa en 1, muestras el mensaje, hasta que el estado vuelve a cambiar (4) y lo quitas.

Lo que yo te propongo es que en la función donde haces la llamada a una función xajax primero de todo muestras el mensaje y la imágen. Haces todo lo que tengas que hacer con xajax y cuando ya has recibido los datos de vuelta quitas el mensaje.

Viene a ser lo mismo pero sin fijarte en los cuatro estados.

Saludos,

tulises16 · #5 (**permalink**) 12/07/2006, 11:32

Los Estados son:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

pavelsn · #6 (**permalink**) 17/08/2006, 16:37

Este ejemplito te puede ayudar:

Código:

<?php
require("xajax.inc.php");

function slow_function()
{
    $objResponse = new xajaxResponse();
    sleep(2); //we'll do nothing for two seconds
    $objResponse->addAlert("Envio exitoso");
    return $objResponse;
}

$xajax = new xajax();
$xajax->registerFunction('slow_function');
$xajax->processRequests();
?><html>
    <head>
        <title>Loading Bar Demo</title>
        <? $xajax->printJavascript(); ?>
    </head>
    <body>
        <script type="text/javascript">
        <!--
            xajax.loadingFunction = 
                function(){xajax.$('loadingMessage').style.display='block';};
            function hideLoadingMessage()
            {
                xajax.$('loadingMessage').style.display = 'none';
            }
            xajax.doneLoadingFunction = hideLoadingMessage;
        // --></script>
        <input type="button" onclick="xajax_slow_function();" value="Enviar proceso" />
        <div id="loadingMessage" style="font-size: 22px; display: none;">
            <img src="ajax-loader.gif"> Enviando ...
        </div>
    </body>
</html>

Solo recuerda que debes poner la ruta a "xajax.inc.php" y la imagencita del "ajax-loader.gif".

yacatl · #7 (**permalink**) 18/08/2006, 16:34

Pues yo tambien llevaba tiempo queriendo meter el loading, porque ya hacía cosas con AJAX pero no veía como hacer para que el usuario se diera cuenta dw que el proceso se había realizado de manera exitosa.

Leyendo un poco las respuestas de este hilo, empecé a realizar cambios a mis programas, no sé que tan buena solución sea pero yo lo hice asi.

archivo.html

Código PHP:

  <script language="javascript" type="text/javascript"> 
<!-- 
function espera() 
{ 
/* Esta función solo nos sirve para retardar la carga de los datos */ 
    contenedor.innerHTML = ajax.responseText 
} 
 
function cargarContenido(){ 
contenedor = document.getElementById('contenedor'); 
d1 = document.getElementById('sujeto').value; 
 
ajax=nuevoAjax(); 
ajax.open("GET", "includes/xasimilados.php?todo="+d1,true); 
 
ajax.onreadystatechange=function() { 
if (ajax.readyState != 4) { 
contenedor.innerHTML = '<img src="images/ajax-loader.gif" width="32" height="32"> Cargando datos...'; 
}else{ 
    window.setTimeout('espera();',2000); //pretendemos demorar la respuesta unos segundos 
} 
} 
ajax.send(null) 
} 
 
... 
..... 
....... /* mucho html */ 
 
<td colspan="2"> 
<input type="button" name="cmdSubmit" value="Calcular" id="cmdSubmit" title="Calcular" onClick="cargarContenido();"> 
</td> 
<tr> 
<td align="center"> 
<div id="contenedor">Esperando c&aacute;lculo... </div></td> 
</tr> 
</table>

Estuve intentando poner la imagen dentro del <div> y que inicialmenete estuviera como display:none y en la revisión del estado hacer que se mostrara,pero solo me lo hace la primera ocasión y en las subsecuentes me dice que el objeto no acepta esa propiedad o método.

Tambien comentar que me ha servido de mucho leer la clase creada po Matt Kruse AjaxToolBox, ya que trae unos ejemplos que en mi particular punto de visto, han sido los mejores por mucho en mis lecturas, además de que los métodos los tiene muy bien documentados.

http://www.ajaxtoolbox.com/

Saludos!!

yacatl · #8 (**permalink**) 18/08/2006, 16:50

Vaya, me acabo de dar cuenta de que en Firefox no hace nada, y cuando hace nunca se quita el loading.

En explorer funciona correctamente. Alguna idea?

Saludos!

NzO · #9 (**permalink**) 19/08/2006, 04:52

Diablito69 Alomejor esto te sirve: http://isiajax.sourceforge.net/demos...os/cancel.html
Tienes mas ejemplos aqui: http://isiajax.sourceforge.net/demos.php

SI TAN SOLO TUVIERA · #10 (**permalink**) 03/08/2007, 00:02

Hola Nz0, estuve probando el cargador que hiciste en ajax, y me ha parecido muy bueno!, a excepcion del problemita del 'position' o la ubicacion de este que varia de acuerdo a la resolucion de la pantalla... y el relative es bien diferente en mozilla e iexplorer..

pero bueno, mi pregunta no es esa sino, como lo aplico para un boton?

para el link lo aplicas asi:

Código HTML:

onClick="myajax.Link(this.href, 'main')"

Para el boton submit trate cambiando el onClick a OnSubmit pero no me funciono, me puedes ayudar por favor?

Gracias!

gvargas · #11 (**permalink**) 03/08/2007, 08:59

En las FAQ'S de este foro recien acabo de poner justo lo que necesitas.

http://www.forosdelweb.com/showthread.php?t=332366

Al estilo gmail.

Para esto uso prototype.

Un saludo

SI TAN SOLO TUVIERA · #12 (**permalink**) 03/08/2007, 09:16

HOla Gvargas! gracias por la ayuda!

Estuve mirando el post que me comentas, pero en el codigo que pusiste no veo que le des uso en un boton submit.

Me puedes dar una mano? gracias!

Mi problema, es que tengo un formulario de busqueda, en el que el usuario por medio de un link puede ir a una pagina que muestra todos los items, y por medio de un boton cuando quiere ser mas especifico en la busqueda. Con el link me funciona bien, pero en el boton no se como aplicarlo. ¿@-@?

gvargas · #13 (**permalink**) 03/08/2007, 13:36

Cita:

Iniciado por SI TAN SOLO TUVIERA

HOla Gvargas! gracias por la ayuda!

Estuve mirando el post que me comentas, pero en el codigo que pusiste no veo que le des uso en un boton submit.

Me puedes dar una mano? gracias!

Mi problema, es que tengo un formulario de busqueda, en el que el usuario por medio de un link puede ir a una pagina que muestra todos los items, y por medio de un boton cuando quiere ser mas especifico en la busqueda. Con el link me funciona bien, pero en el boton no se como aplicarlo. ¿@-@?

Pues no veo la necesidad de hacer con un submit, por que este se relaciona con un FORM.

En cualquier botón buttom lo unico que hay que hacer es el evento OnCLick

Código PHP:

  <input type="button" id="enviar" name="enviar" value="Actualizar"  OnClick="atualizar(parametros)">

Donde actualizar puede ser:

Código PHP:

  function atualizar(list_params){ 
    var parametros = 'parametros=' + list_params; 
    new Ajax.Request('script.php', {method: 'post', parameters: parametros }); 
}

El resto es como esta el FAQ

Saludos !

gvargas · #14 (**permalink**) 03/08/2007, 13:39

En caso de hacer uso del submit entonces captura el evento "onsubmit" en el form

Código PHP:

  <form name="envio" id ="envio" onsubmit="actualizar(parametros)">

Saludos

SI TAN SOLO TUVIERA · #15 (**permalink**) 06/08/2007, 20:49

Quede frito gvargas...

ya tengo otros onsubmit en mi form y no se como concatenar el que tu me das al que ya tengo, igual con los parametros que son 9 para pinchar el boton ENVIAR.

Este es mi form:

Código PHP:

 
<form name="frmFilter" id="sform" onSubmit="return (valida(this) && validacion3(this));" action="<?php echo $site_secure_URL;?>results.php" method="get">

De todos modos gracias!

gvargas · #16 (**permalink**) 07/08/2007, 10:09

Hola,

No entiendo muy bien lo que quieres hacer, pero si despues de enviar el FORM previa validación, requieres hacer la petición AJAX entonces seria así:

Código PHP:

 
<form name="frmFilter" id="sform" onSubmit="return (valida(this) && validacion3(this)); actualizar(parametros);" action="<?php echo $site_secure_URL;?>results.php" method="get">

Donde parametros es la cadena con la lista de parametros, esta ya debe ir formada para que el script PHP pueda interpretarla. Por ejemplo:

Código PHP:

  ..... actualizar(1, 'cadena', $F('valor'))

Código PHP:

  function atualizar(numero, cadena, valor){ 
    var parametros = 'el_numero=' + numero + '&la_cadena=' + cadena + '&el_valor=' + valor; 
    new Ajax.Request('script.php', {method: 'post', parameters: parametros }); 
}

Espero que me haya hecho entender.

Un saludo !

SI TAN SOLO TUVIERA · #17 (**permalink**) 10/08/2007, 00:12

10 años despues.. por fin entendi

.. ya me funciona como queria

GRACIAS gvargas!