在每次 JSF ajax 回发后执行 JavaScript

Execute JavaScript after every JSF ajax postback

提问by maple_shaft

I have a javascript function that I would like to execute after every asynchronous postback in JSF 2.

我有一个 javascript 函数，我想在 JSF 2 中的每次异步回发后执行。

I have done the following to ensure that every full page postback this gets executed:

我已完成以下操作以确保执行每个整页回发：

jQuery(document).ready(mahFunction);

The reason I need to do this is to workaround a glitch in a third-party JSF component library so I cannot modify anything in the server render phase to do this for the component.

我需要这样做的原因是为了解决第三方 JSF 组件库中的故障，因此我无法在服务器渲染阶段修改任何内容来为组件执行此操作。

I am having trouble finding information on this possibly because I am using the incorrect terms. I used to be an ASP.NET developer and I refer to these terms as "full page postback" and "partial postback" where it seems other JSF developers do not use such terms.

我在查找这方面的信息时遇到了困难，可能是因为我使用了不正确的术语。我曾经是一名 ASP.NET 开发人员，我将这些术语称为“整页回发”和“部分回发”，其他 JSF 开发人员似乎不使用这些术语。

回答by BalusC

You could register it as JSF ajax callback handler by jsf.ajax.addOnEvent:

您可以通过以下方式将其注册为 JSF ajax 回调处理程序jsf.ajax.addOnEvent：

<script>
    jsf.ajax.addOnEvent(foo);
</script>

with

和

<script>
    function foo(data) {
        var ajaxStatus = data.status; // Can be "begin", "complete" and "success".

        switch (ajaxStatus) {
            case "begin": // Right before sending ajax request.
                // ...
                break;

            case "complete": // Right after receiving ajax response.
                // ...
                break;

            case "success": // When ajax response is successfully processed.
                // ...
                break;
        }
    }
</script>

where the dataobject has several useful XHR derived properties which is described in table 14-4 of JSF 2.0 specification(click the For Evaluationlink). Here's an extract of relevance:

其中data对象具有几个有用的 XHR 派生属性，在JSF 2.0 规范的表 14-4 中进行了描述（单击For Evaluation链接）。这是相关性的摘录：

TABLE 14-4Event Data Payload

    Name           Description/Value
    -------------  ----------------------------------------------------
    type           “event”
    status         One of the events specified in TABLE 14-3
    source         The DOM element that triggered the Ajax request.
    responseCode   Ajax request object ‘status' (XMLHttpRequest.status); 
                   Not present for “begin” event;
    responseXML    The XML response (XMLHttpRequest.responseXML); 
                   Not present for “begin” event;
    responseText   The text response (XMLHttpResponse.responseTxt);
                   Not present for “begin” event;

表 14-4事件数据负载

    Name           Description/Value
    -------------  ----------------------------------------------------
    type           “event”
    status         One of the events specified in TABLE 14-3
    source         The DOM element that triggered the Ajax request.
    responseCode   Ajax request object ‘status' (XMLHttpRequest.status); 
                   Not present for “begin” event;
    responseXML    The XML response (XMLHttpRequest.responseXML); 
                   Not present for “begin” event;
    responseText   The text response (XMLHttpResponse.responseTxt);
                   Not present for “begin” event;

---

---

As an alternative, a XHTML-declarative way would be to just embed the script call in a JSF component with an idand let the ajax call re-render it. The component should in turn render the script conditionally based on FacesContext#isPostback().

作为替代方案，XHTML 声明方式是将脚本调用嵌入到带有 的 JSF 组件中，id并让 ajax 调用重新呈现它。组件应该反过来有条件地基于FacesContext#isPostback().

<h:form>
    <h:commandButton value="Submit" action="#{bean.submit}">
        <f:ajax render=":myscript">
    </h:commandButton>
</h:form>

<h:panelGroup id="myscript">
    <h:outputScript rendered="#{facesContext.postback}">foo();</h:outputScript>
</h:panelGroup>

---

---

Most component libraries have however better abstracted support for this. Since you didn't mention which one you're using so that a more suited answer can be given, here's just a random example based on PrimeFacescommand button.

然而，大多数组件库对此有更好的抽象支持。由于您没有提到您使用的是哪个，以便可以给出更合适的答案，这里只是一个基于PrimeFaces命令按钮的随机示例。

<p:commandButton value="Submit" action="#{bean.submit}" oncomplete="foo();" />

Refer the documentation of the component library you're using.

请参阅您正在使用的组件库的文档。

See also:

也可以看看：

• How to re-execute javascript function after form reRender?

• 表单reRender后如何重新执行javascript函数？