0

私はh:commandButtonいくつかの呼び出しがありaction="#{bean.do}"ます。また、Webサイトの一部のスタイルを変更する必要があるそのボタンに対するいくつかのajaxリクエスト。この再スタイル設定は、アクションが実行される前に実行する必要があります。これどうやってするの？

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

アクションdoに時間がかかることがあるので、最初にページにメッセージ/画像などを表示したいと思います。そして、その最初の人がアクションを実行します。しかし、どのように？

4

1 に答える 1

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;
    }
}
于 2012-10-05T10:49:46.247 に答える