Best practice for showing ajax loader gif?

Rails
1

what is the best practice for showing animated ajax spinner?

The usual Element.show(‘spinner’) has to stick with every form’s
:loading. Is there some easier or light-weight method?
Because I have this page that can contain upto 100 forms. And with all
of those would be 100 hidden spinners.

Please suggest something.

2

On 15 Apr 2008, at 14:35, Vapor … wrote:

what is the best practice for showing animated ajax spinner?

The usual Element.show(‘spinner’) has to stick with every form’s
:loading. Is there some easier or light-weight method?
Because I have this page that can contain upto 100 forms. And with all
of those would be 100 hidden spinners.

Depends on whether you need 1 spinner per form or a single page
spinner (since in the first case if you have 100 different spinners
those do have to be created somehow).
You may want to have a look at Ajax.Responders
(100 forms on a page doesn’t sound like a great idea)

Fred

3

Depends on whether you need 1 spinner per form or a single page
spinner (since in the first case if you have 100 different spinners
those do have to be created somehow).

I spinner per form.

(100 forms on a page doesn’t sound like a great idea)

True, but each form just contains a single field. And is in the
requirements. So have to do it anyway.

I read somewhere about giving CSS class name to DOM. Class definition
contains an animated gif. So you can call it from anywhere with
.addClassName . I tried but didnt work properly for me.

4

On 15 Apr 2008, at 14:45, Vapor … wrote:

requirements. So have to do it anyway.
There is such a thing as a badly designed requirement :slight_smile:

I read somewhere about giving CSS class name to DOM. Class definition
contains an animated gif. So you can call it from anywhere with
.addClassName . I tried but didnt work properly for me.

Sounds like a plan, although depending what element you call this on
it might not look like you want. I’d try setting all this up on a
simple test page to get the basics working and only then try and apply
it to the 100 form monster.

Fred

5

Using classes is the way to go, because the image is only loaded once
and applied to all elements that have the class.

you can use this javascript to change a class:

onclick=“Element.extend(this).addClassName(‘loading’)”

make sure that applying your class looks right in the first place! the
way I’d do this is to apply that class to the element by default, then
remove it when you’ve got it looking right and put the javascript in.
also make sure that your css that applies to the class loading is
below any of the other css that applies to this element, or it will be
over ridden.

On Apr 16, 1:52 am, Frederick C. [email protected]