Reload parts of a page before action is executed?

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?

BalusC · Accepted Answer · 2012-10-05T10:56:01.783

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;
    }
}

edited Oct 05 '12 at 10:56

answered Oct 05 '12 at 10:49

BalusC

1,082,665
372
3,610
3,555

What if I also want to rerender the button itself to be disabled one time it is clicked (+ while the action method executes)? – membersound Oct 05 '12 at 10:51
Thanks Balus, that's really nice. The button behaviour is as expected. Anyhow, the progress.gif is showing anytime. How can I disable it before the button has been pressed? – membersound Oct 05 '12 at 11:06
Add `.hidden { display: none; }` to your CSS. I'd expect it was obvious enough :) – BalusC Oct 05 '12 at 11:09
I alread tried `` but then it never shows the icon... – membersound Oct 05 '12 at 11:15
The code is as-is. Did you really use `` and `document.getElementById("progress")` correctly? – BalusC Oct 05 '12 at 11:19
Yes I do. just double-checked this! – membersound Oct 05 '12 at 11:22
Well, perhaps the image is just at the wrong location and returned 404 :) This example assumes the image file to be in the same folder as the base URL of the page. You can of course also use `` instead if that's easier. – BalusC Oct 05 '12 at 11:23
Yes of course I checked the location before and just displayed the image as it is. I'm seeing the image if I omit the display:none style... – membersound Oct 05 '12 at 11:28
I don't know. Apparently you changed something from the code. I'd start debugging the `var image` in JS code in your side. To be sure, disabling/enabling the button works just fine, right? – BalusC Oct 05 '12 at 11:36

Reload parts of a page before action is executed?

1 Answers1

Linked