表单reRender后如何重新执行javascript函数? [英] How to re-execute javascript function after form reRender?

问题描述

我需要在表单重新渲染后重新执行 javascript.简单地说，在 XHTML 内容之后放入 javascript 无济于事，因为它是部分请求.此外，我不能使用onComplete"，因为我从中重新呈现表单的 commandButton 位于在多个地方使用的 JSF 组件中.我需要在本地进行修复.

I need to re-execute javascript just after form gets re-rendered. Simply, putting in javascript after XHTML content won't help since its a partial request. Also, I cannot use "onComplete" as the commandButton from which I am re-rendering form is in JSF component used at several places. I need to get the fix in locally.

有什么办法吗?我想知道 f:ajax 在这种情况下是否会有所帮助.

Is there any way? I was wondering whether f:ajax would help in this case.

如果有人知道，请告诉我.

Please let me know, if anyone has clue about it.

推荐答案

最简单的方法就是将 JS 函数调用放在待更新的组件本身中.

Simplest way is to just put the JS function call in the to-be-updated component itself.

<h:form>
    ...
    <h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>
    <h:outputScript>someFunction();</h:outputScript>
</h:form>

这样它会在页面加载时执行，也会在表单被 ajax 更新时执行.

This way it's executed as the page loads and also if the form get updated by ajax.

对于 本身，你也可以使用它的 oneevent 属性.

As to the <f:ajax> itself, you could also use its onevent attribute.

<f:ajax ... onevent="handleAjax" />

与

function handleAjax(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            someFunction();
            break;
    }
}

您可以通过 jsf.ajax.addOnEvent() 添加一个全局钩子，这样您就不需要在 的每个 onevent 属性中指定它 如果功能要求适用于每个 ajax 请求.

You could add a global hook by jsf.ajax.addOnEvent() so that you don't need to specify it in every single onevent attribute of <f:ajax> if the functional requirement applies to every ajax request.

jsf.ajax.addOnEvent(handleAjax);

另一种方法是使用 OmniFaces JSF 实用程序库，它提供了 正是为了这个目的.你可以把它放在你想要的头上.

An alternative is to use the OmniFaces JSF utility library which offers the <h:onloadScript> for exactly this purpose. You can place it in the head so you want.

<h:onloadScript>someFunction();</h:onloadScript>

这会在视图上的每个 ajax 请求上自动重新执行，这样您就不需要将它复制到视图中可以进行 ajax 更新的多个单独位置，或者在每个 <代码>.

This is automatically re-excuted on every single ajax request on the view so that you don't need to copy it over multiple individual places in the view which can be ajax-updated, or to repeat its parent ID in every <f:ajax render>.

这篇关于表单reRender后如何重新执行javascript函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！