Changing cursor while waiting for remote function response?

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

Peter De Berdt 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:

<div id="ajax-loader" style="display:none;">Loading...</div>

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,

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 Strunk 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

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

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.

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