ajax ui feedback (hourglass, throbbing, input disable)

[gnagy]

Hello,

We'd like to give feedback to the user while richfaces/a4j does its ajaxy things. We only found <a4j:status>, but would like to also change the mouse cursor to hourglass, or even disable the form being posted. Does anyone know solutions for such feedback to the user?

Thanks,
Greg

[shadowcreeper]

Have a4j:status open a rich:modalPanel (this disables the rest of the page while waiting) on start. Before it does that, have it add a class to the body tag that sets the cursor CSS style, and removes it after hiding the modalPanel on stop.

[gnagy]

Thanks for the tip. We finally came up with this solution:


function disableForm(formid) {
form = $(formid)
form.style.cursor = 'wait';
formElements = form.elements;
for(i = 0; i < formElements.length; i++){
formElements[ i].disabled = true;
}
}

function enableForm(formid) {
form = $(formid)
form.style.cursor = 'default';
formElements = form.elements;
for(i = 0; i < formElements.length; i++){
formElements[ i].disabled = false;
}
}

<a4j:status onstart="disableForm('#{formid}')" onstop="enableForm('#{formid}')">
...
</a4j:status>


Note, this will probably not work as expected if you have disabled form elements, because the javascript code will blindly enable them. This could be avoided with a marker value in the form control's class attribute.

[shadowcreeper]

That looks good.

Also, if you want a "processing" notice, then a rich:modalPanel also disables the rest of the page (we use an animated gif of a progress bar with the text "Processing request..." above it).

Of course, if you still want to be able to click on one of the page's other forms, the modalPanel will not work for you.