Question

I have a h:commandButton calling some action="#{bean.do}". And also some ajax request for that button which should restyle a part of the website. This restyling should take place before the action is executed. How can I do this?

<h:commandButton action="#{bean.do}">
    <f:ajax execute="@form" render="specificId" />
</h:commandButton>

As the action do sometimes takes a long time, I want the page first to display a message/image or likewise. And after that frist execute the action. But how?

Answer 1

You can use the onclick attribute to execute some JavaScript code right before the action is invoked.

E.g.:

<h:commandButton ... onclick="document.body.style.background='pink'">

It’s however better to use onevent attribute of <f:ajax> for this, so that you can revert the change:

<h:commandButton ...>
    <f:ajax ... onevent="handleDo" />
</h:commandButton>
<img id="progress" src="progress.gif" class="hidden" />

with e.g. this which disables/enables the button and displays/hides the progress image:

function handleDo(data) {
    var status = data.status; // Can be 'begin', 'complete' and 'success'.
    var button = data.source; // The HTML element which triggered the ajax.
    var image = document.getElementById("progress"); // Ajax loading gif?

    switch (status) {
        case 'begin': // This is called right before ajax request is been sent.
            button.disabled = true;
            image.style.display = "block";
            break;

        case 'complete': // This is called right after ajax response is received.
            image.style.display = "none";
            break;

        case 'success': // This is called when ajax response is successfully processed.
            button.disabled = false;
            break;
    }
}