在每次 JSF ajax 回发后执行 JavaScript [英] Execute JavaScript after every JSF ajax postback

问题描述

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

我已执行以下操作以确保执行此操作的每个整页回发:

jQuery(document).ready(mahFunction);

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

我无法找到相关信息，可能是因为我使用了不正确的术语.我曾经是一名 ASP.NET 开发人员，我将这些术语称为整页回发"和部分回发"，而其他 JSF 开发人员似乎不使用这些术语.

解决方案

您可以通过 jsf.ajax.addOnEvent:

与

其中 data 对象有几个有用的 XHR 派生属性，在 JSF 2.0 规范(点击评估链接).以下是相关性的摘录:

<块引用>

表 14-4 事件数据负载

<前>名称 说明/值------------- ----------------------------------------------------输入事件"status 表 14-3 中指定的事件之一source 触发 Ajax 请求的 DOM 元素.responseCode Ajax 请求对象‘状态’(XMLHttpRequest.status)；开始"事件不存在；responseXML XML 响应(XMLHttpRequest.responseXML)；开始"事件不存在；responseText 文本响应(XMLHttpResponse.responseTxt)；开始"事件不存在；

---

作为替代方案，XHTML 声明方式是将脚本调用嵌入到带有 id 的 JSF 组件中，然后让 ajax 调用重新呈现它.该组件应根据 FacesContext#isPostback().

<h:commandButton value=提交"动作=#{bean.submit}"><f:ajax render=":myscript"></h:commandButton></h:form><h:panelGroup id="myscript"><h:outputScript render="#{facesContext.postback}">foo();</h:outputScript></h:panelGroup>

---

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

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

另见:

• 如何在form reRender后重新执行javascript函数?

I have a javascript function that I would like to execute after every asynchronous postback in 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.

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.

解决方案

You could register it as JSF ajax callback handler by 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 data object has several useful XHR derived properties which is described in table 14-4 of JSF 2.0 specification (click the For Evaluation link). Here's an extract of relevance:

TABLE 14-4 Event 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;

---

As an alternative, a XHTML-declarative way would be to just embed the script call in a JSF component with an id and let the ajax call re-render it. The component should in turn render the script conditionally based on 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 PrimeFaces command button.

<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?

这篇关于在每次 JSF ajax 回发后执行 JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！