Javascript 如何在由支持bean管理的进度条上设置JS效果？

我有

进度条工作正常

现在我想实施一种“放松”效果。 由于这些值随支持bean上的Ajax请求而变化，而不是Javascript函数，我如何在进度条上设置Javascript效果，或者在更新组件之前“截取”XHR响应以在Javascript中应用“易用”效果

如果有帮助，我会看到这种Ajax响应：

@ManagedBean
public class BackingBean implements Serializable {
    private Integer value;

    @PostConstruct
    public void init(){
        this.value = (int)Math.round(Math.random()*10);    
    }

    public Integer getValue(){
        this.value = (int)Math.round(Math.random()*10);    
        return value;
    }

    public void setValue(Integer value){
        this.value = value;
    }

    public void updateValue(){
        this.value = (int)Math.round(Math.random()*5);
    }
}

9%
$（函数（）PrimeFaces.cw(
“进度条”，
“widget_form_j_idt40_18_pbAjax”，
{
id:“格式：j_idt40:18:pbAjax”，
初始值：6，
阿贾克斯：错，
labelTemplate:“{value}%”
}
);
});
]]>

---

感谢您的帮助。

通过上面显示的设置，以下解决方案可以正常工作

我已经在托管Bean中将“update”方法设置为static

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
    <changes>
        <update id="form:j_idt40:18:pbAjax">
            <![CDATA[
                <div id="form:j_idt40:18:pbAjax" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
                    <div class="ui-progressbar-value ui-widget-header ui-corner-all" style="display:block;width:9%">
                    </div>
                    <div class="ui-progressbar-label" style="display:block">
                        9 %
                    </div>
                </div>
                <script id="form:j_idt40:18:pbAjax_s" type="text/javascript">
                    $(function() PrimeFaces.cw(
                        "ProgressBar",
                        "widget_form_j_idt40_18_pbAjax",    
                            {
                                id:"form:j_idt40:18:pbAjax",
                                initialValue:6,
                                ajax:false,
                                labelTemplate:"{value} %"
                             }
                         );
                     });
                </script>
            ]]>
        </update>
        <update id="j_id1:javax.faces.ViewState:0">
            <![CDATA[-1946172786751610988:-1619424769397867671]]>
        </update>
    </changes>
</partial-response>

在响应主体中创建了一个包含静态方法内容的servlet

public static Integer updateValue(){
    return (int)Math.round(Math.random()*5);
}

在servlet url上创建了循环XHR请求

@WebServlet(name = "ProgressBarServlet", urlPatterns = ("/ProgressBarServlet"})
public class ProgressBarServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("ProgressBarUpdate", "no-cache");
    PrintWriter out = response.getWriter();
    out.print(BackingBean.updateValue()+"");
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    processRequest(request, response);
}

setInterval（函数（）{
testAjax（“ProgressBarServlet”）；
}, 5000);
函数testAjax（servletURL）{
var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，servletURL，true）；
xmlhttp.onreadystatechange=函数（）{
如果（xmlhttp.readyState==4）{
if（xmlhttp.status==200）{
PF（'pbAjax'）.setValue（xmlhttp.responseText）；
}    
否则{
PF（'pbAjax'）.setValue（“错误”）；
}
}
};
xmlhttp.send（空）；
}

因此，进度条的值是用PrimeFaces Javascript设置的，并且具有易用性

尽管这可能不是更新组件的最有效方式，但此解决方案对于一个或几个组件可能很有用

---

这与我的情况无关，因为我有一个p:dataTable，每行都有一个进度条，并且无法将生成的ID链接到Javascript。

使用上面显示的设置，以下解决方案可以工作

我已经在托管Bean中将“update”方法设置为static

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
    <changes>
        <update id="form:j_idt40:18:pbAjax">
            <![CDATA[
                <div id="form:j_idt40:18:pbAjax" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
                    <div class="ui-progressbar-value ui-widget-header ui-corner-all" style="display:block;width:9%">
                    </div>
                    <div class="ui-progressbar-label" style="display:block">
                        9 %
                    </div>
                </div>
                <script id="form:j_idt40:18:pbAjax_s" type="text/javascript">
                    $(function() PrimeFaces.cw(
                        "ProgressBar",
                        "widget_form_j_idt40_18_pbAjax",    
                            {
                                id:"form:j_idt40:18:pbAjax",
                                initialValue:6,
                                ajax:false,
                                labelTemplate:"{value} %"
                             }
                         );
                     });
                </script>
            ]]>
        </update>
        <update id="j_id1:javax.faces.ViewState:0">
            <![CDATA[-1946172786751610988:-1619424769397867671]]>
        </update>
    </changes>
</partial-response>

在响应主体中创建了一个包含静态方法内容的servlet

public static Integer updateValue(){
    return (int)Math.round(Math.random()*5);
}

在servlet url上创建了循环XHR请求

@WebServlet(name = "ProgressBarServlet", urlPatterns = ("/ProgressBarServlet"})
public class ProgressBarServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("ProgressBarUpdate", "no-cache");
    PrintWriter out = response.getWriter();
    out.print(BackingBean.updateValue()+"");
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    processRequest(request, response);
}

setInterval（函数（）{
testAjax（“ProgressBarServlet”）；
}, 5000);
函数testAjax（servletURL）{
var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，servletURL，true）；
xmlhttp.onreadystatechange=函数（）{
如果（xmlhttp.readyState==4）{
if（xmlhttp.status==200）{
PF（'pbAjax'）.setValue（xmlhttp.responseText）；
}    
否则{
PF（'pbAjax'）.setValue（“错误”）；
}
}
};
xmlhttp.send（空）；
}

因此，进度条的值是用PrimeFaces Javascript设置的，并且具有易用性

尽管这可能不是更新组件的最有效方式，但此解决方案对于一个或几个组件可能很有用

---

这与我的情况无关，因为我有一个p:dataTable，每行都有一个进度条，无法将生成的ID链接到Javascript。

查看github中PrimeFaces源代码中的progressbar js，并尝试从中创建解决方案。为了“复杂”和具体，我实际上花了相当多的时间在这个问题上，并为您提供一个答案（因为在我看来，没有很多其他人对此感兴趣）。。。抱歉。事实上，在不将任何内容更改为PrimeFaces的情况下，我实际上可以在Javascript中实现一个XHR侦听器，然后可以更容易地修改XHR响应，比如Servlet。但我从来没这么做过。我没说你应该把东西改成素面，但你可以重写东西。。。从代码中学习会发生什么。实现一个XHR监听器可能太晚了（或者你用“覆盖PrimeFaces”的方式来实现）。查看github中PrimeFaces源代码中的progressbar js，并尝试从中创建一个解决方案。为了“复杂”和具体，我实际上花了相当多的时间在这个问题上，并为您提供一个答案（因为在我看来，没有很多其他人对此感兴趣）。。。抱歉。事实上，在不将任何内容更改为PrimeFaces的情况下，我实际上可以在Javascript中实现一个XHR侦听器，然后可以更容易地修改XHR响应，比如Servlet。但我从来没这么做过。我没说你应该把东西改成素面，但你可以重写东西。。。从代码中学习会发生什么。实现XHR侦听器可能太晚了（或者您采用“重写PrimeFaces”的方式）。