在执行操作之前重新加载页面的一部分? [英] Reload parts of a page before action is executed?

问题描述

我有一个h:commandButton呼叫一些action="#{bean.do}".还有一些对该按钮的ajax请求，该按钮应重新设计网站的一部分样式.重新样式应在执行动作之前 进行.我该怎么办?

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>

由于操作do有时会花费很长时间，因此我希望页面首先显示一条消息/图像或类似的内容.然后第一手执行动作.但是如何?

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?

推荐答案

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

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

例如:

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

为此，最好使用<f:ajax>的onevent属性，以便您可以还原更改:

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

这篇关于在执行操作之前重新加载页面的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！