Foros del Web » Programando para Internet » Javascript » Frameworks JS »

ajax loading...

Estas en el tema de ajax loading... en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2006, 19:16
 
Fecha de Ingreso: agosto-2005
Mensajes: 57
Antigüedad: 19 años, 2 meses
Puntos: 0
ajax loading...

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
  #2 (permalink)  
Antiguo 15/05/2006, 12:08
Avatar de DjFaramir  
Fecha de Ingreso: febrero-2003
Ubicación: La Plata, Buenos Aires, Argentina
Mensajes: 131
Antigüedad: 21 años, 8 meses
Puntos: 0
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
}
}
__________________
See you... y Tolkien... mucho Tolkien...
  #3 (permalink)  
Antiguo 25/05/2006, 06:50
 
Fecha de Ingreso: agosto-2005
Mensajes: 57
Antigüedad: 19 años, 2 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 25/05/2006, 08:28
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 20 años
Puntos: 4
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,
__________________
sergiold
  #5 (permalink)  
Antiguo 12/07/2006, 11:32
Avatar de tulises16  
Fecha de Ingreso: diciembre-2003
Ubicación: La Plata, Argentina
Mensajes: 92
Antigüedad: 20 años, 10 meses
Puntos: 1
Estados readyState

Los Estados son:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
__________________
Ulises
  #6 (permalink)  
Antiguo 17/08/2006, 16:37
 
Fecha de Ingreso: mayo-2005
Ubicación: Mexico DF
Mensajes: 27
Antigüedad: 19 años, 5 meses
Puntos: 0
Loading ...

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".
  #7 (permalink)  
Antiguo 18/08/2006, 16:34
 
Fecha de Ingreso: septiembre-2002
Ubicación: México
Mensajes: 356
Antigüedad: 22 años, 1 mes
Puntos: 0
yo lo hice así

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!!
  #8 (permalink)  
Antiguo 18/08/2006, 16:50
 
Fecha de Ingreso: septiembre-2002
Ubicación: México
Mensajes: 356
Antigüedad: 22 años, 1 mes
Puntos: 0
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!
  #9 (permalink)  
Antiguo 19/08/2006, 04:52
Avatar de NzO
NzO
 
Fecha de Ingreso: abril-2005
Mensajes: 153
Antigüedad: 19 años, 6 meses
Puntos: 3
Diablito69 Alomejor esto te sirve: http://isiajax.sourceforge.net/demos...os/cancel.html
Tienes mas ejemplos aqui: http://isiajax.sourceforge.net/demos.php
__________________
NzO=EnZo
isiAJAX & isiXML hechos el uno para el otro.
  #10 (permalink)  
Antiguo 03/08/2007, 00:02
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 18 años, 7 meses
Puntos: 3
Re: ajax loading...

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!
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
  #11 (permalink)  
Antiguo 03/08/2007, 08:59
 
Fecha de Ingreso: octubre-2006
Ubicación: México D.F
Mensajes: 210
Antigüedad: 18 años
Puntos: 0
Re: ajax loading...

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
  #12 (permalink)  
Antiguo 03/08/2007, 09:16
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 18 años, 7 meses
Puntos: 3
Re: ajax loading...

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. ¿@-@?
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
  #13 (permalink)  
Antiguo 03/08/2007, 13:36
 
Fecha de Ingreso: octubre-2006
Ubicación: México D.F
Mensajes: 210
Antigüedad: 18 años
Puntos: 0
Re: ajax loading...

Cita:
Iniciado por SI TAN SOLO TUVIERA Ver Mensaje
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'parametersparametros });

El resto es como esta el FAQ

Saludos !
  #14 (permalink)  
Antiguo 03/08/2007, 13:39
 
Fecha de Ingreso: octubre-2006
Ubicación: México D.F
Mensajes: 210
Antigüedad: 18 años
Puntos: 0
Re: ajax loading...

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
  #15 (permalink)  
Antiguo 06/08/2007, 20:49
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 18 años, 7 meses
Puntos: 3
Re: ajax loading...

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!
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
  #16 (permalink)  
Antiguo 07/08/2007, 10:09
 
Fecha de Ingreso: octubre-2006
Ubicación: México D.F
Mensajes: 210
Antigüedad: 18 años
Puntos: 0
Re: ajax loading...

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(numerocadenavalor){
    var 
parametros 'el_numero=' numero '&la_cadena=' cadena '&el_valor=' valor;
    new 
Ajax.Request('script.php', {method'post'parametersparametros });

Espero que me haya hecho entender.

Un saludo !
  #17 (permalink)  
Antiguo 10/08/2007, 00:12
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 18 años, 7 meses
Puntos: 3
Re: ajax loading...

10 años despues.. por fin entendi .. ya me funciona como queria

GRACIAS gvargas!
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 16:53.