javascript - 表单重新渲染后如何重新执行javascript函数？

Question

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

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

请让我知道，如果有人对此有所了解。

Answer 1

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

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

这样，它会在页面加载时执行，并且如果表单被 ajax 更新，它也会执行。

至于 <f:ajax>本身，你也可以使用它的 onevent属性。

<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() 添加全局 Hook 这样您就不需要在每个 onevent 中都指定它 <f:ajax> 的属性如果功能要求适用于每个 ajax 请求。

jsf.ajax.addOnEvent(handleAjax);

另一种方法是使用 OmniFaces JSF utility library提供 <h:onloadScript> 正是为了这个目的。你可以把它放在你想要的头上。

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

这会在 View 上的每个 ajax 请求上自动重新执行，因此您无需将其复制到 View 中可以进行 ajax 更新的多个单独位置，或者在每个 <f:ajax render> 中重复其父 ID .