每一个JSF AJAX回发后执行JavaScript [英] Execute JavaScript after every JSF ajax postback

问题描述

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

我也做了以下，以确保每一个整页回发这得到执行：

  jQuery的（文件）。就绪（mahFunction）;  

我需要做的原因是要解决一个第三方的JSF组件库，一个小故障，所以我不能在服务器上修改任何东西呈现阶段，要做到这一点的组成部分。

我无法找到这个信息可能是因为我使用了不正确的条款。我曾经是一个ASP.NET开发人员，我把这些术语为整页回传和局部回传里似乎其他JSF开发人员不要使用这样的术语。

解决方案

您可以通过的 jsf.ajax.addOnEvent ：

 ＆LT;脚本＆GT;
    jsf.ajax.addOnEvent（富）;
＆LT; / SCRIPT＆GT;
 

与

 ＆LT;脚本＆GT;
    函数foo（数据）{
        VAR ajaxStatus = data.status; //可以是开始，完成和成功。

        开关（ajaxStatus）{
            案开始：发送Ajax请求之前//权。
                // ...
                打破;

            案完成：//收到Ajax响应之后。
                // ...
                打破;

            案成功：//当Ajax响应被成功处理。
                // ...
                打破;
        }
    }
＆LT; / SCRIPT＆GT;
 

其中数据对象有它在的 JSF 2.0规范（点击的有关评估的链接）。以下是相关的摘录：

  

表14-4 事件数据有效载荷

    名称描述/值
    ------------- ------------------------------------- ---------------
    键入事件
    表14-3中规定的事件的状态一
    源触发Ajax请求的DOM元素。
    响应code Ajax请求对象的状态（XMLHtt prequest.status）;
                   没有present的开始事件;
    responseXML的XML响应（XMLHtt prequest.responseXML）;
                   没有present的开始事件;
    responseText的文本响应（XMLHtt presponse.responseTxt）;
                   没有present的开始事件;

---

作为替代，一个XHTML的声明方式是只嵌入脚本调用的JSF组件与 ID 键，让Ajax调用重新渲染它。该组件应该反过来使脚本有条件地基于<一href="http://download.oracle.com/javaee/6/api/javax/faces/context/FacesContext.html#isPostback%28%29"相对=nofollow> 的FacesContext＃的IsPostBack（） 。

 ＆LT; H：形式GT;
    ＆LT; H：的commandButton值=提交行动=＃{bean.submit}＆GT;
        ＆LT; F：AJAX渲染=：MyScript可＆GT;
    ＆LT; / H：的commandButton＆GT;
＆LT; /小时：形式GT;

＆所述; H：panelGroup中的id =的MyScript＆GT;
    ＆LT; UI：片段渲染=＃{facesContext.postback}＆GT;
        ＆LT;脚本＆GT;富（）;＆LT; / SCRIPT＆GT;
    ＆LT; / UI：片断＆gt;
＆LT; /小时：panelGroup中＆GT;
 

---

大多数组件库有这个然而更好的抽象的支持。因为你没有提到你使用这样一个更适合的答案可以给其中之一，这里只是基于 PrimeFaces <随机例子/ A>命令按钮。

 ＆LT;电话号码：的commandButton值=提交行动=＃{bean.submit}的onComplete =富（）; /＆GT;
 

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

参见：

• <一个href="http://stackoverflow.com/questions/13081129/how-to-re-execute-javascript-function-after-form-rerender/">How形式重新呈现后，重新执行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">
    <ui:fragment rendered="#{facesContext.postback}">
        <script>foo();</script>
    </ui:fragment>
</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屋！