Changing cursor while waiting for remote function response?

Hello,

Google and the search function didn’t help me this time. Is it possible
to change the mouse cursor while waiting for a response of a remote
function call?

On 04 Sep 2009, at 14:49, Heinz S. wrote:

Google and the search function didn’t help me this time. Is it
possible
to change the mouse cursor while waiting for a response of a remote
function call?

First of all, since a remote call should be asynchronous, I see no
real reason to do so. An indicator that you just show and hide is a
more appropriate indicator.

You could try and see if:

$$(‘body’).first().setStyle({‘cursor’: ‘wait !important’});

works, but I think at least one or two browsers won’t allow you to do
so. Reset it with:

$$(‘body’).first().setStyle({‘cursor’: ‘default’});

As I said, untested and probably won’t work, but that’s the only
possible solution I can think of right now.

Best regards

Peter De Berdt

Thanks, I’ll give it a try. I actually just wanna show the user that his
mouseclick is being processed so he doesn’t get confused if it takes a
bit longer and clicks again. Wouldn’t mind to show some “Loading…”
text either…

That’s a useful website! Thanks.

One more question… is there any possibility to make this loading gif
appear when I click on any remote function so I don’t have to add it to
each and every remote function call?

Heinz S. wrote:

Thanks, I’ll give it a try. I actually just wanna show the user that his
mouseclick is being processed so he doesn’t get confused if it takes a
bit longer and clicks again. Wouldn’t mind to show some “Loading…”
text either…

For the graphic side of this, you should be aware that
http://www.ajaxload.info has nice progress indicator images.

Best,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

On 04 Sep 2009, at 15:20, Heinz S. wrote:

Thanks, I’ll give it a try. I actually just wanna show the user that
his
mouseclick is being processed so he doesn’t get confused if it takes a
bit longer and clicks again. Wouldn’t mind to show some “Loading…”
text either…

Go to ajaxload.info, pick a nice little cursor. Then in your html,
just put something like:

Loading...

Style it so that the background image is that loader gif, indent the
text with -5000px. Then just use $(‘ajax-loader’).show() and $(‘ajax-
loader’).hide().

Best regards

Peter De Berdt

Well, I know how to show and hide a div box but my question was if it’s
possible to do it for all remote calls or do I have to add
:loading => “Element.show(‘ajax-loader’)”
and
:complete => “Element.hide(‘ajax-loader’)”
to every single remote call I wanna use the loader for?

Heinz S. wrote:

Well, I know how to show and hide a div box but my question was if it’s
possible to do it for all remote calls or do I have to add
:loading => “Element.show(‘ajax-loader’)”
and
:complete => “Element.hide(‘ajax-loader’)”
to every single remote call I wanna use the loader for?

Got it… helper was the solution:
def link_to_remote(name, options = {}, html_options = nil)
options[:loading] = “Element.show(‘loading’)”
options[:complete] = “Element.hide(‘loading’)”
link_to_function(name, remote_function(options), html_options ||
options.delete(:html))
end

Peter De Berdt wrote:

On 04 Sep 2009, at 15:20, Heinz S. wrote:

Thanks, I’ll give it a try. I actually just wanna show the user that
his
mouseclick is being processed so he doesn’t get confused if it takes a
bit longer and clicks again. Wouldn’t mind to show some “Loading…”
text either…

Go to ajaxload.info, pick a nice little cursor. Then in your html,
just put something like:

Loading...

Style it so that the background image is that loader gif, indent the
text with -5000px. Then just use $(‘ajax-loader’).show() and $(‘ajax-
loader’).hide().

Yup, the classic Fahrner Image Replacement trick. Although in this case
it’s probably unnecessary; an img with alt text would probably work just
as well.

Best regards

Best,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

Peter De Berdt

Peter De Berdt wrote:

A much better solution than patching the rails helpers would be to add
the following to public/javascripts/application.js (it adds a nice
little fade in and fade out too):

Ajax.Responders.register({
onCreate: function() {
new Effect.Appear(‘loading’, { duration: 0.3 });
},
onComplete: function(request, transport, json) {
if (0 == Ajax.activeRequestCount) {
new Effect.Fade(‘loading’, { duration: 0.3 });
}
if(!request.success()) {
alert(‘An error occurred while processing this request’);
}
}
});

It does indeed look pretty cool but it only works on the first click.
It’s not showing when I click somewhere else afterwards.

Heinz S. wrote:

It does indeed look pretty cool but it only works on the first click.
It’s not showing when I click somewhere else afterwards.

Accidently removed the div. It’s working. Thanks!

On 04 Sep 2009, at 18:37, Heinz S. wrote:

Got it… helper was the solution:
def link_to_remote(name, options = {}, html_options = nil)
options[:loading] = “Element.show(‘loading’)”
options[:complete] = “Element.hide(‘loading’)”
link_to_function(name, remote_function(options), html_options ||
options.delete(:html))
end

A much better solution than patching the rails helpers would be to add
the following to public/javascripts/application.js (it adds a nice
little fade in and fade out too):

Ajax.Responders.register({
onCreate: function() {
new Effect.Appear(‘loading’, { duration: 0.3 });
},
onComplete: function(request, transport, json) {
if (0 == Ajax.activeRequestCount) {
new Effect.Fade(‘loading’, { duration: 0.3 });
}
if(!request.success()) {
alert(‘An error occurred while processing this request’);
}
}
});

Best regards

Peter De Berdt

On 05 Sep 2009, at 10:28, Heinz S. wrote:

 if (0 == Ajax.activeRequestCount) {

It does indeed look pretty cool but it only works on the first click.
It’s not showing when I click somewhere else afterwards.

Accidently removed the div. It’s working. Thanks!

The major advantages of using this method are:

  • Less code litter in views (since patching the rails helper would put
    that code on every remote link you use)
  • Race conditions would make your rails helper fail:
    Example:
    • search number 1 is fired => loader shows
    • user immediately corrects and fires of a second request => loader
    keeps on showing but flashes
    • first request finished, but second one is still running => loader
    would disappear

Using the global Ajax.Responders checks if every request is finished
before hiding the loader.

Best regards

Peter De Berdt