Changing cursor while waiting for remote function response?

rubyonrails-talk
1

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

2

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,

3

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?

4

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

5

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

6

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.

7

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