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

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs