PrimeFaces 4.0 PF未定义

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PrimeFaces 4.0 PF未定义相关的知识,希望对你有一定的参考价值。

我正在尝试使用PrimeFaces 4.0实现进度条。

我在官方网站上关注了这个例子:

http://www.primefaces.org/showcase/ui/progressBar.jsf

但是,在我复制并粘贴代码并运行它之后,

萤火虫告诉我

“PF没有定义。”

请在下面找到我的代码:

<h:form>

            <p:growl id="growl" />

            <h3>Client Side ProgressBar</h3>
            <p:commandButton value="Start" id="start" type="button"
                onclick="start()" widgetVar="startButton1" />
            <p:commandButton value="Cancel" id="cancel" type="button"
                onclick="cancel()" />

            <p:progressBar id="progressBarClient" widgetVar="pbClient"
                style="width:300px" />

        </h:form>

以下是我的javascripts:

<script type="text/javascript">
function start() {
    PF('startButton1').disable();

    window['progress'] = setInterval(function() {
        var pbClient = PF('pbClient'),
        oldValue = pbClient.getValue(),
        newValue = oldValue + 10;

        pbClient.setValue(pbClient.getValue() + 10);

        if(newValue === 100) {
            clearInterval(window['progress']);
        }


    }, 1000);
}

function cancel() {
    clearInterval(window['progress']);
    PF('pbClient').setValue(0);
    PF('startButton1').enable();
}

其中基本上都是从官方网站上复制的例子。

答案

尝试类似的东西:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Title</title>
            </f:facet>
        </h:head>

        <h:body>
            <h:form>
                <p:growl id="growl" />
                <h3>Client Side ProgressBar</h3>
                <p:commandButton value="Start" id="start" type="button"
                                 onclick="start()" widgetVar="startButton1" />
                <p:commandButton value="Cancel" id="cancel" type="button"
                                 onclick="cancel()" />
                <p:progressBar id="progressBarClient" widgetVar="pbClient"
                               style="width:300px" />
            </h:form>

            <script type="text/javascript">
                function start() {
                    PF('startButton1').disable();

                    window['progress'] = setInterval(function() {
                        var pbClient = PF('pbClient'),
                                oldValue = pbClient.getValue(),
                                newValue = oldValue + 10;

                        pbClient.setValue(pbClient.getValue() + 10);

                        if (newValue === 100) {
                            clearInterval(window['progress']);
                        }


                    }, 1000);
                }

                function cancel() {
                    clearInterval(window['progress']);
                    PF('pbClient').setValue(0);
                    PF('startButton1').enable();
                }
            </script>
        </h:body>
    </f:view>
</html>

以上是关于PrimeFaces 4.0 PF未定义的主要内容,如果未能解决你的问题,请参考以下文章

Primefaces 数据表重置分页

动态菜单primefaces 4.0

未捕获的ReferenceError:$未定义JSF Primefaces(h:包含头部)

PrimeFaces 4.0/JSF 2.2.x 中的文件上传不适用于 AJAX - javax.servlet.ServletException:请求内容类型不是多部分/表单数据

Primefaces 5 fileUpload处理程序未调用[重复]

primefaces民意调查未更新