ajax.updater and onLoad

[Martín Marqués]

I'm tryng to find a way for ajax.updater to show an animated gif clock
during the load of the request, but can't find it, and I don't want to
rewrite all the scripts with ajax.request. I thought I saw it in the
past, but can't recall where. Any ideas?

--
Martín Marqués
select 'martin.marques' || '@' || 'gmail.com'
DBA, Programador, Administrador

[Walter Lee Davis]

If you just want it for one updater, then do this:

new Ajax.Updater('foo','bar.php', {
onCreate: function(){
$('indicator').show();
},
onComplete: function(){
$('indicator').hide();
}
});

Another trick I like is this one:

new Ajax.Updater('foo','bar.php', {
onCreate: function(){
$('foo').update('<img src="indicator.gif" width="16" height="16"
alt="wait" />');
}
});

That way your update naturally wipes away the indicator, and you don't
have to manage another image in your layout.

If you want it for all the Ajax on your page, have a look at the
Prototype docs for the bit on Ajax.Responders. There's a nice recipe
there to show a global Wait indicator that comes and goes as any Ajax
on your entire page runs. I do this with a lightbox-style overlay on
the page, makes a nice effect and keeps the stray extra clicks from
happening, which was a big problem with this page.

Walter

> --
> You received this message because you are subscribed to the Google
> Groups "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-s...@googlegroups.com
> .
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
> .
>

[ekariz]

<!--after including prototype.js & scriptaculous-->
<!--this works for all Ajax request-->

<div id="working"></div>
<script language="JavaScript" type="text/javascript">
Ajax.Responders.register({
onCreate: function(request) {
new Effect.Appear('working');
$('working').update('<img src=\"images/loading.gif\">
requesting...');
request['timeoutId'] = window.setTimeout(
function() {
if (callInProgress(request.transport)) {
showFailureMessage();
if (request.options['onFailure']) {
request.options['onFailure'](request.transport,
request.json);
}
}
},
15000 // 15 seconds
);
},
onLoading : function(){
if($('working')){
$('working').update('<img src=\"images/loading.gif\">
loading...');
}
},
onLoaded : function(){
if($('working')){
$('working').update(activity_indicator('loaded'));
}
},
onComplete : function(request){
if($('working') && Ajax.activeRequestCount==0){
$('working').update('<img src=\"images/loading.gif\"> complete');
new Effect.Highlight('working',{duration:2,endcolor:'#FFFFFF'});
setTimeout("$(\'working\').update('')",'1000');//hide after 1
seconds
$('working').setStyle({backgroundColor:'#FFFFFF'});
}
window.clearTimeout(request['timeoutId']);
},
});

</script>

[Eric]

On Nov 3, 2:44 am, Walter Lee Davis <wa...@wdstudio.com> wrote:
> If you just want it for one updater, then do this:
>
> new Ajax.Updater('foo','bar.php', {
>         onCreate: function(){
>                 $('indicator').show();
>         },

Is this actually working?
The Prototype 1.6 Complete API Reference explicitly says that
"onCreate is only available to responders, as it wouldn't make a lot
of sense to individual requests" .

Eric

[Walter Lee Davis]

Absolutely. Here:

http://scripty.walterdavisstudio.com/ajaxwait.html

Clicking the yellow box requests a PHP script that begins with
sleep(2), just so there's enough time for you to see the spinner. I
did it without that, and it was such a brief flash that you couldn't
tell that the image was being shown. All the script is inline.

Walter

[Walter Lee Davis]

And I just added a second example below the first. This uses the
onCreate -> update trick to replace the contents of the second yellow
box with a spinner image, which is then replaced by the content from
the Ajax Update.

Walter