Agregar un cargando

[kaninox]

Hola muchachos estoy trabajando con prototype y scripttacolous el tema es que quiero agregar a un form que envio el tipico mensaje de cargando mientras se envian los datos?

en mi script tengo

Código Javascript:

<script type="text/javascript">
<?php for ($i=101;$i<=130;$i++){?>
function form<?php echo "$i";?>(){var params = Form.serialize($('formulario_<?php echo "$i";?>'));
new Ajax.Updater('bodychange', 'basedatos_<?php echo "$i";?>.php', {asynchronous:true, parameters:params, evalScripts: true,
onComplete: function(){
if($('cfx')){/*Formulario Error*/
new Effect.Pulsate('cfx', { pulses: 4, duration: 1.8, queue: {scope: 'cfxscope'}});  
}
if($('cfa')){/*Formulario Ok*/
new Effect.Pulsate('cfa', { pulses: 4, duration: 1.8, queue: {scope: 'cfascope'}});    
new Effect.Fade('cfa', { duration: 7.0, queue: {position: 'end', scope: 'cfascope'} });
}
}
});}
<?php } ?>
</script>
 

si le agrego el onloading de esta forma :

Código Javascript:

<script type="text/javascript">
<?php for ($i=101;$i<=130;$i++){?>
function form<?php echo "$i";?>(){var params = Form.serialize($('formulario_<?php echo "$i";?>'));
new Ajax.Updater('bodychange', 'basedatos_<?php echo "$i";?>.php', {asynchronous:true, parameters:params, onLoading: showLoad, evalScripts: true,
onComplete: function(){
if($('cfx')){/*Formulario Error*/
new Effect.Pulsate('cfx', { pulses: 4, duration: 1.8, queue: {scope: 'cfxscope'}});  
}
if($('cfa')){/*Formulario Ok*/
new Effect.Pulsate('cfa', { pulses: 4, duration: 1.8, queue: {scope: 'cfascope'}});    
new Effect.Fade('cfa', { duration: 7.0, queue: {position: 'end', scope: 'cfascope'} });
}
}
});}
<?php } ?>
function showLoad () {
$('Capa_Formulario').style.display = 'none';
$('Capa_Cargando').style.display = 'block';
}
</script>
 

El showload por alguna razon no me funciona queda cargando el contenido sin hacer nada mas... o sea queda en la Capa_Cargando y no me muestra la Capa_Formulario.

MI pregunta es , hay otra forma de hacer el preload? ya sea con el mismo prototype o con scriptacolous mientras me funcione yo ok.

Saludos.

[caricatos]

Tema movido desde javascript

[masterpuppet]

Mmmm, deberias en el onComplete, volver a cambiar los estilos de las capas,

Código Javascript:

...
onComplete: function(){
  $('Capa_Formulario').style.display = 'block';
  $('Capa_Cargando').style.display = 'none';
  ...
}
 

Saludos.

[kaninox]

Pues quede en las mismas por alguna razón no me muestra el formulario y queda la imagen preload pegada :/

[masterpuppet]

Según la documentación onLoading no esta implementado en todos los navegadores de forma consistente y deberías evitarlo, utiliza mejor onCreate:

Código Javascript:

...
new Ajax.Updater('bodychange', 'basedatos_<?php echo "$i";?>.php' {
    asynchronous:true, 
    parameters:params, 
    evalScripts: true,
    onCreate: function(){
        toggleLoader(false);
    },
    onComplete: function(){
        toggleLoader(true);
        if($('cfx')){/*Formulario Error*/
            new Effect.Pulsate('cfx', { pulses: 4, duration: 1.8, queue: {scope: 'cfxscope'}});  
        }
        if($('cfa')){/*Formulario Ok*/
            new Effect.Pulsate('cfa', { pulses: 4, duration: 1.8, queue: {scope: 'cfascope'}});    
            new Effect.Fade('cfa', { duration: 7.0, queue: {position: 'end', scope: 'cfascope'} });
        }
    }
});
...
function toggleLoader(show) {   
    $('ContenidoFormulario')[show ? 'show' : 'hide'](); 
    $('ContenidoCargando')[!show ? 'show' : 'hide']();
}
 

Nota: ten en cuenta que en development puede ser tan rapido que ni siquiera veas el loader, en production al ser mas lento lo vas a ver.

Saludos.

[kaninox]

mmmm intersante lo del onload con razón tenia problemas con google chrome, el tema ahora es que le doy click y pues no me ejecuta en la misma pagina me salta una nueva.

[masterpuppet]

Raro, yo lo probé en el ejemplo que pasaste en otro post y funciona ok, firebug no te muestra ningun error ?

[kaninox]

sep sorry masterpupet funciona correctamente tenia demas el onLoading: showLoad.
lo quite y anda bien, gracias por la rapidez y la ayuda saludos :)