在执行操作之前重新加载页面的一部分?

时间:2012-10-05 10:48:08

标签: ajax jsf

我有一个h:commandButton来调用一些action="#{bean.do}"。还有一些ajax请求该按钮应该重新设置网站的一部分。在执行操作之前,应该进行重定位。我怎么能这样做?

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

由于动作do有时需要很长时间,我希望页面首先显示消息/图像或同样。在那之后执行动作。但是如何?

1 个答案:

答案 0 :(得分:1)

您可以使用onclick属性在调用操作之前执行一些JavaScript代码。

E.g:

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

最好使用onevent <f:ajax>属性,以便您可以恢复更改:

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

例如这将禁用/启用按钮并显示/隐藏进度图像:

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