Best practice for showing ajax loader gif?

rubyonrails-talk
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

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.

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

4

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.